tmp

.tkb

@@ -34,16 +34,15 @@
     "a7ksr41sN7kQNaH8Io-dV": {
       "id": "a7ksr41sN7kQNaH8Io-dV",
       "description": "Add support for css modules",
-      "columnId": "column-todo"
+      "columnId": "column-done"
     }
   },
   "columns": [
     {
       "id": "column-todo",
       "title": "To do",
       "tasksIds": [
-        "p1R-Q4atxMo-29mSa7mb6",
-        "a7ksr41sN7kQNaH8Io-dV"
+        "p1R-Q4atxMo-29mSa7mb6"
       ]
     },
     {
@@ -57,6 +56,7 @@
       "id": "column-done",
       "title": "Done",
       "tasksIds": [
+        "a7ksr41sN7kQNaH8Io-dV",
         "RtA7NBfPOlfnVHqk54rMD",
         "fqhes_YS14GQopOUs7K-7",
         "task-ZJpp-dpxx3KxRMsAPNuMC",

packages/shared-ui/src/lib-examples/index.tsx

@@ -1,10 +1,11 @@
 import { Logo } from "../common/logo";
 import SimpleColorSwitch from "./simple-color-switch";
 import ThemeSwitching from "./theme-switching";
+import styles from "./lib-examples.module.css";
 
 export default function LibExamples() {
   return (
-    <div>
+    <div className={styles["lib-example-container"]}>
       <h1>
         <Logo /> examples.
       </h1>

packages/shared-ui/src/lib-examples/lib-examples.module.css

@@ -0,0 +1,23 @@
+.lib-example-container {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  flex-wrap: wrap;
+}
+
+.example {
+  min-width: 200px;
+  min-height: 200px;
+  flex-grow: 1;
+  border-radius: 20px;  
+}
+
+.example * {
+  background: var(--bg-color);
+}
+
+
+.lib-example-container h1 {
+  text-align: center;
+  width: 100%;
+}

packages/shared-ui/src/lib-examples/simple-color-switch/index.tsx

@@ -1,3 +1,16 @@
+import { ColorSwitch, ThemeSwitcher } from "nthul";
+import { ServerTarget } from "nthul/server";
+import styles from "../lib-examples.module.css";
+
+const targetId = "simple-color-switch";
 export default function SimpleColorSwitch() {
-  return <div></div>;
+  return (
+    <div className={styles.example}>
+      <ServerTarget targetId={targetId} />
+      <ThemeSwitcher targetId={targetId} />
+      <header>
+        <ColorSwitch targetId={targetId} />
+      </header>
+    </div>
+  );
 }

packages/shared-ui/src/lib-examples/theme-switching/index.tsx

@@ -1,3 +1,26 @@
-export default function ThemeSwitching() {
-  return <div></div>;
+import { ColorSwitch, ThemeSwitcher } from "nthul";
+import { ServerTarget } from "nthul/server";
+import styles from "../lib-examples.module.css";
+
+const targetId = "theme-switching";
+const themes = ["theme1", "theme2"];
+export default function SimpleColorSwitch() {
+  return (
+    <div className={styles.example}>
+      <ServerTarget targetId={targetId} />
+      <ThemeSwitcher targetId={targetId} />
+      <header>
+        <ColorSwitch targetId={targetId} />
+      </header>
+      <main>
+        <select name="" id="">
+          {themes.map(th => (
+            <option value={th} key={th}>
+              {th}
+            </option>
+          ))}
+        </select>
+      </main>
+    </div>
+  );
 }

packages/shared-ui/src/root-layout.tsx

@@ -8,6 +8,7 @@ import { Cards } from "./cards";
 import { Description } from "./root/description";
 import { Hero } from "./root/hero";
 import { Footer } from "./root/footer";
+import LibExamples from "./lib-examples";
 
 export type SharedRootLayoutProps = HTMLProps<HTMLElement>;
 
@@ -19,6 +20,7 @@ export function SharedRootLayout({ children, className = "", ...props }: SharedR
         <Description />
         {children}
         <Hero />
+        <LibExamples />
         <Cards />
       </main>
       <Footer />