@alfakit/react 0.0.0-stage → 0.1.1

package/src/components/panel/shortcuts-overlay.tsx

@@ -0,0 +1,238 @@
+import type { ShortcutListGroup, ShortcutListItem } from '@alfakit/core'
+import {
+  bindingFromEvent,
+  flattenActionGroup,
+  saveShortcutOverrides,
+  shortcutOverlayGroups,
+  shortcuts,
+} from '@alfakit/core'
+import { useEffect, useState, useSyncExternalStore } from 'react'
+import { usePageSchema, useT } from '../../context'
+import { Button } from '../ui/button'
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../ui/dialog'
+import { ShortcutKeys } from './shortcut-keys'
+
+const subscribe = (listener: () => void) => shortcuts.subscribe(listener)
+const version = () => shortcuts.getVersion()
+
+/**
+ * The `?` overlay: every shortcut available on the page, grouped; users may change their
+ * keys (stored on the server). `KeyboardShortcuts` loads it the first time it opens.
+ */
+export function ShortcutsOverlay({
+  open,
+  onOpenChange,
+  customizable,
+  endpoint,
+}: {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  customizable: boolean
+  endpoint?: string
+}) {
+  const t = useT()
+  const page = usePageSchema()
+  useSyncExternalStore(subscribe, version, version)
+  const [recording, setRecording] = useState<string | null>(null)
+  const [message, setMessage] = useState('')
+
+  const groups = shortcutOverlayGroups(
+    shortcuts.list(),
+    flattenActionGroup(page?.headerActions ?? []),
+  )
+
+  const save = async (id: string, keys: string[] | null) => {
+    if (!endpoint) return
+
+    try {
+      shortcuts.setOverrides(await saveShortcutOverrides(endpoint, { [id]: keys }))
+      setMessage(t('shortcuts.saved', {}, 'Shortcut saved.'))
+    } catch {
+      setMessage(t('shortcuts.save_failed', {}, 'The shortcut could not be saved.'))
+    }
+  }
+
+  // While recording, the next key press is the new binding (Escape cancels). Listening in the
+  // capture phase keeps the key from closing the dialog or running another shortcut.
+  useEffect(() => {
+    if (!recording) return
+
+    shortcuts.setPaused(true)
+
+    const listener = (event: KeyboardEvent) => {
+      event.preventDefault()
+      event.stopPropagation()
+
+      if (event.key === 'Escape') {
+        setRecording(null)
+        setMessage(t('shortcuts.cancelled', {}, 'Change cancelled.'))
+
+        return
+      }
+
+      const binding = bindingFromEvent(event)
+
+      if (!binding) return
+
+      const conflict = shortcuts.conflict([binding], recording)
+
+      setRecording(null)
+
+      if (conflict) {
+        setMessage(
+          t(
+            'shortcuts.conflict',
+            { label: conflict.label },
+            `Already used by “${conflict.label}”.`,
+          ),
+        )
+
+        return
+      }
+
+      void save(recording, [binding])
+    }
+
+    window.addEventListener('keydown', listener, true)
+
+    return () => {
+      window.removeEventListener('keydown', listener, true)
+      shortcuts.setPaused(false)
+    }
+    // `save` and `t` only change with the endpoint and the locale.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [recording])
+
+  const groupLabel = (group: ShortcutListGroup['group']) =>
+    ({
+      general: t('shortcuts.groups.general', {}, 'General'),
+      navigation: t('shortcuts.groups.navigation', {}, 'Navigation'),
+      commands: t('shortcuts.groups.commands', {}, 'Commands'),
+      actions: t('shortcuts.groups.actions', {}, 'Actions on this page'),
+    })[group]
+
+  const change = (item: ShortcutListItem) => {
+    setMessage(
+      t(
+        'shortcuts.recording',
+        { label: item.label },
+        `Press the new keys for “${item.label}”. Escape cancels.`,
+      ),
+    )
+    setRecording(item.id)
+  }
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(next) => {
+        setRecording(null)
+        setMessage('')
+        onOpenChange(next)
+      }}
+    >
+      <DialogContent className="max-h-[85vh] overflow-y-auto sm:max-w-lg">
+        <div data-slot="shortcuts-overlay" className="flex flex-col gap-4">
+          <DialogHeader>
+            <DialogTitle>{t('shortcuts.title', {}, 'Keyboard shortcuts')}</DialogTitle>
+            <DialogDescription>
+              {t('shortcuts.description', {}, 'Shortcuts available on this page.')}
+            </DialogDescription>
+          </DialogHeader>
+          <div role="status" aria-live="polite" className="text-muted-foreground min-h-5 text-sm">
+            {message}
+          </div>
+          <div className="flex flex-col gap-5">
+            {groups.map((group) => (
+              <section
+                key={group.group}
+                data-group={group.group}
+                aria-labelledby={`shortcuts-${group.group}`}
+              >
+                <h3
+                  id={`shortcuts-${group.group}`}
+                  className="text-muted-foreground mb-2 text-xs font-medium uppercase"
+                >
+                  {groupLabel(group.group)}
+                </h3>
+                <ul className="flex flex-col divide-y rounded-md border">
+                  {group.items.map((item) => (
+                    <li
+                      key={item.id}
+                      data-shortcut={item.id}
+                      className="flex items-center gap-3 px-3 py-2 text-sm"
+                    >
+                      <span className="min-w-0 flex-1 truncate">{item.label}</span>
+                      {recording === item.id ? (
+                        <span className="text-primary text-xs">
+                          {t('shortcuts.press_keys', {}, 'Press keys…')}
+                        </span>
+                      ) : item.keys.length === 0 ? (
+                        <span className="text-muted-foreground text-xs">
+                          {t('shortcuts.off', {}, 'Off')}
+                        </span>
+                      ) : (
+                        <span className="flex flex-wrap items-center justify-end gap-2">
+                          {item.keys.map((key) => (
+                            <ShortcutKeys key={key} binding={key} />
+                          ))}
+                        </span>
+                      )}
+                      {customizable && item.customizable && (
+                        <span className="flex shrink-0 gap-1">
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="xs"
+                            aria-label={t(
+                              'shortcuts.change_label',
+                              { label: item.label },
+                              `Change the shortcut for ${item.label}`,
+                            )}
+                            onClick={() => change(item)}
+                          >
+                            {t('shortcuts.change', {}, 'Change')}
+                          </Button>
+                          {item.keys.length > 0 && (
+                            <Button
+                              type="button"
+                              variant="ghost"
+                              size="xs"
+                              aria-label={t(
+                                'shortcuts.turn_off_label',
+                                { label: item.label },
+                                `Turn off the shortcut for ${item.label}`,
+                              )}
+                              onClick={() => void save(item.id, [])}
+                            >
+                              {t('shortcuts.turn_off', {}, 'Turn off')}
+                            </Button>
+                          )}
+                          {item.customized && (
+                            <Button
+                              type="button"
+                              variant="ghost"
+                              size="xs"
+                              aria-label={t(
+                                'shortcuts.reset_label',
+                                { label: item.label },
+                                `Restore the default shortcut for ${item.label}`,
+                              )}
+                              onClick={() => void save(item.id, null)}
+                            >
+                              {t('shortcuts.reset', {}, 'Reset')}
+                            </Button>
+                          )}
+                        </span>
+                      )}
+                    </li>
+                  ))}
+                </ul>
+              </section>
+            ))}
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/components/panel/slot.tsx

@@ -0,0 +1,43 @@
+import { slotItems } from '@alfakit/core'
+import { usePanel } from '../../context'
+import { cn } from '../../lib/utils'
+import { RenderComponent } from '../schema/schema-renderer'
+
+/**
+ * Renders content added with `Panel::slot('name', …)` or `Slots::register()` on the
+ * server: HTML or schema components (`Text`, `Html`, `View`, …). Renders nothing when the
+ * slot is empty. `scope` is the component key (`relationManager:<class>`, `widget:<id>`)
+ * of the table, relation manager or widget the slot belongs to: content scoped to
+ * components only renders in their slots. `data` is what this render is about (the
+ * column of a header cell, the action of a modal): items registered with
+ * `when: ['column' => 'title']` only render where it matches.
+ */
+export function Slot({
+  name,
+  scope,
+  data,
+  className,
+}: {
+  name: string
+  scope?: string | null
+  data?: Record<string, unknown> | null
+  className?: string
+}) {
+  const items = slotItems(usePanel().slots, name, scope, data)
+
+  if (items.length === 0) {
+    return null
+  }
+
+  return (
+    <div data-slot-name={name} className={cn('contents', className)}>
+      {items.map((item, index) =>
+        item.type === 'html' ? (
+          <div key={index} className="contents" dangerouslySetInnerHTML={{ __html: item.html }} />
+        ) : (
+          <RenderComponent key={index} component={item.component} />
+        ),
+      )}
+    </div>
+  )
+}

package/src/components/panel/sub-navigation.tsx

@@ -0,0 +1,161 @@
+import type { NavigationItemSchema, SubNavigationSchema } from '@alfakit/core'
+import { Link } from '@inertiajs/react'
+import { createElement, type ReactNode } from 'react'
+import { useRegistry, useT } from '../../context'
+import { extraProps } from '../../lib/attributes'
+import { Icon } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+import { Badge } from '../ui/badge'
+import { NavLabel } from './nav-label'
+import { Slot } from './slot'
+
+function SubNavigationLink({ item, tab }: { item: NavigationItemSchema; tab: boolean }) {
+  // `NavigationItem::extraAttributes()`; `class` is merged with the link's own.
+  const attributes = (className: string) => extraProps(item.extraAttributes, className)
+  const className = cn(
+    'flex items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors',
+    tab ? 'shrink-0 whitespace-nowrap' : 'w-full',
+    item.active
+      ? 'bg-accent text-accent-foreground font-medium'
+      : 'text-muted-foreground hover:bg-accent/60 hover:text-foreground',
+  )
+
+  const content = (
+    <>
+      {item.icon && <Icon name={item.icon} />}
+      <NavLabel item={item} className="truncate" />
+      {item.badge !== undefined && item.badge !== null && (
+        <Badge variant="secondary" className="ms-auto px-1.5 py-0" title={item.badgeTooltip}>
+          {item.badge}
+        </Badge>
+      )}
+    </>
+  )
+
+  if (!item.url) {
+    return <span {...attributes(className)}>{content}</span>
+  }
+
+  if (item.openInNewTab) {
+    return (
+      <a {...attributes(className)} href={item.url} target="_blank" rel="noopener noreferrer">
+        {content}
+      </a>
+    )
+  }
+
+  return (
+    <Link
+      {...attributes(className)}
+      href={item.url}
+      aria-current={item.active ? 'page' : undefined}
+    >
+      {content}
+    </Link>
+  )
+}
+
+/** The links of a page's sub-navigation (cluster pages or record pages). */
+export function SubNavigation({ navigation }: { navigation: SubNavigationSchema }) {
+  const t = useT()
+  const label = t('sub_navigation', {}, 'Page navigation')
+
+  if (navigation.position === 'top') {
+    const items = navigation.groups.flatMap((group) => group.items)
+
+    return (
+      <nav
+        aria-label={label}
+        data-slot="sub-navigation"
+        data-position="top"
+        className="relative flex gap-1 overflow-x-auto border-b pb-2"
+      >
+        {items.map((item) => (
+          <SubNavigationLink key={`${item.label}-${item.url ?? ''}`} item={item} tab />
+        ))}
+      </nav>
+    )
+  }
+
+  return (
+    <nav
+      aria-label={label}
+      data-slot="sub-navigation"
+      data-position={navigation.position}
+      className="flex w-full shrink-0 flex-col gap-4 md:w-56"
+    >
+      <Slot name="page.sub-navigation.sidebar.before" />
+      {navigation.groups.map((group, index) => (
+        <div key={group.label ?? `group-${index}`} className="flex flex-col gap-1">
+          {group.label && (
+            <p className="text-muted-foreground flex items-center gap-1.5 px-3 text-xs font-medium">
+              {group.icon && <Icon name={group.icon} className="size-3.5" />}
+              {group.label}
+            </p>
+          )}
+          <ul className="flex flex-col gap-0.5">
+            {group.items.map((item) => (
+              <li key={`${item.label}-${item.url ?? ''}`}>
+                <SubNavigationLink item={item} tab={false} />
+              </li>
+            ))}
+          </ul>
+        </div>
+      ))}
+      <Slot name="page.sub-navigation.sidebar.after" />
+    </nav>
+  )
+}
+
+/**
+ * Places the sub-navigation next to (`start`/`end`) or above (`top`) the page content.
+ * Replace the navigation with `createAlfakit({ components: { 'panel:sub-navigation': … } })`.
+ */
+export function SubNavigationLayout({
+  navigation,
+  children,
+}: {
+  navigation: SubNavigationSchema
+  children: ReactNode
+}) {
+  const registry = useRegistry()
+  const nav = createElement(registry.resolve('panel:sub-navigation') ?? SubNavigation, {
+    navigation,
+  })
+
+  if (navigation.position === 'top') {
+    return (
+      <>
+        <Slot name="page.sub-navigation.top.before" />
+        {nav}
+        <Slot name="page.sub-navigation.top.after" />
+        {children}
+      </>
+    )
+  }
+
+  const content = <div className="flex min-w-0 flex-1 flex-col gap-6">{children}</div>
+
+  return (
+    <div
+      data-slot="sub-navigation-layout"
+      className="flex flex-col gap-6 md:flex-row md:items-start"
+    >
+      {navigation.position === 'end' ? (
+        <>
+          {content}
+          <Slot name="page.sub-navigation.end.before" />
+          {nav}
+          <Slot name="page.sub-navigation.end.after" />
+        </>
+      ) : (
+        <>
+          <Slot name="page.sub-navigation.start.before" />
+          {nav}
+          <Slot name="page.sub-navigation.start.after" />
+          {content}
+        </>
+      )}
+    </div>
+  )
+}

package/src/components/panel/tenant-menu.tsx

@@ -0,0 +1,175 @@
+import { filterTenants, initials, tenantNameText } from '@alfakit/core'
+import { Link, router } from '@inertiajs/react'
+import { CheckIcon, ChevronsUpDownIcon, PlusIcon, SearchIcon, SettingsIcon } from 'lucide-react'
+import { useState } from 'react'
+import { usePanel, useT } from '../../context'
+import { Icon } from '../../lib/icons'
+import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../ui/dropdown-menu'
+import { SidebarMenuButton } from '../ui/sidebar'
+import { MenuItemEntries, MenuItemEntry } from './menu-item'
+import { TenantName } from './nav-label'
+
+/**
+ * The tenant switcher: a sidebar header button, or a compact button in the top bar of the
+ * `topbar` layout (`variant="topbar"`), where the store name shows from `lg` up.
+ */
+export function TenantMenu({ variant = 'sidebar' }: { variant?: 'sidebar' | 'topbar' }) {
+  const t = useT()
+  const { tenancy, brandName } = usePanel()
+  const [search, setSearch] = useState('')
+
+  if (!tenancy || !tenancy.current) {
+    return null
+  }
+
+  const current = tenancy.current
+  // `tenantSwitcher(false)` sends no tenants; `searchableTenantMenu()` adds a search field.
+  const tenants = tenancy.searchable ? filterTenants(tenancy.tenants, search) : tenancy.tenants
+  const hasSwitcher = tenancy.switcher !== false && tenancy.tenants.length > 0
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        {variant === 'topbar' ? (
+          <button
+            type="button"
+            data-slot="tenant-menu"
+            className="hover:bg-accent data-[state=open]:bg-accent inline-flex h-9 max-w-60 shrink-0 items-center gap-2 rounded-md px-2 text-sm font-medium"
+          >
+            <Avatar className="size-6 rounded-md">
+              {current.avatar && <AvatarImage src={current.avatar} alt="" />}
+              <AvatarFallback className="rounded-md text-[10px]">
+                {initials(tenantNameText(current))}
+              </AvatarFallback>
+            </Avatar>
+            <span className="sr-only min-w-0 truncate lg:not-sr-only lg:grid lg:text-start lg:leading-tight">
+              {current.label && (
+                <span data-slot="tenant-menu-label" className="text-muted-foreground text-[10px]">
+                  {current.label}{' '}
+                </span>
+              )}
+              <TenantName tenant={current} className="truncate" />
+            </span>
+            <Icon
+              name="alfakit::panels.tenant-menu.toggle-button"
+              fallback={ChevronsUpDownIcon}
+              className="text-muted-foreground size-4 shrink-0"
+            />
+          </button>
+        ) : (
+          <SidebarMenuButton size="lg" className="data-[state=open]:bg-sidebar-accent">
+            <Avatar className="size-8 rounded-lg">
+              {current.avatar && <AvatarImage src={current.avatar} alt={tenantNameText(current)} />}
+              <AvatarFallback className="rounded-lg">
+                {initials(tenantNameText(current))}
+              </AvatarFallback>
+            </Avatar>
+            <div className="grid flex-1 text-start text-sm leading-tight">
+              {/* `HasCurrentTenantLabel`: a caption above the name instead of the brand. */}
+              {current.label && (
+                <span
+                  data-slot="tenant-menu-label"
+                  className="text-muted-foreground truncate text-xs"
+                >
+                  {current.label}
+                </span>
+              )}
+              <TenantName tenant={current} className="truncate font-medium" />
+              {!current.label && (
+                <span className="text-muted-foreground truncate text-xs">{brandName}</span>
+              )}
+            </div>
+            <Icon
+              name="alfakit::panels.tenant-menu.toggle-button"
+              fallback={ChevronsUpDownIcon}
+              className="ms-auto size-4"
+            />
+          </SidebarMenuButton>
+        )}
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        className="min-w-56 rounded-lg"
+        side="bottom"
+        align="start"
+        sideOffset={4}
+      >
+        {hasSwitcher && (
+          <DropdownMenuLabel className="text-muted-foreground text-xs">
+            {t('tenancy.switch', {}, 'Switch')}
+          </DropdownMenuLabel>
+        )}
+        {hasSwitcher && tenancy.searchable && (
+          <div data-slot="tenant-menu-search" className="relative px-1 pb-1">
+            <SearchIcon
+              className="text-muted-foreground pointer-events-none absolute start-3 top-1/2 size-3.5 -translate-y-1/2"
+              aria-hidden="true"
+            />
+            <input
+              type="search"
+              value={search}
+              onChange={(event) => setSearch(event.target.value)}
+              // Keep the menu's type-ahead from taking the keys.
+              onKeyDown={(event) => event.stopPropagation()}
+              placeholder={t('tenancy.search', {}, 'Search')}
+              aria-label={t('tenancy.search', {}, 'Search')}
+              className="border-input focus-visible:ring-ring/50 h-8 w-full rounded-md border bg-transparent ps-7 pe-2 text-sm outline-none focus-visible:ring-[3px]"
+            />
+          </div>
+        )}
+        {hasSwitcher && tenancy.searchable && tenants.length === 0 && (
+          <p className="text-muted-foreground px-2 py-1.5 text-sm">
+            {t('no_results', {}, 'No results.')}
+          </p>
+        )}
+        {tenants.map((tenant) => (
+          <DropdownMenuItem key={String(tenant.id)} onSelect={() => router.visit(tenant.url)}>
+            <Avatar className="size-6 rounded-sm">
+              {tenant.avatar && <AvatarImage src={tenant.avatar} alt={tenantNameText(tenant)} />}
+              <AvatarFallback className="rounded-sm text-[10px]">
+                {initials(tenantNameText(tenant))}
+              </AvatarFallback>
+            </Avatar>
+            <TenantName tenant={tenant} className="flex-1 truncate" />
+            {String(tenant.id) === String(current.id) && <CheckIcon className="size-4" />}
+          </DropdownMenuItem>
+        ))}
+        {hasSwitcher && (tenancy.registrationUrl || tenancy.profileUrl || tenancy.menu?.length) && (
+          <DropdownMenuSeparator />
+        )}
+        {tenancy.profile ? (
+          <MenuItemEntry item={tenancy.profile} menu="tenantMenu" />
+        ) : (
+          tenancy.profileUrl && (
+            <DropdownMenuItem asChild>
+              <Link href={tenancy.profileUrl} className="w-full">
+                <Icon name="alfakit::panels.tenant-menu.profile-button" fallback={SettingsIcon} />{' '}
+                {t('tenancy.profile', {}, 'Settings')}
+              </Link>
+            </DropdownMenuItem>
+          )
+        )}
+        {tenancy.menu && <MenuItemEntries items={tenancy.menu} menu="tenantMenu" />}
+        {tenancy.registration ? (
+          <MenuItemEntry item={tenancy.registration} menu="tenantMenu" />
+        ) : (
+          tenancy.registrationUrl && (
+            <DropdownMenuItem asChild>
+              <Link href={tenancy.registrationUrl} className="w-full">
+                <Icon name="alfakit::panels.tenant-menu.registration-button" fallback={PlusIcon} />{' '}
+                {t('tenancy.register', {}, 'New')}
+              </Link>
+            </DropdownMenuItem>
+          )
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

package/src/components/panel/theme-toggle.tsx

@@ -0,0 +1,69 @@
+import { hasThemeSwitcher, panelAppearance, setAppearance, type Appearance } from '@alfakit/core'
+import { MonitorIcon, MoonIcon, SunIcon } from 'lucide-react'
+import { useState } from 'react'
+import { usePanel, useT } from '../../context'
+import { Icon } from '../../lib/icons'
+import { Button } from '../ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from '../ui/dropdown-menu'
+
+export function ThemeToggle() {
+  const t = useT()
+  const panel = usePanel()
+  const [appearance, setLocal] = useState<Appearance>(() =>
+    typeof window === 'undefined' ? (panel.darkMode.default ?? 'system') : panelAppearance(panel),
+  )
+
+  // `themeSwitcher(false)` keeps dark mode but hides the switcher.
+  if (!hasThemeSwitcher(panel)) {
+    return null
+  }
+
+  const change = (value: string) => {
+    const next = value as Appearance
+    setLocal(next)
+    setAppearance(next, panel)
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          aria-label={t('toggle_theme', {}, 'Toggle theme')}
+        >
+          {appearance === 'dark' ? (
+            <Icon name="alfakit::panels.theme-switcher.dark-button" fallback={MoonIcon} />
+          ) : appearance === 'light' ? (
+            <Icon name="alfakit::panels.theme-switcher.light-button" fallback={SunIcon} />
+          ) : (
+            <Icon name="alfakit::panels.theme-switcher.system-button" fallback={MonitorIcon} />
+          )}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuRadioGroup value={appearance} onValueChange={change}>
+          <DropdownMenuRadioItem value="light">
+            <Icon name="alfakit::panels.theme-switcher.light-button" fallback={SunIcon} />{' '}
+            {t('light', {}, 'Light')}
+          </DropdownMenuRadioItem>
+          <DropdownMenuRadioItem value="dark">
+            <Icon name="alfakit::panels.theme-switcher.dark-button" fallback={MoonIcon} />{' '}
+            {t('dark', {}, 'Dark')}
+          </DropdownMenuRadioItem>
+          <DropdownMenuRadioItem value="system">
+            <Icon name="alfakit::panels.theme-switcher.system-button" fallback={MonitorIcon} />{' '}
+            {t('system', {}, 'System')}
+          </DropdownMenuRadioItem>
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}