docs: Implement a interactive component documentation

apps/starlight/astro.config.mjs

@@ -50,6 +50,19 @@ export default defineConfig({
             },
           ],
         },
+        {
+          label: 'solid',
+          items: [
+            {
+              label: 'Introduction',
+              slug: 'solid',
+            },
+            {
+              label: 'Components',
+              autogenerate: { directory: 'solid/components' },
+            },
+          ],
+        },
       ],
     }),
   ],

apps/starlight/package.json

@@ -11,6 +11,9 @@
     "check": "astro check"
   },
   "devDependencies": {
+    "@spuxx/browser-utils": "workspace:@spuxx/browser-utils@*",
+    "@spuxx/js-utils": "workspace:@spuxx/js-utils@*",
+    "@spuxx/solid": "workspace:@spuxx/solid@*",
     "@astrojs/check": "0.9.4",
     "@astrojs/mdx": "4.0.8",
     "@astrojs/solid-js": "5.0.4",

apps/starlight/src/components/interactive/interactive.component.tsx

@@ -0,0 +1,20 @@
+import { createSignal, type Component, type ComponentProps } from 'solid-js';
+import { Dynamic } from 'solid-js/web';
+import { Container, Divider, Heading } from '@spuxx/solid';
+
+interface Props {
+  component: Component;
+}
+
+export const Interactive: Component<Props> = (props) => {
+  const { component } = props;
+  const [args] = createSignal<ComponentProps<typeof component>>({});
+
+  return (
+    <Container class="outlined">
+      <Heading level={2}>Live example</Heading>
+      <Divider />
+      <Dynamic component={props.component} {...args()} />
+    </Container>
+  );
+};