feat: Added examples for all hooks so far.

Author: Blankeos

dev/components/examples/example-base.tsx

@@ -16,7 +16,7 @@ export function ExampleBase(props: FlowProps<ExampleBaseProps>) {
       <div class="flex w-full items-center justify-between">
         <h2 class="text-2xl font-bold">{props.title}</h2>
         <button
-          class="rounded-md border p-2 transition active:scale-95"
+          class={`rounded-md border p-2 transition active:scale-95 ${viewing() === 'code' ? 'bg-background text-white' : ''}`}
           onClick={() => {
             setViewing(viewing() === 'code' ? 'result' : 'code');
           }}

dev/components/examples/use-element-size/use-element-size.code.mdx

@@ -1,9 +1,11 @@
 ```tsx
-const [ref, rectStore] = useElementSize();
+const { ref, width, height } = useElementSize();
 
 return (
-    <textarea ref={ref}>
-        {JSON.stringify(rectStore, null, 2)}
-    </textarea>;
-)
+  <div>
+    <textarea ref={ref}></textarea>
+    Width: {width().toFixed(2)}
+    Height: {height().toFixed(2)}
+  </div>
+);
 ```

dev/components/examples/use-hotkeys/use-hotkeys.example.tsx

@@ -51,9 +51,9 @@ function Key(props: FlowProps<{ activated: boolean }>) {
     <div class="relative text-xs">
       <div class="absolute inset-0 rounded-md bg-neutral-200 transition"></div>
       <div
-        class="relative rounded-md border bg-neutral-50 px-2 py-1.5"
+        class="relative transform rounded-md border bg-neutral-50 px-2 py-1.5 transition-transform"
         style={{
-          translate: props.activated ? '0px 0px' : '0px -5px',
+          transform: props.activated ? 'translateY(0px)' : 'translateY(-5px)',
         }}
       >
         {props.children}

dev/components/examples/use-resize-observer/use-resize-observer.code.mdx

@@ -2,8 +2,9 @@
 const [ref, rectStore] = useResizeObserver();
 
 return (
-    <textarea ref={ref}>
-        {JSON.stringify(rectStore, null, 2)}
-    </textarea>;
-)
+  <div>
+    <textarea ref={ref}></textarea>
+    {JSON.stringify(rectStore, null, 2)}
+  </div>
+);
 ```

dev/components/examples/use-toggle/use-toggle.code.mdx

@@ -0,0 +1,5 @@
+```tsx
+const [value, toggle] = useToggle(['apple', 'orange', 'grape', 'kiwi'] as const);
+
+return <div>{value()}</div>;
+```

dev/components/examples/use-toggle/use-toggle.example.tsx

@@ -0,0 +1,75 @@
+import { useToggle } from 'src';
+import { ExampleBase } from '../example-base';
+import Code from './use-toggle.code.mdx';
+
+import { useMDXComponents } from 'solid-jsx';
+import { createMemo, createSignal, FlowProps, VoidProps } from 'solid-js';
+
+export function UseToggleExample() {
+  const [value, toggle] = useToggle(['apple', 'orange', 'grape', 'kiwi'] as const);
+
+  // @ts-ignore
+  const components: any = useMDXComponents();
+
+  const color = createMemo(() => {
+    if (value() === 'apple') {
+      return '#e5312f';
+    }
+
+    if (value() === 'orange') {
+      return '#fc8627';
+    }
+
+    if (value() === 'grape') {
+      return '#bc3d73';
+    }
+
+    if (value() === 'kiwi') {
+      return '#acc144';
+    }
+
+    return undefined;
+  });
+
+  return (
+    <ExampleBase
+      title="useToggle"
+      description="A hook that toggles between two or multiple values (by implementing a common state pattern). Dev Note: Personally this can be called `useCycle` instead since it cycles through the options."
+      code={<Code components={components} />}
+    >
+      <div
+        class="flex h-full w-full flex-col items-center justify-center gap-3 rounded-md border p-3 py-10 text-center transition-colors"
+        style={{
+          'background-color': color(),
+        }}
+      >
+        <div class="flex flex-wrap gap-3">
+          <Key activated={value() === 'apple'}>🍎 apple</Key>
+          <Key activated={value() === 'orange'}>🍊 orange</Key>
+          <Key activated={value() === 'grape'}>🍇 grape</Key>
+          <Key activated={value() === 'kiwi'}>🥝 kiwi </Key>
+        </div>
+
+        <button onClick={() => toggle()} class="text-white transition active:scale-95">
+          Click me to Toggle
+        </button>
+      </div>
+    </ExampleBase>
+  );
+}
+
+function Key(props: FlowProps<{ activated: boolean }>) {
+  return (
+    <div class="relative text-xs">
+      <div class="absolute inset-0 rounded-md bg-neutral-200 transition"></div>
+      <div
+        class="relative transform rounded-md border bg-neutral-50 px-2 py-1.5 transition-transform"
+        style={{
+          transform: props.activated ? 'translateY(0px)' : 'translateY(-5px)',
+        }}
+      >
+        {props.children}
+      </div>
+    </div>
+  );
+}

dev/pages/index/+Page.tsx

@@ -11,6 +11,7 @@ import { UseMountedExample } from 'dev/components/examples/use-mounted/use-mount
 import { UseNetworkExample } from 'dev/components/examples/use-network/use-network.example';
 import { UseOsExample } from 'dev/components/examples/use-os/use-os.example';
 import { UseResizeObserverExample } from 'dev/components/examples/use-resize-observer/use-resize-observer.example';
+import { UseToggleExample } from 'dev/components/examples/use-toggle/use-toggle.example';
 import { MarkdownContextProvider } from 'dev/components/markdown/markdown.context';
 import { IconLogo } from 'dev/icons';
 import { title } from 'process';
@@ -86,6 +87,10 @@ export default function HomePage() {
       title: 'useElementSize', // Make sure this is under useResizeObserver
       example: <UseElementSizeExample />,
     },
+    {
+      title: 'useToggle',
+      example: <UseToggleExample />,
+    },
   ];
 
   const filteredList = createMemo(() => {