diff --git a/panel/src/layout/MainRouter.tsx b/panel/src/layout/MainRouter.tsx index 20671bed8..5b6fbd8c8 100644 --- a/panel/src/layout/MainRouter.tsx +++ b/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() { diff --git a/panel/src/pages/TestingPage.tsx b/panel/src/pages/TestingPage.tsx deleted file mode 100644 index 0dcf29dfd..000000000 --- a/panel/src/pages/TestingPage.tsx +++ /dev/null @@ -1,86 +0,0 @@ -import MarkdownProse from "@/components/MarkdownProse"; -import { Button } from "@/components/ui/button"; -import { useAuth } from "@/hooks/auth"; -import { LuPersonStanding } from "react-icons/lu"; - -const testMarkdown = ` -# h1 -## h2 -### h3 -#### h4 -##### h5 -###### h6 - -**bold** -*italic* -__underline__ -~~strikethrough~~ - -list: -- item 1 -- item 2 -- item 3 - - item 3.1 - - item 3.2 - -1. item 1 -2. item 2 -3. item 3 - 1. item 3.1 - 2. item 3.2 - -> blockquote - -\`\`\`js -console.log('code block'); -\`\`\` - -[external link](https://google.com) -[internal link](/server/server-log) - -`; - -export default function TestingPage() { - const { authData, setAuthData, logout } = useAuth(); - - const doLogout = () => { - logout.mutate(); - } - - return
- 
-            {JSON.stringify(authData, null, 2)}
-
-
- {authData && ( -
- - - -
- )} -
-
- - - - - - - - - -
-
- -
; -} diff --git a/panel/src/pages/testing/TestingPage.tsx b/panel/src/pages/testing/TestingPage.tsx new file mode 100644 index 000000000..ffc63d73f --- /dev/null +++ b/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
+ + {/* */} + {/* */} + {/* */} + {/* */} +
; +} diff --git a/panel/src/pages/testing/TmpAuthState.tsx b/panel/src/pages/testing/TmpAuthState.tsx new file mode 100644 index 000000000..888fbdaa3 --- /dev/null +++ b/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 ( + + + Update State + + + 
+                    {JSON.stringify(authData, null, 2)}
+
+ + + + + + + ); +} diff --git a/panel/src/pages/testing/TmpColors.tsx b/panel/src/pages/testing/TmpColors.tsx new file mode 100644 index 000000000..82bdfda08 --- /dev/null +++ b/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 <> +
+
+
primary
+
secondary
+
muted
+
accent
+
card + border
+
destructive
+
warning
+
success
+
info
+
+
+
+ + + + + + + + + + + + +
+
+
+ +
+
+ ; +} diff --git a/panel/src/pages/testing/TmpHexHslConverter.tsx b/panel/src/pages/testing/TmpHexHslConverter.tsx new file mode 100644 index 000000000..12d155efc --- /dev/null +++ b/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) => { + const value = e.target.value; + if (value === '') { + setHex('') + } else if (value[0] === '#') { + setHex(value.slice(1)); + } else { + setHex(value); + } + } + + return ( +
+
+ +
+ e.target.select()} + /> + +
+
+
+ +
+ e.target.select()} + readOnly + /> + +
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+ ); +} diff --git a/panel/src/pages/testing/TmpMarkdown.tsx b/panel/src/pages/testing/TmpMarkdown.tsx new file mode 100644 index 000000000..0103fe148 --- /dev/null +++ b/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 ; +} diff --git a/panel/src/pages/testing/TmpTerminal.tsx b/panel/src/pages/testing/TmpTerminal.tsx new file mode 100644 index 000000000..9a2b8d768 --- /dev/null +++ b/panel/src/pages/testing/TmpTerminal.tsx @@ -0,0 +1,97 @@ +import { + Sheet, + SheetContent, + SheetTrigger, +} from "@/components/ui/sheet"; +import { Button } from "@/components/ui/button"; +import { Input } from "@/components/ui/input"; + + +/** + * v0 by Vercel. + * @see https://v0.dev/t/Co4fOMDXuIP + */ +export default function TmpTerminal() { + return ( +
+
+
+
+ + + + +

Terminal

+
+
+

{`> command 1`}

+

{`> command 2`}

+

{`> command 3`}

+
+
+ + + + + +
+

Favorited Commands

+
+

command 1

+

command 2

+

command 3

+
+
+ + +
+
+ + + + +
+
+ ) +} diff --git a/panel/src/pages/testing/TmpUpdateState.tsx b/panel/src/pages/testing/TmpUpdateState.tsx new file mode 100644 index 000000000..21e3de079 --- /dev/null +++ b/panel/src/pages/testing/TmpUpdateState.tsx @@ -0,0 +1,81 @@ +import { Button } from "@/components/ui/button"; + +import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; +import { useWarningBarData } from "@/hooks/interface"; + +export default function TmpUpdateState() { + const { + isSocketOffline, setIsSocketOffline, + txUpdateData, setTxUpdateData, + fxUpdateData, setFxUpdateData, + } = useWarningBarData(); + + return ( + + + Warning Bar States + + +
+ 
+                        {JSON.stringify(isSocketOffline, null, 2)}
+
+
+ + +
+
+ +
+ 
+                        {JSON.stringify(txUpdateData, null, 2)}
+
+
+ + + +
+
+ +
+ 
+                        {JSON.stringify(fxUpdateData, null, 2)}
+
+
+ + + +
+
+ + + ); +}