wip: moved testing page

panel/src/layout/MainRouter.tsx

@@ -6,7 +6,7 @@ import { contentRefreshKeyAtom, pageErrorStatusAtom } from "../hooks/mainPageSta
 
 import Iframe from "../pages/Iframe"
 import NotFound from "../pages/NotFound"
-import TestingPage from "../pages/TestingPage";
+import TestingPage from "../pages/testing/TestingPage";
 
 
 export default function MainRouter() {

panel/src/pages/testing/TestingPage.tsx

@@ -0,0 +1,18 @@
+
+
+import TmpAuthState from "./TmpAuthState";
+import TmpColors from "./TmpColors";
+import TmpMarkdown from "./TmpMarkdown";
+import TmpTerminal from "./TmpTerminal";
+import TmpUpdateState from "./TmpUpdateState";
+
+
+export default function TestingPage() {
+    return <div className="flex flex-col gap-4 w-full m-4">
+        <TmpUpdateState />
+        {/* <TmpAuthState /> */}
+        {/* <TmpTerminal /> */}
+        {/* <TmpMarkdown /> */}
+        {/* <TmpColors /> */}
+    </div>;
+}

panel/src/pages/testing/TmpAuthState.tsx

@@ -0,0 +1,37 @@
+import { Button } from "@/components/ui/button";
+
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import { useAuth } from "@/hooks/auth";
+
+export default function TmpAuthState() {
+    const { authData, setAuthData, logout } = useAuth();
+
+    const toggleIsMaster = () => {
+        if(!authData) return;
+        setAuthData({
+            ...authData,
+            isMaster: !authData.isMaster,
+        })
+    }
+
+    return (
+        <Card className="w-min">
+            <CardHeader>
+                <CardTitle>Update State</CardTitle>
+            </CardHeader>
+            <CardContent>
+                <pre className="bg-muted p-2">
+                    {JSON.stringify(authData, null, 2)}
+                </pre>
+            </CardContent>
+            <CardFooter className="flex justify-center gap-3">
+                <Button size="sm" onClick={() => toggleIsMaster()}>
+                    Toggle isMaster
+                </Button>
+                <Button size="sm" onClick={() => setAuthData(false)}>
+                    Erase Auth
+                </Button>
+            </CardFooter>
+        </Card>
+    );
+}

panel/src/pages/testing/TmpColors.tsx

@@ -0,0 +1,40 @@
+import { Button } from "@/components/ui/button";
+import { PersonStandingIcon } from "lucide-react";
+import TmpHexHslConverter from "./tmpHexHslConverter";
+
+export default function TmpColors() {
+    return <>
+        <div className="mx-4 flex space-x-4">
+            <div className="space-y-2 w-48">
+                <div className="w-full p-1 bg-primary text-primary-foreground">primary</div>
+                <div className="w-full p-1 bg-secondary text-secondary-foreground">secondary</div>
+                <div className="w-full p-1 bg-muted text-muted-foreground">muted</div>
+                <div className="w-full p-1 bg-accent text-accent-foreground">accent</div>
+                <div className="w-full p-1 bg-card text-card-foreground border">card + border</div>
+                <div className="w-full p-1 bg-destructive text-destructive-foreground">destructive</div>
+                <div className="w-full p-1 bg-warning text-warning-foreground">warning</div>
+                <div className="w-full p-1 bg-success text-success-foreground">success</div>
+                <div className="w-full p-1 bg-info text-info-foreground">info</div>
+            </div>
+            <div className="border-l-2 border-border"></div>
+            <div className="space-y-2 flex flex-col items-center">
+                <Button size="sm" variant="default">default</Button>
+                <Button size="sm" variant="secondary">secondary</Button>
+                <Button size="sm" variant="destructive">destructive</Button>
+                <Button size="sm" variant="warning">warning</Button>
+                <Button size="sm" variant="success">success</Button>
+                <Button size="sm" variant="info">info</Button>
+                <Button size="sm" variant="outline">outline</Button>
+                <Button size="sm" variant="ghost">ghost</Button>
+                <Button size="sm" variant="link">link</Button>
+                <Button size="sm"><PersonStandingIcon /> icon</Button>
+                <Button size="sm" disabled>disabled</Button>
+                <Button size="icon" variant="outline"><PersonStandingIcon /></Button>
+            </div>
+            <div className="border-l-2 border-border"></div>
+            <div>
+                <TmpHexHslConverter />
+            </div>
+        </div>
+    </>;
+}

panel/src/pages/testing/TmpHexHslConverter.tsx

@@ -0,0 +1,107 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { useState } from "react";
+
+export default function TmpHexHslConverter() {
+    const [hex, setHex] = useState('000000');
+
+    //convert rgb to hsl
+    const rgbToHsl = (r: number, g: number, b: number) => {
+        r /= 255;
+        g /= 255;
+        b /= 255;
+        const l = Math.max(r, g, b);
+        const s = l - Math.min(r, g, b);
+        const h = s
+            ? l === r
+                ? (g - b) / s
+                : l === g
+                    ? 2 + (b - r) / s
+                    : 4 + (r - g) / s
+            : 0;
+
+        const hFinal = 60 * h < 0 ? 60 * h + 360 : 60 * h;
+        const sFinal = 100 * (s ? (l <= 0.5 ? s / (2 * l - s) : s / (2 - (2 * l - s))) : 0);
+        const lFinal = (100 * (2 * l - s)) / 2;
+        return `${hFinal.toFixed(1)} ${sFinal.toFixed(1)}% ${lFinal.toFixed(1)}%`;
+    }
+
+    const hexToHsl = (hex: string) => {
+        //convert hex to rgb
+        const r = parseInt(hex.slice(0, 2), 16);
+        const g = parseInt(hex.slice(2, 4), 16);
+        const b = parseInt(hex.slice(4, 6), 16);
+
+        //convert rgb to hsl
+        const hsl = rgbToHsl(r, g, b).replace(/\.00?/g, '');
+
+        return hsl;
+    }
+
+    //remove the # prefix if it exists
+    const inputOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
+        if (value === '') {
+            setHex('')
+        } else if (value[0] === '#') {
+            setHex(value.slice(1));
+        } else {
+            setHex(value);
+        }
+    }
+
+    return (
+        <div className="flex flex-col gap-2 max-w-xs">
+            <div>
+                <label htmlFor="hex-input">Hex Color:</label>
+                <div className="flex flex-row justify-start gap-2">
+                    <Input
+                        id="hex-input"
+                        type="text"
+                        value={hex}
+                        placeholder="000000"
+                        onChange={inputOnChange}
+                        onFocus={(e) => e.target.select()}
+                    />
+                    <Button
+                        onClick={() => setHex('')}
+                        variant="outline"
+                    >
+                        Clear
+                    </Button>
+                </div>
+            </div>
+            <div>
+                <label htmlFor="hsl-output">HSL Color:</label>
+                <div className="flex flex-row justify-start gap-2">
+                    <Input
+                        id="hex-output"
+                        type="text"
+                        value={hexToHsl(hex)}
+                        onFocus={(e) => e.target.select()}
+                        readOnly
+                    />
+                    <Button
+                        onClick={() => navigator.clipboard.writeText(hexToHsl(hex))}
+                        variant="outline"
+                    >
+                        Copy
+                    </Button>
+                </div>
+            </div>
+            <div>
+                <label htmlFor="hsl-output">Sanity Check:</label>
+                <div className="flex flex-row justify-start gap-0">
+                    <div className="w-20 h-10" style={{ backgroundColor: `#${hex}` }}></div>
+                    <div className="w-20 h-10" style={{ backgroundColor: `hsl(${hexToHsl(hex)})` }}></div>
+                    <div className="w-20 h-10" style={{ backgroundColor: `#${hex}` }}></div>
+                    <div className="w-20 h-10" style={{ backgroundColor: `hsl(${hexToHsl(hex)})` }}></div>
+                    <div className="w-20 h-10" style={{ backgroundColor: `#${hex}` }}></div>
+                    <div className="w-20 h-10" style={{ backgroundColor: `hsl(${hexToHsl(hex)})` }}></div>
+                    <div className="w-20 h-10" style={{ backgroundColor: `#${hex}` }}></div>
+                    <div className="w-20 h-10" style={{ backgroundColor: `hsl(${hexToHsl(hex)})` }}></div>
+                </div>
+            </div>
+        </div>
+    );
+}

panel/src/pages/testing/TmpMarkdown.tsx

@@ -0,0 +1,29 @@
+import MarkdownProse from "@/components/MarkdownProse";
+
+const testMarkdown = `
+# h1
+## h2
+### h3
+
+**bold** *italic* __underline__ ~~strikethrough~~
+
+list:
+- item 1
+- item 2
+- item 3
+    - item 3.1
+    - item 3.2
+
+> blockquote
+
+\`\`\`js
+console.log('code block');
+\`\`\`
+
+[external link](https://google.com)
+[internal link](/server/server-log)
+`;
+
+export default function TmpMarkdown() {
+    return <MarkdownProse md={testMarkdown} />;
+}