feat(dev-server): add a components page

src/dev-server.tsx

@@ -1,39 +1,38 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import {
-  createBrowserRouter,
-  RouterProvider,
-} from "react-router-dom";
-import { Index } from './dev-server/index';
-import './dev-server.css'
-import '@inkdropapp/css/reset.css'
-import '@inkdropapp/css/tokens.css'
-import '@inkdropapp/base-ui-theme/styles/theme.css'
-import { ColorTokensPage } from './dev-server/color-tokens';
-import { VariablesPage } from './dev-server/variables';
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import { Index } from "./dev-server/index";
+import "./dev-server.css";
+import "@inkdropapp/css/reset.css";
+import "@inkdropapp/css/tokens.css";
+import "@inkdropapp/base-ui-theme/styles/theme.css";
+import { ColorTokensPage } from "./dev-server/color-tokens";
+import { VariablesPage } from "./dev-server/variables";
+import { ComponentsPage } from "./dev-server/components";
 
 const cssFiles = [
-  '/Users/nora/Developments/inkdrop/plugins/solarized-light-ui/styles/tokens.css',
-  '/Users/nora/Developments/inkdrop/plugins/solarized-light-ui/styles/theme.css'
-]
+  "/Users/nora/Developments/inkdrop/plugins/solarized-light-ui/styles/tokens.css",
+  "/Users/nora/Developments/inkdrop/plugins/solarized-light-ui/styles/theme.css",
+];
 
 cssFiles.forEach((file) => {
-  import( /* @vite-ignore */  file)
-})
+  import(/* @vite-ignore */ file);
+});
 
 const router = createBrowserRouter([
   {
     path: "/",
     element: <Index />,
     children: [
-      { path: '', element: <VariablesPage /> },
-      { path: 'tokens', element: <ColorTokensPage /> }
-    ]
+      { path: "", element: <VariablesPage /> },
+      { path: "tokens", element: <ColorTokensPage /> },
+      { path: "components", element: <ComponentsPage /> },
+    ],
   },
 ]);
 
-createRoot(document.getElementById('root')!).render(
+createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <RouterProvider router={router} />
   </StrictMode>,
-)
+);

src/dev-server/components.tsx

@@ -0,0 +1,29 @@
+import { getCSSVariables } from "./get-css-variables";
+
+export const ComponentsPage = () => {
+  return (
+    <>
+      <h2>Components</h2>
+      <div className="component-list">
+        <div className="component-item">
+          <h3>Button</h3>
+          <div>
+            <button className="ui button">Button</button>
+            <button className="ui basic button">Basic Button</button>
+            <button className="ui primary button">Primary Button</button>
+            <button className="ui negative button">Negative Button</button>
+          </div>
+        </div>
+        <div className="component-item">
+          <h3>Button</h3>
+          <div>
+            <button className="ui button">Button</button>
+            <button className="ui basic button">Basic Button</button>
+            <button className="ui primary button">Primary Button</button>
+            <button className="ui negative button">Negative Button</button>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};

src/dev-server/nav.tsx

@@ -2,9 +2,10 @@ import { Link } from "react-router-dom";
 
 export const Nav = () => {
   return (
-    <div className='nav'>
-      <Link to='/'>Variables</Link>
-      <Link to='/tokens'>Color Tokens</Link>
+    <div className="nav">
+      <Link to="/">Variables</Link>
+      <Link to="/tokens">Color Tokens</Link>
+      <Link to="/components">Components</Link>
     </div>
-  )
-}
+  );
+};