t3-code-android-nightly/.repos/alchemy-effect/examples/neon-website-react-router/app/routes/home.tsx

import { useLoaderData } from "react-router";
import { Card } from "../components/Card.tsx";
import { Counter } from "../components/Counter.tsx";

// Runs on the server (the deployed Neon Functions runtime, or the Vite dev server
// under `alchemy dev`), so it reads the `env` declared in alchemy.run.ts
// from `process.env`.
export function loader() {
  return { greeting: process.env.GREETING ?? "Hello!" };
}

export default function Home() {
  const { greeting } = useLoaderData() as { greeting: string };
  return (
    <main>
      <h1 className="text-3xl font-bold">{greeting}</h1>
      <Card
        title="Styled with Tailwind CSS"
        body="This card is a React component styled with Tailwind utilities."
      />
      <Counter />
    </main>
  );
}