feat(docs): Improve components page

docs/astro.config.mjs

@@ -1,8 +1,9 @@
 import { defineConfig } from 'astro/config'
 import tailwind from '@astrojs/tailwind'
 import mdx from '@astrojs/mdx'
+import react from '@astrojs/react'
 
 // https://astro.build/config
 export default defineConfig({
-  integrations: [tailwind(), mdx()]
+  integrations: [tailwind(), mdx(), react()]
 })

docs/package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "@astrojs/check": "^0.7.0",
     "@astrojs/mdx": "^3.0.1",
+    "@astrojs/react": "^3.5.0",
     "@astrojs/tailwind": "^5.1.0",
     "astro": "^4.9.2",
     "tailwindcss": "^3.4.3",

docs/src/components/lib/button-group.jsx

@@ -0,0 +1,9 @@
+export default function ButtonGroup() {
+  return (
+    <div class="button-group">
+      <button class="button">add</button>
+      <button class="button">random</button>
+      <button class="button">notes</button>
+    </div>
+  )
+}

docs/src/components/lib/button.jsx

@@ -0,0 +1,3 @@
+export default function Button() {
+  return <button class="button border-2">Example button</button>
+}

docs/src/components/lib/card.jsx

@@ -0,0 +1,19 @@
+export default function Card() {
+  return (
+    <div class="card w-full">
+      <div class="card__body">
+        <h2 class="card__title">Your Gateway to Timeless Literature</h2>
+        <p>
+          Welcome to OMUSO API, a digital service for literature enthusiasts and
+          developrs. Our platform leverages a powerful API to bring you an
+          extensive collection of classical texts and detailed information about
+          their authors, making it easier than ever to delve into the world’s
+          most treasured literary works.
+        </p>
+      </div>
+      <div class="card__actions text-right">
+        <button class="button">Start →</button>
+      </div>
+    </div>
+  )
+}

docs/src/components/lib/select.jsx

@@ -0,0 +1,12 @@
+export default function Select() {
+  return (
+    <select class="select border-2">
+      <option disabled selected>
+        Choose an option
+      </option>
+      <option value="one">Option one</option>
+      <option value="two">Option two</option>
+      <option value="three">Option three</option>
+    </select>
+  )
+}

docs/src/components/lib/table.jsx

@@ -0,0 +1,26 @@
+export default function Table() {
+  return (
+    <table class="table">
+      <thead>
+        <tr>
+          <th>Date</th>
+          <th>Amount</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th>First 6 weeks</th>
+          <td>£109.80 per week</td>
+        </tr>
+        <tr>
+          <th>Next 33 weeks</th>
+          <td>£109.80 per week</td>
+        </tr>
+        <tr>
+          <th>Total estimated pay</th>
+          <td>£4,282.20</td>
+        </tr>
+      </tbody>
+    </table>
+  )
+}

docs/src/content/components/button-group.mdx

@@ -3,27 +3,23 @@ title: Button Group
 ---
 
 import Example from '../../components/Example.astro'
+import ButtonGroup from '../../components/lib/button-group'
+export const Component = () => <ButtonGroup />
 
 # Button Group
 
 ## Default
 
-<Example
-  component={() => (
-    <div class="button-group">
-      <button class="button">add</button>
-      <button class="button">random</button>
-      <button class="button">notes</button>
-    </div>
-  )}
->
-  ```html
-  <div class="button-group">
-    <button class="button">add</button>
-    <button class="button">random</button>
-    <button class="button">notes</button>
-  </div>
-  ```
+<Example component={Component}>
+
+```html
+<div class="button-group">
+  <button class="button">add</button>
+  <button class="button">random</button>
+  <button class="button">notes</button>
+</div>
+```
+
 </Example>
 
 ## Full width

docs/src/content/components/button.mdx

@@ -3,6 +3,8 @@ title: Button
 ---
 
 import Example from '../../components/Example.astro'
+import Button from '../../components/lib/button'
+export const Component = () => <Button />
 
 # Button
 
@@ -18,9 +20,7 @@ import Example from '../../components/Example.astro'
 
 ## Default
 
-<Example
-  component={() => <button class="button border-2">Example button</button>}
->
+<Example component={Component}>
   ```js
   <button class="button border-2">Example button</button>
   ```

docs/src/content/components/card.mdx

@@ -0,0 +1,47 @@
+---
+title: Card
+---
+
+import Example from '../../components/Example.astro'
+import Card from '../../components/lib/card'
+export const Component = () => <Card />
+
+# Card
+
+## Variables
+
+```css
+--va-card-color: var(--va-text-normal);
+--va-card-font-size: var(--va-font-size-1);
+--va-card-padding: var(--va-space-3);
+--va-card-border-width: var(--va-border-width);
+--va-card-border-color: var(--va-border-color);
+--va-card-background-color: var(--va-surface-primary);
+```
+
+## Default
+
+<Example
+  component={Component}
+
+>
+
+```js
+<div class="card w-full">
+  <div class="card__body">
+    <h2 class="card__title">Your Gateway to Timeless Literature</h2>
+    <p>
+      Welcome to OMUSO API, a digital service for literature enthusiasts and
+      developrs. Our platform leverages a powerful API to bring you an extensive
+      collection of classical texts and detailed information about their
+      authors, making it easier than ever to delve into the world’s most
+      treasured literary works.
+    </p>
+  </div>
+  <div class="card__actions text-right">
+    <button class="button">Start →</button>
+  </div>
+</div>
+```
+
+</Example>

docs/src/content/components/select.mdx

@@ -3,23 +3,14 @@ title: Select
 ---
 
 import Example from '../../components/Example.astro'
+import Select from '../../components/lib/select'
+export const Component = () => <Select />
 
 # Select
 
 ## Default
 
-<Example
-  component={() => (
-    <select class="select border-2">
-      <option disabled selected>
-        Choose an option
-      </option>
-      <option value="one">Option one</option>
-      <option value="two">Option two</option>
-      <option value="three">Option three</option>
-    </select>
-  )}
->
+<Example component={Component}>
   ```js
   <select class="select border-2">
     <option disabled selected>

docs/src/content/components/table.mdx

@@ -3,6 +3,8 @@ title: Table
 ---
 
 import Example from '../../components/Example.astro'
+import Table from '../../components/lib/table'
+export const Component = () => <Table />
 
 # Table
 
@@ -19,31 +21,7 @@ import Example from '../../components/Example.astro'
 ## Default
 
 <Example
-  component={() => 
-    <table class="table">
-      <thead>
-      <tr>
-        <th>Date</th>
-        <th>Amount</th>
-      </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <th>First 6 weeks</th>
-          <td>£109.80 per week</td>
-        </tr>
-        <tr>
-          <th>Next 33 weeks</th>
-          <td>£109.80 per week</td>
-        </tr>
-        <tr>
-          <th>Total estimated pay</th>
-          <td>£4,282.20</td>
-        </tr>
-      </tbody>
-    </table>
-
-}
+  component={Component}
 
 >
 

docs/src/pages/components/index.astro

@@ -1,16 +1,35 @@
 ---
 import { getCollection } from 'astro:content';
 import Layout from '../../layouts/Page.astro';
+import type { MDXInstance } from 'astro';
 
 const allComponents = await getCollection('components');
 
 const links = allComponents.map(({data, slug}) => ({
 		text: data.title,
 		href: `/components/${slug}`
 	}))
+
+const components = await Astro.glob('../../content/components/*.mdx');
 ---
 
 <Layout items={links} backHref="/">
 	<h1 class="text-4xl font-bold">Components</h1>
+	<p>{allComponents.length} components</p>
+	<div class="grid grid-cols-2 gap-8">
+		{allComponents.map(({data, slug}) => {
+			const { Component }: any = components.find((item) => item.frontmatter.title === data.title)
+			return (
+			<div class="card">
+				<div class="card__body aspect-video grid place-content-center">
+					{Component ? <Component /> : <h2>{data.title}</h2>}
+				</div>
+				<div class="card__actions">
+					<a href={`/components/${slug}`} class="button">More info →</a>
+				</div>
+			</div>
+		)
+		})}
+	</div>
 </Layout>