| 1 | import { useLoaderData } from "react-router"; |
| 2 | import { Card } from "../components/Card.tsx"; |
| 3 | import { Counter } from "../components/Counter.tsx"; |
| 4 | |
| 5 | // Runs on the server (the deployed Prisma Compute runtime, or the Vite dev server |
| 6 | // under `alchemy dev`), so it reads the `env` declared in alchemy.run.ts |
| 7 | // from `process.env`. |
| 8 | export function loader() { |
| 9 | return { greeting: process.env.GREETING ?? "Hello!" }; |
| 10 | } |
| 11 | |
| 12 | export default function Home() { |
| 13 | const { greeting } = useLoaderData() as { greeting: string }; |
| 14 | return ( |
| 15 | <main> |
| 16 | <h1 className="text-3xl font-bold">{greeting}</h1> |
| 17 | <Card |
| 18 | title="Styled with Tailwind CSS" |
| 19 | body="This card is a React component styled with Tailwind utilities." |
| 20 | /> |
| 21 | <Counter /> |
| 22 | </main> |
| 23 | ); |
| 24 | } |