feat: 🚀 增加settings页面和修改menu组件

package.json

@@ -33,7 +33,9 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-scroll-area": "^1.1.0",
+    "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "framer-motion": "10.17.9",

src/app/edit/(main)/(router)/plugins/page.tsx

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+
+const Plugins: FC = () => {
+  return <div className="p-4 h-full">Plugins</div>;
+};
+
+export default Plugins;

src/app/edit/(main)/(router)/settings/page.tsx

@@ -0,0 +1,124 @@
+import { FC, ReactNode } from 'react';
+import { PiWarningCircleBold, PiCodeThin } from 'react-icons/pi';
+import { VscPreview } from 'react-icons/vsc';
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { Menu, MenuItem } from '@/components/menu';
+
+const Settings: FC = () => {
+  const titleStyle = 'my-2 font-bold';
+
+  return (
+    <div className="p-4 h-full">
+      <div>Settings</div>
+      <div>
+        <div className={titleStyle}>WEBCONTAINERS</div>
+        <div className="flex items-center text-sm text-gray-400 my-1">
+          <span className="mr-2">Compile trigger</span>
+          <TooltipProvider delayDuration={500}>
+            <Tooltip>
+              <TooltipTrigger>
+                <PiWarningCircleBold />
+              </TooltipTrigger>
+              <TooltipContent className="bg-gray-800 text-white" side={'right'}>
+                <p>Controls when edited files are synced tothe WebContainers filesystem.</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+        <CompileSelector />
+      </div>
+      <div>
+        <div className={titleStyle}>EDITOR SETTINGS</div>
+        <EditorSettings />
+      </div>
+    </div>
+  );
+};
+
+const CompileSelector: FC = () => {
+  const selectOptions = [
+    {
+      text: 'Edit(auto)',
+      id: 0,
+    },
+    {
+      text: 'Save',
+      id: 1,
+    },
+    {
+      text: 'KeyStroke',
+      id: 2,
+    },
+  ];
+
+  return (
+    <Select defaultValue="Edit(auto)">
+      <SelectTrigger className="w-[180px]">
+        <SelectValue placeholder="Theme" />
+      </SelectTrigger>
+      <SelectContent>
+        {selectOptions.map((option) => (
+          <SelectItem value={option.text} key={option.id}>
+            {option.text}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+};
+
+const EditorSettings: FC = () => {
+  interface settingOption {
+    text: string;
+    id: number;
+    icon: ReactNode;
+  }
+
+  const editorSettingOptions: Array<settingOption> = [
+    {
+      text: 'User settings',
+      id: 0,
+      icon: <VscPreview />,
+    },
+    {
+      text: 'Workspace settings',
+      id: 1,
+      icon: <VscPreview />,
+    },
+    {
+      text: 'User snippets',
+      id: 2,
+      icon: <PiCodeThin />,
+    },
+    {
+      text: 'Workspace snippets',
+      id: 3,
+      icon: <PiCodeThin />,
+    },
+  ];
+
+  return (
+    <div>
+      <Menu>
+        {editorSettingOptions.map((option) => (
+          <MenuItem>
+            <div className="flex items-center">
+              <span className="mx-2">{option.icon}</span>
+              <span> {option.text}</span>
+            </div>
+          </MenuItem>
+        ))}
+      </Menu>
+    </div>
+  );
+};
+
+export default Settings;

src/components/avatarPopover/index.tsx

@@ -11,7 +11,7 @@ import {
 } from 'react-icons/ai';
 
 import { Avatar } from '@/components/common/Avatar';
-import { Menu, MenuItem } from '@/components/avatarPopover/menu';
+import { Menu, MenuItem } from '@/components/menu';
 
 const AvatarPopoverContent: FC = () => {
   const menuItemTwStyle = `flex items-center`;
@@ -24,7 +24,7 @@ const AvatarPopoverContent: FC = () => {
       <Avatar className="bg-slate-700 w-20 h-20 mt-5"></Avatar>
       <span className="mt-5 text-white select-none">Your Name</span>
       <span className="text-xs text-gray-200 select-none mb-5">Your Account</span>
-      <Menu>
+      <Menu topLine>
         <MenuItem className={menuItemTwStyle} onClick={testHandle}>
           <AiOutlineHome className="mx-2" />
           Your dashboard
@@ -42,7 +42,7 @@ const AvatarPopoverContent: FC = () => {
           Local projects
         </MenuItem>
       </Menu>
-      <Menu>
+      <Menu topLine>
         <MenuItem className={menuItemTwStyle}>
           <AiOutlinePoweroff className="mx-2" />
           Sign out

src/components/ui/select/index.tsx

@@ -7,7 +7,9 @@ import { Check, ChevronDown, ChevronUp } from 'lucide-react';
 import { cn } from '@/utils';
 
 const Select = SelectPrimitive.Root;
+
 const SelectGroup = SelectPrimitive.Group;
+
 const SelectValue = SelectPrimitive.Value;
 
 const SelectTrigger = React.forwardRef<

src/components/ui/tooltip/index.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import * as React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+
+import { cn } from '@/utils';
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      'z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      className,
+    )}
+    {...props}
+  />
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };