Add 98.css

packages/webapp/src/routes/__root.tsx

@@ -3,6 +3,7 @@ import { TanStackRouterDevtools } from "@tanstack/react-router-devtools"
 import { useTranslation } from "react-i18next"
 import { DiGit } from "react-icons/di"
 import { FaCode } from "react-icons/fa"
+import root from "react-shadow"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent } from "@/components/ui/card"
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
@@ -16,6 +17,24 @@ function RootComponent() {
     const { t, i18n } = useTranslation()
 
     return <>
+        <root.div>
+            <link rel="stylesheet" href="/98.css/dist/98.css" />
+
+            <div className="window" style={{ width: 300 }}>
+                <div className="title-bar">
+                    <div className="title-bar-text">A Window With Stuff In It</div>
+                    <div className="title-bar-controls">
+                        <button aria-label="Minimize"></button>
+                        <button aria-label="Maximize"></button>
+                        <button aria-label="Close"></button>
+                    </div>
+                </div>
+                <div className="window-body">
+                    <p>There's so much room for activities!</p>
+                </div>
+            </div>
+        </root.div>
+
         <div className="container mt-10 mr-auto ml-auto flex flex-row items-center justify-center gap-20">
             <div className="flex flex-row items-center justify-center gap-2">
                 <TooltipProvider>