Use orientation docs

website/package.json

@@ -29,7 +29,7 @@
     "@builder.io/qwik": "^1.5.1",
     "@builder.io/qwik-city": "^1.5.1",
     "@builder.io/qwik-labs": "github:BuilderIo/qwik-labs-build#main",
-    "@ditadi/qwik-hooks": "0.1.5",
+    "@ditadi/qwik-hooks": "0.1.6-beta.1",
     "@fontsource-variable/fira-code": "^5.0.17",
     "@fontsource-variable/outfit": "^5.0.12",
     "@qwik-ui/headless": "^0.3.3",

website/src/docs/index.ts

@@ -2,6 +2,7 @@ import useCopyClipboard from "./copy-clipboard/doc";
 import useDebounce from "./debounce/doc";
 import useLocalStorage from "./local-storage/doc";
 import useMediaQuery from "./media-query/doc";
+import useOrientation from "./orientation/doc";
 import usePrevious from "./previous/doc";
 import useWindowSize from "./window-size/doc";
 
@@ -35,4 +36,5 @@ export default [
     useWindowSize,
     usePrevious,
     useMediaQuery,
+    useOrientation,
 ] as HookDoc[];

website/src/docs/orientation/code.ts

@@ -0,0 +1,23 @@
+export default `
+
+import { component$ } from "@builder.io/qwik";
+import { useOrientation } from "@ditadi/qwik-hooks";
+
+export default component$(() => {
+    const { value: orientation } = useOrientation();
+
+    return (
+        <div class="flex flex-col bg-background w-full items-center p-10 gap-5">
+            <h1 class="text-white">useOrientation</h1>
+
+            <div
+                class={\`w-[200px] rotate-\${orientation.angle} aspect-video bg-transparent border-primary border flex justify-center p-4 flex-col\`}
+            />
+            <div class="flex gap-5 bg-foreground px-4 py-2 border border-primary rounded-sm">
+                <span class="text-white">Type: {orientation.type}</span>
+                <span class="text-white">Angle: {orientation.angle}</span>
+            </div>
+        </div>
+    );
+});
+`;

website/src/docs/orientation/demo.tsx

@@ -0,0 +1,20 @@
+import { component$ } from "@builder.io/qwik";
+import { useOrientation } from "@ditadi/qwik-hooks";
+
+export default component$(() => {
+    const { value: orientation } = useOrientation();
+
+    return (
+        <div class="flex flex-col bg-background w-full items-center p-10 gap-5">
+            <h1 class="text-white">useOrientation</h1>
+
+            <div
+                class={`w-[200px] rotate-${orientation.angle} aspect-video bg-transparent border-primary border flex justify-center p-4 flex-col`}
+            />
+            <div class="flex gap-5 bg-foreground px-4 py-2 border border-primary rounded-sm">
+                <span class="text-white">Type: {orientation.type}</span>
+                <span class="text-white">Angle: {orientation.angle}</span>
+            </div>
+        </div>
+    );
+});

website/src/docs/orientation/doc.tsx

@@ -0,0 +1,22 @@
+import type { HookDoc } from "..";
+import UseOrientationCode from "./code";
+import UseOrientationDemo from "./demo";
+
+export default {
+    key: "useorientation",
+    title: "useOrientation",
+    highlight: "Manage and respond to changes in device orientation with useOrientation.",
+    description:
+        "The useOrientation React Hook simplifies the management of a device’s orientation within a React application. It wraps the complexity of listening for, handling, and cleaning up after orientation changes into a reusable hook. By abstracting this logic, the hook allows you to easily track device orientation, resulting in cleaner and more readable code. It adapts to both the Screen Orientation API and the deprecated window.orientation property, providing flexibility across different browser capabilities.",
+    params: [],
+    return: [
+        {
+            name: "orientation",
+            type: "Signal<{ angle: number; type: string }>",
+            description:
+                "The current orientation of the device, including the angle and type of orientation.",
+        },
+    ],
+    demo: UseOrientationDemo,
+    code: UseOrientationCode,
+} as HookDoc;