diff options
| author | Yuval Adam <_@yuv.al> | 2025-05-23 14:58:59 +0200 |
|---|---|---|
| committer | Yuval Adam <_@yuv.al> | 2025-05-23 14:58:59 +0200 |
| commit | 85bde2d3d69a9f976d3e8ecc9343d1b52a0ec29f (patch) | |
| tree | c44620501c92c007fb41a52dd72738d89d719c58 | |
| parent | c94a56e59aa5843af93bece5f9f73c6cd07a936c (diff) | |
Add CenteredLayout with basic tailwind styles
| -rw-r--r-- | src/components/Counter.jsx | 7 | ||||
| -rw-r--r-- | src/layouts/CenteredLayout.astro | 26 | ||||
| -rw-r--r-- | src/pages/index.astro | 18 |
3 files changed, 37 insertions, 14 deletions
diff --git a/src/components/Counter.jsx b/src/components/Counter.jsx index a2ae7c3..8661dc0 100644 --- a/src/components/Counter.jsx +++ b/src/components/Counter.jsx @@ -4,8 +4,11 @@ export default function Counter() { const [count, setCount] = useState(0); return ( - <div className="counter"> - <button onClick={() => setCount(count + 1)}> + <div className="flex justify-center"> + <button + className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors" + onClick={() => setCount(count + 1)} + > Clicked {count} times </button> </div> diff --git a/src/layouts/CenteredLayout.astro b/src/layouts/CenteredLayout.astro new file mode 100644 index 0000000..5505b65 --- /dev/null +++ b/src/layouts/CenteredLayout.astro @@ -0,0 +1,26 @@ +--- +import '../styles/global.css'; + +interface Props { + title?: string; +} + +const { title = "Astro Site" } = Astro.props; +--- + +<html lang="en"> + <head> + <meta charset="utf-8" /> + <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> + <meta name="viewport" content="width=device-width" /> + <meta name="generator" content={Astro.generator} /> + <title>{title}</title> + </head> + <body class="min-h-screen bg-white"> + <main class="flex min-h-screen flex-col items-center justify-center p-4"> + <div class="w-full max-w-4xl"> + <slot /> + </div> + </main> + </body> +</html> diff --git a/src/pages/index.astro b/src/pages/index.astro index ce6dc4e..22adfcf 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,17 +1,11 @@ --- import Counter from '../components/Counter'; +import CenteredLayout from '../layouts/CenteredLayout.astro'; --- -<html lang="en"> - <head> - <meta charset="utf-8" /> - <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> - <meta name="viewport" content="width=device-width" /> - <meta name="generator" content={Astro.generator} /> - <title>Astro</title> - </head> - <body> - <h1>Astro</h1> +<CenteredLayout title="Astro"> + <div class="text-center"> + <h1 class="text-4xl font-bold mb-6">Astro</h1> <Counter client:load /> - </body> -</html> + </div> +</CenteredLayout> |