feat: structure

src/components/menu/index.tsx

@@ -0,0 +1,56 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import { DropdownMenu as RMenu } from 'radix-ui';
+
+export const Menu = RMenu.Root;
+export const MenuTrigger = RMenu.Trigger;
+
+export const MenuContent = ({
+  children,
+  ...props
+}: ComponentPropsWithoutRef<typeof RMenu.Content>) => (
+  <RMenu.Portal>
+    <RMenu.Content className="modern-sk-menu" sideOffset={6} {...props}>
+      {children}
+    </RMenu.Content>
+  </RMenu.Portal>
+);
+
+export const MenuItem = ({
+  icon,
+  shortcut,
+  children,
+  ...props
+}: ComponentPropsWithoutRef<typeof RMenu.Item> & {
+  icon?: ReactNode;
+  shortcut?: string;
+}) => (
+  <RMenu.Item className="modern-sk-menu-item" {...props}>
+    {icon && <span className="ph">{icon}</span>}
+    {children}
+    {shortcut && <span className="sc">{shortcut}</span>}
+  </RMenu.Item>
+);
+
+export const MenuSeparator = () => (
+  <RMenu.Separator className="modern-sk-menu-sep" />
+);
+
+export const MenuSurface = ({ children }: { children: ReactNode }) => (
+  <div className="modern-sk-menu">{children}</div>
+);
+
+export const MenuRow = ({
+  icon,
+  shortcut,
+  children,
+}: {
+  icon?: ReactNode;
+  shortcut?: string;
+  children: ReactNode;
+}) => (
+  <div className="modern-sk-menu-item">
+    {icon && <span className="ph">{icon}</span>}
+    {children}
+    {shortcut && <span className="sc">{shortcut}</span>}
+  </div>
+);