docs: Updated examples.

Author: Blankeos

dev/components/examples/example-base.tsx

@@ -15,14 +15,16 @@ export function ExampleBase(props: FlowProps<ExampleBaseProps>) {
     <div class="flex h-full max-h-[500px] w-full flex-col items-start gap-y-3 overflow-hidden rounded-lg bg-white p-5">
       <div class="flex w-full items-center justify-between">
         <h2 class="text-xl font-bold">{props.title}</h2>
-        <button
-          class={`flex h-8 w-8 items-center justify-center rounded-md border transition active:scale-95 ${viewing() === 'code' ? 'bg-background text-white' : ''}`}
-          onClick={() => {
-            setViewing(viewing() === 'code' ? 'result' : 'code');
-          }}
-        >
-          <IconCode class="h-4 w-4" />
-        </button>
+        <div class="flex items-center gap-x-2">
+          <button
+            class={`flex h-8 w-8 items-center justify-center rounded-md border transition active:scale-95 ${viewing() === 'code' ? 'bg-background text-white' : ''}`}
+            onClick={() => {
+              setViewing(viewing() === 'code' ? 'result' : 'code');
+            }}
+          >
+            <IconCode class="h-4 w-4" />
+          </button>
+        </div>
       </div>
 
       <div class="text-sm text-opacity-70">{props.description}</div>

dev/components/examples/use-click-outside/use-click-outside.code.mdx

@@ -1,10 +1,11 @@
 ```tsx
-const ref = useClickOutside(() => {
+import { useClickOutside } from 'bagon-hooks';
+
+export function App() {
+  const ref = useClickOutside(() => {
     console.log('Clicked outside!');
-});
+  });
 
-return (
-    <div ref={ref}>
-    </div>;
-)
+  return <div ref={ref}>Click outside of me.</div>;
+}
 ```

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

@@ -1,21 +1,16 @@
 ```tsx
-const [count, { decrement, increment, reset, set }] = useCounter(5, { min: 1, max: 10 });
+import { useCounter } from 'bagon-hooks';
 
-return (
+export function App() {
+  const [count, { decrement, increment, reset, set }] = useCounter(5, { min: 1, max: 10 });
+  return (
     <div>
-        {count()}
-        <button onClick={decrement}>-</button>
-        <button onClick={increment}>+</button>
-
-        <button onClick={reset}>
-            Reset
-        </button>
-
-        <button
-            onClick={() => set(Math.floor(Math.random() * 10))}
-        >
-            Set (To Random)
-        </button>
-    </div>;
-)
+      {count()}
+      <button onClick={decrement}>-</button>
+      <button onClick={increment}>+</button>
+      <button onClick={reset}>Reset</button>
+      <button onClick={() => set(Math.floor(Math.random() * 10))}>Set (To Random)</button>
+    </div>
+  );
+}
 ```

dev/components/examples/use-document-title/use-document-title.example.tsx

@@ -23,10 +23,12 @@ export function UseDocumentTitleExample() {
       code={<Code components={components} />}
     >
       <div class="flex h-full w-full flex-col items-center justify-center gap-x-1 rounded-md border p-3 py-10 text-center text-sm">
-        <div class="flex items-center gap-x-2">
-          <Kbd activated={title() === 'Home'}>Home</Kbd>
-          <Kbd activated={title() === 'About'}>About</Kbd>
-          <Kbd activated={title() === 'Awesome'}>Awesome</Kbd>
+        <div class="flex flex-col items-center gap-y-7">
+          <div class="flex items-center gap-x-2">
+            <Kbd activated={title() === 'Home'}>Home</Kbd>
+            <Kbd activated={title() === 'About'}>About</Kbd>
+            <Kbd activated={title() === 'Awesome'}>Awesome</Kbd>
+          </div>
           <button onClick={_cycle}>Toggle</button>
         </div>
       </div>

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

@@ -6,14 +6,11 @@ import { IconSolidJS, IconX } from 'dev/icons';
 import { createSignal } from 'solid-js';
 import { useMDXComponents } from 'solid-jsx';
 
+/** Improved Bagon implementation - You can choose to set it when you want. */
 export function UseFaviconExample() {
-  const [currentIcon, setCurrentIcon] = createSignal<'solid' | 'x' | undefined>(); // Not relevant, just for visuals
+  const [currentIcon, setCurrentIcon] = createSignal<'solid' | 'x' | undefined>(); // Not important (Just for visuals)
 
-  // OLD Implementation:
-  // const [favicon, setFavicon] = createSignal('https://docs.solidjs.com/favicon.svg');
-
-  // IMPROVED Implementation:
-  const [_favicon, setFavicon] = useFavicon();
+  const [_favicon, setFavicon] = useFavicon(); // The secret is: just don't pass an accessor in the hook.
 
   const setXFavicon = () => {
     setCurrentIcon('x');
@@ -64,3 +61,19 @@ export function UseFaviconExample() {
     </ExampleBase>
   );
 }
+
+/** Based on Mantine's implementation - it always runs onMount. */
+export function UseFaviconExampleMantine() {
+  const [favicon, setFavicon] = createSignal('https://docs.solidjs.com/favicon.svg');
+  const setXFavicon = () => setFavicon('https://x.com/favicon.ico');
+  const setSolidFavicon = () => setFavicon('https://docs.solidjs.com/favicon.svg');
+
+  useFavicon(favicon); // Will always run at the start.
+
+  return (
+    <>
+      <button onClick={setXFavicon}>Use X Favicon</button>
+      <button onClick={setSolidFavicon}>Use SolidJS Favicon</button>
+    </>
+  );
+}

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

@@ -1,7 +1,13 @@
 ```tsx
-useHotkeys([
-  ['mod+a', () => alert('Ctrl+Shift+A pressed')],
-  ['mod+Enter', () => alert('Alt+Shift+A pressed')],
-  ['shift+g', () => alert('Alt+A pressed')],
-]);
+import { useHotkeys } from 'bagon-hooks';
+
+export function App() {
+  useHotkeys([
+    ['mod+a', () => alert('Ctrl+Shift+A pressed')],
+    ['mod+Enter', () => alert('Alt+Shift+A pressed')],
+    ['shift+g', () => alert('Alt+A pressed')],
+  ]);
+
+  return <></>;
+}
 ```

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

@@ -1,5 +1,12 @@
 ```tsx
-const id = useId();
+import { useId } from 'bagon-hooks';
 
-return <div>Random ID: {id()}</div>;
+export function UseIdExample() {
+  const id = useId();
+  return (
+    <div class="flex h-full w-full items-center justify-center gap-x-1 rounded-md border p-3 py-10 text-center text-sm">
+      Random ID: <span class="rounded-md bg-neutral-300 px-1.5 py-0.5">{id()}</span>
+    </div>
+  );
+}
 ```

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

@@ -1,4 +1,7 @@
 ```tsx
+import { createStore } from "solid-js/store";
+import { useKeyboard } from "bagon-hooks";
+
 function KeyboardExample() {
   const [store, setStore] = createStore({ a: false, b: false, c: false, d: false });
 

dev/components/examples/use-local-storage-store/use-local-storage-store.example.tsx

@@ -21,9 +21,9 @@ export function UseLocalStorageStoreExample() {
       title="useLocalStorageStore"
       description={
         <>
-          (Improvement) A hook that allows using value from the localStorage as a store. The hook
-          works exactly the same way as createStore, but also writes the value to the localStorage.
-          It even works between tabs!
+          (Improvement) A hook that allows using value from the localStorage as a store for complex
+          and efficient state management. The hook works exactly the same way as createStore, but
+          also writes the value to the localStorage. It even works between tabs!
           <br />
           <br />
           To test, try changing the value with two tabs open.

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

@@ -1,9 +1,9 @@
 ```tsx
-const os = useOs();
+import { useOs } from 'bagon-hooks';
 
-return (
-    <div>
-        Current OS: {os()}
-    </div>;
-)
+export function App() {
+  const os = useOs();
+
+  return <div>Current OS: {os()}</div>;
+}
 ```