add web demo

2023-10-23 09:02:56 +08:00
parent dbb5b1bdfb
commit bab0cf49a1
29 changed files with 6440 additions and 535 deletions
--- a/apps/web/ui/menu.tsx
+++ b/apps/web/ui/menu.tsx
@@ -0,0 +1,98 @@
+"use client";
+
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+} from "@/ui/primitives/popover";
+// import { useContext } from "react";
+// import { AppContext } from "../app/providers";
+// import { FontDefault, FontSerif, FontMono } from "@/ui/icons";
+import { Check, Menu as MenuIcon, Monitor, Moon, SunDim } from "lucide-react";
+import { useTheme } from "next-themes";
+
+// const fonts = [
+//   {
+//     font: "Default",
+//     icon: <FontDefault className="h-4 w-4" />,
+//   },
+//   {
+//     font: "Serif",
+//     icon: <FontSerif className="h-4 w-4" />,
+//   },
+//   {
+//     font: "Mono",
+//     icon: <FontMono className="h-4 w-4" />,
+//   },
+// ];
+const appearances = [
+  {
+    theme: "System",
+    icon: <Monitor className="h-4 w-4" />,
+  },
+  {
+    theme: "Light",
+    icon: <SunDim className="h-4 w-4" />,
+  },
+  {
+    theme: "Dark",
+    icon: <Moon className="h-4 w-4" />,
+  },
+];
+
+export default function Menu() {
+  // const { font: currentFont, setFont } = useContext(AppContext);
+  const { theme: currentTheme, setTheme } = useTheme();
+
+  return (
+    <Popover>
+      <PopoverTrigger className="absolute bottom-5 right-5 z-10 flex h-8 w-8 items-center justify-center rounded-lg transition-colors duration-200 hover:bg-stone-100 active:bg-stone-200 sm:bottom-auto sm:top-5">
+        <MenuIcon className="text-stone-600" width={16} />
+      </PopoverTrigger>
+      <PopoverContent className="w-52 divide-y divide-stone-200" align="end">
+        {/* <div className="p-2">
+          <p className="p-2 text-xs font-medium text-stone-500">Font</p>
+          {fonts.map(({ font, icon }) => (
+            <button
+              key={font}
+              className="flex w-full items-center justify-between rounded px-2 py-1 text-sm text-stone-600 hover:bg-stone-100"
+              onClick={() => {
+                setFont(font);
+              }}
+            >
+              <div className="flex items-center space-x-2">
+                <div className="rounded-sm border border-stone-200 p-1">
+                  {icon}
+                </div>
+                <span>{font}</span>
+              </div>
+              {currentFont === font && <Check className="h-4 w-4" />}
+            </button>
+          ))}
+        </div> */}
+        <div className="p-2">
+          <p className="p-2 text-xs font-medium text-stone-500">Appearance</p>
+          {appearances.map(({ theme, icon }) => (
+            <button
+              key={theme}
+              className="flex w-full items-center justify-between rounded px-2 py-1.5 text-sm text-stone-600 hover:bg-stone-100"
+              onClick={() => {
+                setTheme(theme.toLowerCase());
+              }}
+            >
+              <div className="flex items-center space-x-2">
+                <div className="rounded-sm border border-stone-200 p-1">
+                  {icon}
+                </div>
+                <span>{theme}</span>
+              </div>
+              {currentTheme === theme.toLowerCase() && (
+                <Check className="h-4 w-4" />
+              )}
+            </button>
+          ))}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}