@shipfox/react-ui 0.15.0 → 0.17.0

package/src/components/dot-grid/dot-grid.tsx

@@ -1,325 +0,0 @@
-import {gsap} from 'gsap';
-import {InertiaPlugin} from 'gsap/InertiaPlugin';
-import type React from 'react';
-import {useCallback, useEffect, useMemo, useRef} from 'react';
-import {cn} from 'utils';
-
-gsap.registerPlugin(InertiaPlugin);
-
-const HEX_COLOR_REGEX = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i;
-
-const throttle = <T extends (...args: never[]) => void>(func: T, limit: number): T => {
-  let lastCall = 0;
-  return ((...args: Parameters<T>) => {
-    const now = performance.now();
-    if (now - lastCall >= limit) {
-      lastCall = now;
-      func(...args);
-    }
-  }) as T;
-};
-
-interface Dot {
-  cx: number;
-  cy: number;
-  xOffset: number;
-  yOffset: number;
-  _inertiaApplied: boolean;
-}
-
-export interface DotGridProps {
-  dotSize?: number;
-  gap?: number;
-  baseColor?: string;
-  activeColor?: string;
-  proximity?: number;
-  speedTrigger?: number;
-  shockRadius?: number;
-  shockStrength?: number;
-  maxSpeed?: number;
-  resistance?: number;
-  returnDuration?: number;
-  className?: string;
-  style?: React.CSSProperties;
-}
-
-type RgbColor = {
-  r: number;
-  g: number;
-  b: number;
-};
-
-function hexToRgb(hex: string): RgbColor {
-  const m = hex.match(HEX_COLOR_REGEX);
-  if (!m) return {r: 0, g: 0, b: 0};
-  return {
-    r: parseInt(m[1], 16),
-    g: parseInt(m[2], 16),
-    b: parseInt(m[3], 16),
-  };
-}
-
-export function DotGrid({
-  dotSize = 16,
-  gap = 32,
-  baseColor = '#5227FF',
-  activeColor = '#5227FF',
-  proximity = 150,
-  speedTrigger = 100,
-  shockRadius = 250,
-  shockStrength = 5,
-  maxSpeed = 5000,
-  resistance = 750,
-  returnDuration = 1.5,
-  className = '',
-  style,
-}: DotGridProps): React.JSX.Element {
-  const wrapperRef = useRef<HTMLDivElement>(null);
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-  const dotsRef = useRef<Dot[]>([]);
-  const pointerRef = useRef({
-    x: 0,
-    y: 0,
-    vx: 0,
-    vy: 0,
-    speed: 0,
-    lastTime: 0,
-    lastX: 0,
-    lastY: 0,
-  });
-
-  const baseRgb = useMemo(() => hexToRgb(baseColor), [baseColor]);
-  const activeRgb = useMemo(() => hexToRgb(activeColor), [activeColor]);
-
-  const colorGradient = useMemo(() => {
-    const gradient: string[] = new Array(256);
-    for (let i = 0; i < 256; i++) {
-      const normalizedSqDist = i / 255;
-      const normalizedDist = Math.sqrt(normalizedSqDist);
-      const t = 1 - normalizedDist;
-      const r = Math.round(baseRgb.r + (activeRgb.r - baseRgb.r) * t);
-      const g = Math.round(baseRgb.g + (activeRgb.g - baseRgb.g) * t);
-      const b = Math.round(baseRgb.b + (activeRgb.b - baseRgb.b) * t);
-      gradient[i] = `rgb(${r},${g},${b})`;
-    }
-    return gradient;
-  }, [baseRgb, activeRgb]);
-
-  const circlePath = useMemo(() => {
-    if (typeof window === 'undefined' || !window.Path2D) return null;
-
-    const p = new Path2D();
-    p.arc(0, 0, dotSize / 2, 0, Math.PI * 2);
-    return p;
-  }, [dotSize]);
-
-  const buildGrid = useCallback(() => {
-    const wrap = wrapperRef.current;
-    const canvas = canvasRef.current;
-    if (!wrap || !canvas) return;
-
-    const {width, height} = wrap.getBoundingClientRect();
-    const dpr = window.devicePixelRatio || 1;
-
-    canvas.width = width * dpr;
-    canvas.height = height * dpr;
-    canvas.style.width = `${width}px`;
-    canvas.style.height = `${height}px`;
-    const ctx = canvas.getContext('2d');
-    if (ctx) ctx.scale(dpr, dpr);
-
-    const cols = Math.floor((width + gap) / (dotSize + gap));
-    const rows = Math.floor((height + gap) / (dotSize + gap));
-    const cell = dotSize + gap;
-
-    const gridW = cell * cols - gap;
-    const gridH = cell * rows - gap;
-
-    const extraX = width - gridW;
-    const extraY = height - gridH;
-
-    const startX = extraX / 2 + dotSize / 2;
-    const startY = extraY / 2 + dotSize / 2;
-
-    const dots: Dot[] = [];
-    for (let y = 0; y < rows; y++) {
-      for (let x = 0; x < cols; x++) {
-        const cx = startX + x * cell;
-        const cy = startY + y * cell;
-        dots.push({cx, cy, xOffset: 0, yOffset: 0, _inertiaApplied: false});
-      }
-    }
-    dotsRef.current = dots;
-  }, [dotSize, gap]);
-
-  useEffect(() => {
-    if (!circlePath) return;
-
-    let rafId: number;
-    const proxSq = proximity * proximity;
-
-    const draw = () => {
-      const canvas = canvasRef.current;
-      if (!canvas) return;
-      const ctx = canvas.getContext('2d');
-      if (!ctx) return;
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-      const {x: px, y: py} = pointerRef.current;
-
-      for (const dot of dotsRef.current) {
-        const ox = dot.cx + dot.xOffset;
-        const oy = dot.cy + dot.yOffset;
-        const dx = dot.cx - px;
-        const dy = dot.cy - py;
-        const dsq = dx * dx + dy * dy;
-
-        let fillColor = baseColor;
-        if (dsq <= proxSq) {
-          const normalizedSqDist = dsq / proxSq;
-          const index = Math.min(255, Math.max(0, Math.round(normalizedSqDist * 255)));
-          fillColor = colorGradient[index];
-        }
-
-        ctx.save();
-        ctx.translate(ox, oy);
-        ctx.fillStyle = fillColor;
-        ctx.fill(circlePath);
-        ctx.restore();
-      }
-
-      rafId = requestAnimationFrame(draw);
-    };
-
-    draw();
-    return () => cancelAnimationFrame(rafId);
-  }, [proximity, baseColor, colorGradient, circlePath]);
-
-  useEffect(() => {
-    buildGrid();
-    let ro: ResizeObserver | null = null;
-    if ('ResizeObserver' in window) {
-      ro = new ResizeObserver(buildGrid);
-      wrapperRef.current && ro.observe(wrapperRef.current);
-    } else {
-      (window as Window).addEventListener('resize', buildGrid);
-    }
-    return () => {
-      if (ro) ro.disconnect();
-      else window.removeEventListener('resize', buildGrid);
-    };
-  }, [buildGrid]);
-
-  useEffect(() => {
-    const onMove = (e: MouseEvent) => {
-      const now = performance.now();
-      const pr = pointerRef.current;
-      const dt = pr.lastTime ? now - pr.lastTime : 16;
-      const dx = e.clientX - pr.lastX;
-      const dy = e.clientY - pr.lastY;
-      let vx = (dx / dt) * 1000;
-      let vy = (dy / dt) * 1000;
-      let speed = Math.hypot(vx, vy);
-      if (speed > maxSpeed) {
-        const scale = maxSpeed / speed;
-        vx *= scale;
-        vy *= scale;
-        speed = maxSpeed;
-      }
-      pr.lastTime = now;
-      pr.lastX = e.clientX;
-      pr.lastY = e.clientY;
-      pr.vx = vx;
-      pr.vy = vy;
-      pr.speed = speed;
-
-      const canvas = canvasRef.current;
-      if (!canvas) return;
-      const rect = canvas.getBoundingClientRect();
-      pr.x = e.clientX - rect.left;
-      pr.y = e.clientY - rect.top;
-
-      for (const dot of dotsRef.current) {
-        const dist = Math.hypot(dot.cx - pr.x, dot.cy - pr.y);
-        if (speed > speedTrigger && dist < proximity && !dot._inertiaApplied) {
-          dot._inertiaApplied = true;
-          gsap.killTweensOf(dot);
-          const pushX = dot.cx - pr.x + vx * 0.005;
-          const pushY = dot.cy - pr.y + vy * 0.005;
-          gsap.to(dot, {
-            inertia: {xOffset: pushX, yOffset: pushY, resistance},
-            onComplete: () => {
-              gsap.to(dot, {
-                xOffset: 0,
-                yOffset: 0,
-                duration: returnDuration,
-                ease: 'elastic.out(1,0.75)',
-              });
-              dot._inertiaApplied = false;
-            },
-          });
-        }
-      }
-    };
-
-    const onClick = (e: MouseEvent) => {
-      const canvas = canvasRef.current;
-      if (!canvas) return;
-      const rect = canvas.getBoundingClientRect();
-      const cx = e.clientX - rect.left;
-      const cy = e.clientY - rect.top;
-      for (const dot of dotsRef.current) {
-        const dist = Math.hypot(dot.cx - cx, dot.cy - cy);
-        if (dist < shockRadius && !dot._inertiaApplied) {
-          dot._inertiaApplied = true;
-          gsap.killTweensOf(dot);
-          const falloff = Math.max(0, 1 - dist / shockRadius);
-          const pushX = (dot.cx - cx) * shockStrength * falloff;
-          const pushY = (dot.cy - cy) * shockStrength * falloff;
-          gsap.to(dot, {
-            inertia: {xOffset: pushX, yOffset: pushY, resistance},
-            onComplete: () => {
-              gsap.to(dot, {
-                xOffset: 0,
-                yOffset: 0,
-                duration: returnDuration,
-                ease: 'elastic.out(1,0.75)',
-              });
-              dot._inertiaApplied = false;
-            },
-          });
-        }
-      }
-    };
-
-    const throttledMove = throttle(onMove, 50) as (e: MouseEvent) => void;
-    const wrapper = wrapperRef.current;
-    if (wrapper) {
-      wrapper.addEventListener('mousemove', throttledMove, {passive: true});
-      wrapper.addEventListener('click', onClick);
-    }
-    return () => {
-      if (wrapper) {
-        wrapper.removeEventListener('mousemove', throttledMove);
-        wrapper.removeEventListener('click', onClick);
-      }
-    };
-  }, [maxSpeed, speedTrigger, proximity, resistance, returnDuration, shockRadius, shockStrength]);
-
-  return (
-    <section
-      className={cn('p-4 flex items-center justify-center h-full w-full relative', className)}
-      style={style}
-      role="presentation"
-    >
-      <div ref={wrapperRef} className="w-full h-full relative">
-        {/** biome-ignore lint/a11y/noAriaHiddenOnFocusable: <canvas is not focusable> */}
-        <canvas
-          ref={canvasRef}
-          className="absolute inset-0 w-full h-full pointer-events-none"
-          aria-hidden="true"
-        />
-      </div>
-    </section>
-  );
-}

package/src/components/dot-grid/index.ts

@@ -1 +0,0 @@
-export * from './dot-grid';

package/src/components/dropdown-menu/dropdown-menu.stories.tsx

@@ -1,384 +0,0 @@
-import {argosScreenshot} from '@argos-ci/storybook/vitest';
-import type {Meta, StoryObj} from '@storybook/react';
-import {screen, within} from '@testing-library/react';
-import type {UserEvent} from '@testing-library/user-event';
-import userEvent from '@testing-library/user-event';
-import {useState} from 'react';
-import {Avatar} from '../avatar';
-import {Button} from '../button';
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from './dropdown-menu';
-
-const OPEN_MENU_REGEX = /open menu/i;
-const ACTIONS_REGEX = /actions/i;
-const ORGANIZATION_REGEX = /organization/i;
-const COMPLETE_MENU_REGEX = /complete menu/i;
-const SWITCH_ORGANIZATION_REGEX = /switch organization/i;
-
-const isTestEnvironment = () => typeof navigator !== 'undefined' && navigator.webdriver === true;
-
-type StoryContext = Parameters<NonNullable<Story['play']>>[0];
-type AdditionalStepsCallback = (ctx: StoryContext, user: UserEvent) => Promise<void>;
-
-async function openMenuAndScreenshot(
-  ctx: StoryContext,
-  triggerRegex: RegExp,
-  screenshotName: string,
-  additionalSteps?: AdditionalStepsCallback,
-): Promise<void> {
-  const {canvasElement, step} = ctx;
-  const canvas = within(canvasElement);
-  const user = userEvent.setup();
-
-  let triggerButton: HTMLElement | null = null;
-
-  await step('Open the dropdown menu', async () => {
-    triggerButton = canvas.getByRole('button', {name: triggerRegex});
-    await user.click(triggerButton);
-  });
-
-  await step('Wait for menu to appear and render', async () => {
-    await screen.findByRole('menu');
-    await new Promise((resolve) => setTimeout(resolve, 300));
-
-    if (isTestEnvironment() && triggerButton instanceof HTMLElement) {
-      triggerButton.style.display = 'none';
-    }
-    await new Promise((resolve) => setTimeout(resolve, 100));
-  });
-
-  await argosScreenshot(ctx, screenshotName);
-
-  if (additionalSteps) {
-    await additionalSteps(ctx, user);
-  }
-}
-
-const meta = {
-  title: 'Components/DropdownMenu',
-  component: DropdownMenuContent,
-  subcomponents: {
-    DropdownMenu,
-    DropdownMenuTrigger,
-    DropdownMenuItem,
-    DropdownMenuCheckboxItem,
-    DropdownMenuRadioGroup,
-    DropdownMenuRadioItem,
-    DropdownMenuLabel,
-    DropdownMenuSeparator,
-    DropdownMenuGroup,
-    DropdownMenuSub,
-    DropdownMenuSubTrigger,
-    DropdownMenuSubContent,
-  },
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    side: {
-      control: 'select',
-      options: ['top', 'right', 'bottom', 'left'],
-      description: 'The preferred side of the trigger to render against',
-      table: {defaultValue: {summary: 'bottom'}},
-    },
-    align: {
-      control: 'select',
-      options: ['start', 'center', 'end'],
-      description: 'The preferred alignment against the trigger',
-      table: {defaultValue: {summary: 'start'}},
-    },
-    sideOffset: {
-      control: {type: 'number', min: 0, max: 20, step: 1},
-      description: 'Distance in pixels from the trigger',
-      table: {defaultValue: {summary: '4'}},
-    },
-    alignOffset: {
-      control: {type: 'number', min: -20, max: 20, step: 1},
-      description: 'Offset in pixels from the alignment edge',
-      table: {defaultValue: {summary: '0'}},
-    },
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg'],
-      description: 'Size variant of the dropdown content',
-      table: {defaultValue: {summary: 'md'}},
-    },
-  },
-  args: {
-    side: 'bottom',
-    align: 'center',
-    sideOffset: 8,
-    alignOffset: 0,
-    size: 'md',
-  },
-} satisfies Meta<typeof DropdownMenuContent>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  play: (ctx) => openMenuAndScreenshot(ctx, OPEN_MENU_REGEX, 'DropdownMenu Default Open'),
-  render: function DefaultStory(args) {
-    const [container, setContainer] = useState<HTMLDivElement | null>(null);
-
-    return (
-      <div
-        ref={setContainer}
-        className="relative flex h-500 w-500 items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip overflow-visible"
-      >
-        {container && (
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="secondary">Open Menu</Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent {...args} container={container} side="bottom" align="center">
-              <DropdownMenuItem icon="editLine">Edit</DropdownMenuItem>
-              <DropdownMenuItem icon="addLine">Add</DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem icon="deleteBinLine">Delete</DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        )}
-      </div>
-    );
-  },
-};
-
-export const WithShortcuts: Story = {
-  play: (ctx) => openMenuAndScreenshot(ctx, ACTIONS_REGEX, 'DropdownMenu With Shortcuts Open'),
-  render: function WithShortcutsStory(args) {
-    const [container, setContainer] = useState<HTMLDivElement | null>(null);
-
-    return (
-      <div
-        ref={setContainer}
-        className="relative flex h-500 w-500 items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip overflow-visible"
-      >
-        {container && (
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="secondary">Actions</Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent {...args} container={container} side="bottom" align="center">
-              <DropdownMenuItem icon="fileCopyLine" shortcut="⌘C">
-                Copy
-              </DropdownMenuItem>
-              <DropdownMenuItem icon="clipboardLine" shortcut="⌘V">
-                Paste
-              </DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem icon="deleteBinLine" shortcut="⌘⌫">
-                Delete
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        )}
-      </div>
-    );
-  },
-};
-
-function UserProfileSection() {
-  return (
-    <div className="flex items-center gap-8 px-8 py-6">
-      <Avatar
-        size="sm"
-        content="image"
-        src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=faces"
-        fallback="John Doe"
-      />
-      <div className="flex flex-col">
-        <span className="text-sm font-medium leading-20 text-foreground-neutral-base">
-          John Doe
-        </span>
-        <span className="text-xs leading-16 text-foreground-neutral-muted">john@example.com</span>
-      </div>
-    </div>
-  );
-}
-
-function OrganizationItem() {
-  return (
-    <div className="flex items-center gap-8 px-8 py-6">
-      <Avatar size="3xs" content="logo" logoName="stripe" radius="rounded" />
-      <span className="text-sm leading-20 text-foreground-neutral-subtle">
-        Stripe&apos;s organization
-      </span>
-    </div>
-  );
-}
-
-export const OrganizationMenu: Story = {
-  args: {
-    size: 'md',
-  },
-  play: (ctx) =>
-    openMenuAndScreenshot(
-      ctx,
-      ORGANIZATION_REGEX,
-      'DropdownMenu Organization Menu Open',
-      async ({step}, user) => {
-        await step('Hover over submenu trigger', async () => {
-          const submenuTrigger = screen.getByRole('menuitem', {name: SWITCH_ORGANIZATION_REGEX});
-          await user.hover(submenuTrigger);
-          await new Promise((resolve) => setTimeout(resolve, 200));
-        });
-
-        await argosScreenshot(ctx, 'DropdownMenu Organization Menu Submenu Open');
-      },
-    ),
-  render: function OrganizationMenuStory(args) {
-    const [container, setContainer] = useState<HTMLDivElement | null>(null);
-
-    return (
-      <div
-        ref={setContainer}
-        className="relative flex h-600 w-600 items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip overflow-visible"
-      >
-        {container && (
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="secondary" iconLeft="buildingLine">
-                Organization
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent {...args} container={container} side="bottom" align="start">
-              <OrganizationItem />
-              <DropdownMenuSeparator />
-              <DropdownMenuItem icon="settings3Line">Settings</DropdownMenuItem>
-              <DropdownMenuSub>
-                <DropdownMenuSubTrigger icon="arrowLeftRightLine">
-                  Switch organization
-                </DropdownMenuSubTrigger>
-                <DropdownMenuSubContent>
-                  <DropdownMenuItem
-                    icon="shipfox"
-                    iconStyle="text-foreground-neutral-base"
-                    className="text-foreground-neutral-base"
-                  >
-                    Shipfox
-                  </DropdownMenuItem>
-                  <DropdownMenuItem
-                    icon="github"
-                    iconStyle="text-foreground-neutral-base"
-                    className="text-foreground-neutral-base"
-                  >
-                    Github
-                  </DropdownMenuItem>
-                  <DropdownMenuItem
-                    icon="google"
-                    iconStyle="text-foreground-neutral-base"
-                    className="text-foreground-neutral-base"
-                  >
-                    Google
-                  </DropdownMenuItem>
-                </DropdownMenuSubContent>
-              </DropdownMenuSub>
-              <DropdownMenuItem icon="addLine">New organization</DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        )}
-      </div>
-    );
-  },
-};
-
-export const CompleteExample: Story = {
-  args: {
-    size: 'lg',
-    side: 'bottom',
-  },
-  play: (ctx) =>
-    openMenuAndScreenshot(ctx, COMPLETE_MENU_REGEX, 'DropdownMenu Complete Example Open'),
-  render: function CompleteExampleStory(args) {
-    const [container, setContainer] = useState<HTMLDivElement | null>(null);
-    const [showNotifications, setShowNotifications] = useState(true);
-    const [showBadges, setShowBadges] = useState(false);
-    const [theme, setTheme] = useState('dark');
-
-    return (
-      <div
-        ref={setContainer}
-        className="relative flex h-600 w-500 items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip overflow-visible"
-      >
-        {container && (
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="secondary" iconLeft="menu3Line">
-                Complete Menu
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent
-              {...args}
-              className="w-260"
-              container={container}
-              side="bottom"
-              align="start"
-            >
-              <UserProfileSection />
-              <DropdownMenuSeparator />
-
-              <DropdownMenuLabel>Actions</DropdownMenuLabel>
-              <DropdownMenuGroup>
-                <DropdownMenuItem icon="sparklingLine">Getting started</DropdownMenuItem>
-                <DropdownMenuItem icon="userLine">Profile settings</DropdownMenuItem>
-              </DropdownMenuGroup>
-
-              <DropdownMenuSeparator />
-
-              <DropdownMenuLabel>Preferences</DropdownMenuLabel>
-              <DropdownMenuGroup>
-                <DropdownMenuCheckboxItem
-                  checked={showNotifications}
-                  onCheckedChange={setShowNotifications}
-                  closeOnSelect={false}
-                >
-                  Show notifications
-                </DropdownMenuCheckboxItem>
-                <DropdownMenuCheckboxItem
-                  checked={showBadges}
-                  onCheckedChange={setShowBadges}
-                  closeOnSelect={false}
-                >
-                  Show badges
-                </DropdownMenuCheckboxItem>
-              </DropdownMenuGroup>
-
-              <DropdownMenuSeparator />
-
-              <DropdownMenuLabel>Theme</DropdownMenuLabel>
-              <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>
-                <DropdownMenuRadioItem value="light" closeOnSelect={false}>
-                  Light
-                </DropdownMenuRadioItem>
-                <DropdownMenuRadioItem value="dark" closeOnSelect={false}>
-                  Dark
-                </DropdownMenuRadioItem>
-                <DropdownMenuRadioItem value="system" closeOnSelect={false}>
-                  System
-                </DropdownMenuRadioItem>
-              </DropdownMenuRadioGroup>
-
-              <DropdownMenuSeparator />
-              <DropdownMenuItem icon="logoutCircleLine">Log out</DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        )}
-      </div>
-    );
-  },
-};