Create playground for Astro components

astro.config.ts

@@ -6,9 +6,5 @@ import { defineConfig } from 'astro/config';
 // https://astro.build/config
 export default defineConfig({
   integrations: [react(), tailwind(), image()],
-  vite: {
-    ssr: {
-      external: ['svgo'],
-    },
-  },
+  vite: { ssr: { external: ['svgo'] } },
 });

src/components/atoms/labelled-value.astro

@@ -7,7 +7,7 @@ export interface Props extends astroHTML.JSX.HTMLAttributes {
 const { label, value, ...props } = Astro.props;
 ---
 
-<div {...props} class:list={['text-base space-x-1', props.class]}>
+<div {...props} class:list={['text-base', props.class]}>
   <span class="font-medium text-gray-700">{label}:</span>
   <span class="font-normal text-gray-500">{value}</span>
 </div>

src/pages/playground/button.astro

@@ -0,0 +1,7 @@
+---
+import Button from '@/atoms/button.astro';
+---
+
+<div class="p-5">
+  <Button>Button text</Button>
+</div>

src/pages/playground/labelled-value.astro

@@ -0,0 +1,7 @@
+---
+import LabelledValue from '@/atoms/labelled-value.astro';
+---
+
+<div class="p-5">
+  <LabelledValue label="Label" value="value" />
+</div>

src/pages/playground/section-card.astro

@@ -0,0 +1,7 @@
+---
+import SectionCard from '@/atoms/section-card.astro';
+---
+
+<div class="p-5">
+  <SectionCard>SectionCard text</SectionCard>
+</div>

src/pages/playground/typography.astro

@@ -0,0 +1,44 @@
+---
+import Typography from '@/atoms/typography.astro';
+
+const text = 'A quick brown fox jumps over the lazy dog';
+---
+
+<div class="p-5 space-y-10">
+  <div>
+    <p class="mb-2 font-mono">paragraph (default)</p>
+    <Typography>{text}</Typography>
+  </div>
+  <div>
+    <p class="mb-2 font-mono">main-title</p>
+    <Typography variant="main-title">{text}</Typography>
+  </div>
+  <div>
+    <p class="mb-2 font-mono">main-subtitle</p>
+    <Typography variant="main-subtitle">{text}</Typography>
+  </div>
+  <div>
+    <p class="mb-2 font-mono">section-title</p>
+    <Typography variant="section-title">{text}</Typography>
+  </div>
+  <div>
+    <p class="mb-2 font-mono">section-subtitle</p>
+    <Typography variant="section-subtitle">{text}</Typography>
+  </div>
+  <div>
+    <p class="mb-2 font-mono">item-title</p>
+    <Typography variant="item-title">{text}</Typography>
+  </div>
+  <div>
+    <p class="mb-2 font-mono">item-subtitle</p>
+    <Typography variant="item-subtitle">{text}</Typography>
+  </div>
+  <div>
+    <p class="mb-2 font-mono">tile-title</p>
+    <Typography variant="tile-title">{text}</Typography>
+  </div>
+  <div>
+    <p class="mb-2 font-mono">tile-subtitle</p>
+    <Typography variant="tile-subtitle">{text}</Typography>
+  </div>
+</div>