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