@brainfish-ai/devdoc 0.1.21

package/renderer/components/docs-viewer/sidebar/right-sidebar.tsx

@@ -0,0 +1,202 @@
+'use client'
+
+import { useEffect, useState, useCallback } from 'react'
+import Image from 'next/image'
+import { X, ArrowClockwise } from '@phosphor-icons/react'
+import type { BrainfishCollection, BrainfishRESTRequest } from '@/lib/api-docs/types'
+import type { PrefillData } from '@/lib/api-docs/agent/types'
+import type { DebugContext } from '../playground/response-viewer'
+import { AgentChat } from '../agent'
+import { Button } from '@/components/ui/button'
+import { useMobile } from '@/lib/api-docs/mobile-context'
+import { cn } from '@/lib/utils'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
+
+interface RightSidebarProps {
+  /** Current endpoint - when null, only agent mode is available */
+  request: BrainfishRESTRequest | null
+  /** Full collection for agent context */
+  collection: BrainfishCollection
+  /** Pre-generated API summary (cached server-side) */
+  apiSummary?: string | null
+  /** Callback when agent navigates to an endpoint */
+  onNavigateToEndpoint: (endpointId: string) => void
+  /** Callback when agent prefills parameters */
+  onPrefillParameters: (data: PrefillData) => void
+  /** Debug context from playground response - triggers agent debug */
+  debugContext?: DebugContext | null
+  /** Callback to clear debug context after processing */
+  onClearDebugContext?: () => void
+  /** Explain context from playground response - triggers agent explanation */
+  explainContext?: DebugContext | null
+  /** Callback to clear explain context after processing */
+  onClearExplainContext?: () => void
+  /** Callback to open global auth dialog */
+  onOpenGlobalAuth?: () => void
+  /** Callback to navigate to authorization tab in playground */
+  onNavigateToAuthTab?: () => void
+  /** Callback to navigate to parameters tab in playground */
+  onNavigateToParamsTab?: () => void
+  /** Callback to navigate to body tab in playground */
+  onNavigateToBodyTab?: () => void
+  /** Callback to navigate to headers tab in playground */
+  onNavigateToHeadersTab?: () => void
+  /** Callback to navigate to a documentation section */
+  onNavigateToDocSection?: (sectionId: string) => void
+  /** Callback to navigate to a documentation page */
+  onNavigateToDocPage?: (slug: string) => void
+}
+
+export function RightSidebar({ 
+  request, 
+  collection,
+  apiSummary,
+  onNavigateToEndpoint,
+  onPrefillParameters,
+  debugContext,
+  onClearDebugContext,
+  explainContext,
+  onClearExplainContext,
+  onOpenGlobalAuth,
+  onNavigateToAuthTab,
+  onNavigateToParamsTab,
+  onNavigateToBodyTab,
+  onNavigateToHeadersTab,
+  onNavigateToDocSection,
+  onNavigateToDocPage,
+}: RightSidebarProps) {
+  // Mobile context
+  const { isMobile, isRightSidebarOpen, closeRightSidebar } = useMobile()
+  
+  // Debug context to send to agent (full context for card display)
+  const [pendingDebugContext, setPendingDebugContext] = useState<DebugContext | null>(null)
+
+  // Handle debug context
+  useEffect(() => {
+    if (debugContext) {
+      // Pass full context to agent
+      setPendingDebugContext(debugContext)
+      
+      // Clear the debug context from parent
+      onClearDebugContext?.()
+    }
+  }, [debugContext, onClearDebugContext])
+  
+  // Clear debug context after it's been used
+  const handleDebugContextConsumed = () => {
+    setPendingDebugContext(null)
+  }
+
+  // Key for resetting chat
+  const [chatKey, setChatKey] = useState(0)
+  
+  // Track if there are messages
+  const [hasMessages, setHasMessages] = useState(false)
+  
+  // Handle reset conversation
+  const handleResetConversation = useCallback(() => {
+    // Clear chat storage before remounting
+    localStorage.removeItem('brainfish-agent-chat')
+    setChatKey(prev => prev + 1)
+    setHasMessages(false)
+  }, [])
+
+  return (
+    <>
+      {/* Mobile overlay backdrop */}
+      {isMobile && isRightSidebarOpen && (
+        <div 
+          className="docs-agent-overlay fixed inset-0 bg-black/50 z-40 lg:hidden"
+          onClick={closeRightSidebar}
+        />
+      )}
+      
+      <div 
+        className={cn(
+          "docs-agent-panel border-l border-border bg-background flex flex-col overflow-hidden",
+          // Desktop: always visible, fixed width
+          "lg:relative lg:w-96 lg:h-full",
+          // Mobile: drawer behavior from right
+          "fixed inset-y-0 right-0 z-50 w-[320px] sm:w-[360px] h-full",
+          "transform transition-transform duration-300 ease-in-out",
+          "lg:transform-none lg:translate-x-0",
+          isMobile && !isRightSidebarOpen && "translate-x-full",
+          isMobile && isRightSidebarOpen && "translate-x-0"
+        )}
+      >
+        {/* Header */}
+        <div className="docs-agent-header shrink-0 px-3 sm:px-4 h-[41px] flex items-center border-b border-border bg-muted/30">
+          <div className="flex items-center justify-between gap-2 w-full">
+            {/* Left: Assistant */}
+            <div className="docs-agent-title flex items-center gap-2.5">
+              <div className="docs-agent-avatar size-7 rounded-full overflow-hidden bg-muted flex items-center justify-center shrink-0">
+                <Image src="/icon.png" alt="Assistant" width={28} height={28} className="size-7 object-cover" />
+              </div>
+              <span className="text-sm font-medium">Assistant</span>
+            </div>
+            
+            {/* Right: Actions */}
+            <div className="flex items-center gap-1 shrink-0">
+              {/* Reset conversation button - only show when there are messages */}
+              {hasMessages && (
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={handleResetConversation}
+                      className="h-7 w-7 text-muted-foreground hover:text-foreground"
+                    >
+                      <ArrowClockwise className="h-4 w-4" weight="bold" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent side="bottom">New conversation</TooltipContent>
+                </Tooltip>
+              )}
+              
+              {/* Mobile close button */}
+              {isMobile && (
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={closeRightSidebar}
+                  className="h-7 w-7 lg:hidden"
+                >
+                  <X className="h-4 w-4" weight="bold" />
+                </Button>
+              )}
+            </div>
+          </div>
+        </div>
+        
+        {/* Content */}
+        <div className="docs-agent-content flex-1 overflow-hidden">
+          <AgentChat 
+            key={chatKey}
+            collection={collection}
+            currentEndpoint={request}
+            apiSummary={apiSummary}
+            onNavigate={onNavigateToEndpoint}
+            onPrefill={onPrefillParameters}
+            debugContext={pendingDebugContext}
+            onDebugContextConsumed={handleDebugContextConsumed}
+            explainContext={explainContext}
+            onExplainContextConsumed={onClearExplainContext}
+            onOpenGlobalAuth={onOpenGlobalAuth}
+            onNavigateToAuthTab={onNavigateToAuthTab}
+            onNavigateToParamsTab={onNavigateToParamsTab}
+            onNavigateToBodyTab={onNavigateToBodyTab}
+            onNavigateToHeadersTab={onNavigateToHeadersTab}
+            onNavigateToDocSection={onNavigateToDocSection}
+            onNavigateToDocPage={onNavigateToDocPage}
+            onHasMessagesChange={setHasMessages}
+          />
+        </div>
+      </div>
+    </>
+  )
+}

package/renderer/components/docs-viewer/sidebar/sidebar-group.tsx

@@ -0,0 +1,118 @@
+'use client'
+
+import { ReactNode, useState, useRef, useEffect } from 'react'
+import { CaretRight } from '@phosphor-icons/react'
+import { cn } from '@/lib/utils'
+
+interface SidebarGroupProps {
+  title: ReactNode
+  children: ReactNode
+  defaultOpen?: boolean
+  selected?: boolean
+  indent?: number
+  onClick?: () => void
+  asideContent?: ReactNode
+  /** Selected child slug - when this changes and a child is selected, auto-expand */
+  selectedChildSlug?: string | null
+}
+
+/**
+ * Sidebar Group component - collapsible group with toggle
+ * Arrow on right side with smooth rotation and expand animations
+ */
+export function SidebarGroup({
+  title,
+  children,
+  defaultOpen = false,
+  selected = false,
+  indent = 0,
+  onClick,
+  asideContent,
+  selectedChildSlug,
+}: SidebarGroupProps) {
+  const [isOpen, setIsOpen] = useState(defaultOpen)
+  const contentRef = useRef<HTMLUListElement>(null)
+  const [contentHeight, setContentHeight] = useState<number | undefined>(
+    defaultOpen ? undefined : 0
+  )
+
+  // Auto-expand when a child is selected (e.g., via agent navigation)
+  // Triggers on defaultOpen change OR when selectedChildSlug changes (even if defaultOpen stays true)
+  useEffect(() => {
+    if (defaultOpen) {
+      setIsOpen(true)
+    }
+  }, [defaultOpen, selectedChildSlug])
+
+  // Update height when open state changes
+  useEffect(() => {
+    if (isOpen) {
+      const height = contentRef.current?.scrollHeight
+      setContentHeight(height)
+      // After animation, set to auto for dynamic content
+      const timer = setTimeout(() => setContentHeight(undefined), 200)
+      return () => clearTimeout(timer)
+    } else {
+      // First set the current height, then animate to 0
+      const height = contentRef.current?.scrollHeight
+      setContentHeight(height)
+      requestAnimationFrame(() => {
+        setContentHeight(0)
+      })
+    }
+  }, [isOpen])
+
+  const handleToggle = () => {
+    setIsOpen(!isOpen)
+    onClick?.()
+  }
+
+  return (
+    <li className="docs-sidebar-group flex flex-col">
+      <button
+        type="button"
+        aria-expanded={isOpen}
+        onClick={handleToggle}
+        className={cn(
+          // Base styles
+          'docs-sidebar-group-toggle group/button flex items-center rounded-lg px-3 py-2 w-full text-left',
+          'text-sm leading-5 transition-colors duration-150',
+          // State variants
+          selected
+            ? 'docs-sidebar-group-active bg-sidebar-primary text-sidebar-primary-foreground font-medium'
+            : 'text-sidebar-foreground/80 hover:bg-sidebar-accent/30 hover:text-sidebar-foreground'
+        )}
+        style={{ paddingLeft: indent > 0 ? `${indent * 12 + 12}px` : undefined }}
+      >
+        <span className="flex-1 truncate font-medium">{title}</span>
+        {asideContent && (
+          <span className="ml-2 shrink-0">{asideContent}</span>
+        )}
+        {/* Toggle icon - right side with rotation animation */}
+        <span className="docs-sidebar-group-icon ml-2 text-sidebar-foreground/50 group-hover/button:text-sidebar-foreground/70">
+          <CaretRight 
+            weight="bold" 
+            className={cn(
+              "h-3.5 w-3.5 transition-transform duration-200 ease-out",
+              isOpen && "rotate-90"
+            )}
+          />
+        </span>
+      </button>
+      {/* Child items with expand animation */}
+      <ul 
+        ref={contentRef}
+        className={cn(
+          "docs-sidebar-group-items flex flex-col overflow-hidden transition-all duration-200 ease-out",
+          !isOpen && "opacity-0",
+          isOpen && "opacity-100"
+        )}
+        style={{ 
+          height: contentHeight !== undefined ? `${contentHeight}px` : 'auto',
+        }}
+      >
+        {children}
+      </ul>
+    </li>
+  )
+}

package/renderer/components/docs-viewer/sidebar/sidebar-item.tsx

@@ -0,0 +1,226 @@
+'use client'
+
+import { ReactNode, useRef, useEffect, useLayoutEffect, useState, createContext, useContext } from 'react'
+import { cn } from '@/lib/utils'
+import * as PhosphorIcons from '@phosphor-icons/react'
+
+// Helper to get Phosphor icon component from name
+function getIcon(iconName?: string): React.ComponentType<{ className?: string; weight?: "thin" | "light" | "regular" | "bold" | "fill" | "duotone" }> | null {
+  if (!iconName) return null
+  
+  // Convert kebab-case to PascalCase for Phosphor icons
+  const pascalCase = iconName
+    .split('-')
+    .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+    .join('')
+  
+  const IconComponent = (PhosphorIcons as Record<string, unknown>)[pascalCase] as React.ComponentType<{ className?: string; weight?: "thin" | "light" | "regular" | "bold" | "fill" | "duotone" }> | undefined
+  return IconComponent || null
+}
+
+// Context for the sliding indicator
+interface SlidingIndicatorContextType {
+  registerItem: (id: string, element: HTMLElement | null) => void
+  selectedId: string | null
+  setSelectedId: (id: string) => void
+}
+
+const SlidingIndicatorContext = createContext<SlidingIndicatorContextType | null>(null)
+
+/**
+ * Wrapper component that provides sliding indicator animation
+ */
+interface SlidingIndicatorProviderProps {
+  children: ReactNode
+  className?: string
+}
+
+export function SlidingIndicatorProvider({ children, className }: SlidingIndicatorProviderProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const itemsRef = useRef<Map<string, HTMLElement>>(new Map())
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const [indicatorStyle, setIndicatorStyle] = useState<React.CSSProperties>({
+    opacity: 0,
+    top: 0,
+    height: 0,
+  })
+
+  const registerItem = (id: string, element: HTMLElement | null) => {
+    if (element) {
+      itemsRef.current.set(id, element)
+    } else {
+      itemsRef.current.delete(id)
+    }
+  }
+
+  // Update indicator position when selection changes
+  useLayoutEffect(() => {
+    if (!selectedId || !containerRef.current) {
+      setIndicatorStyle(prev => ({ ...prev, opacity: 0 }))
+      return
+    }
+
+    const selectedElement = itemsRef.current.get(selectedId)
+    if (!selectedElement) {
+      setIndicatorStyle(prev => ({ ...prev, opacity: 0 }))
+      return
+    }
+
+    const containerRect = containerRef.current.getBoundingClientRect()
+    const itemRect = selectedElement.getBoundingClientRect()
+
+    setIndicatorStyle({
+      opacity: 1,
+      top: itemRect.top - containerRect.top + containerRef.current.scrollTop,
+      height: itemRect.height,
+      left: 8,
+      right: 8,
+    })
+  }, [selectedId])
+
+  // Also update on scroll to keep indicator in sync
+  useEffect(() => {
+    const container = containerRef.current
+    if (!container) return
+
+    const handleScroll = () => {
+      if (!selectedId) return
+      const selectedElement = itemsRef.current.get(selectedId)
+      if (!selectedElement) return
+
+      const containerRect = container.getBoundingClientRect()
+      const itemRect = selectedElement.getBoundingClientRect()
+
+      setIndicatorStyle(prev => ({
+        ...prev,
+        top: itemRect.top - containerRect.top + container.scrollTop,
+      }))
+    }
+
+    container.addEventListener('scroll', handleScroll, { passive: true })
+    return () => container.removeEventListener('scroll', handleScroll)
+  }, [selectedId])
+
+  return (
+    <SlidingIndicatorContext.Provider value={{ registerItem, selectedId, setSelectedId }}>
+      <div ref={containerRef} className={cn('relative', className)}>
+        {/* Sliding indicator background */}
+        <div
+          className="docs-sidebar-indicator absolute rounded-lg bg-background dark:bg-stone-800/50 pointer-events-none z-0"
+          style={{
+            ...indicatorStyle,
+            transition: 'top 350ms cubic-bezier(0.4, 0, 0.2, 1), height 250ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease-out',
+          }}
+        />
+        {children}
+      </div>
+    </SlidingIndicatorContext.Provider>
+  )
+}
+
+interface SidebarItemProps {
+  children: ReactNode
+  selected?: boolean
+  active?: boolean
+  disabled?: boolean
+  indent?: number
+  onClick?: () => void
+  className?: string
+  asideContent?: ReactNode
+  /** Unique ID for sliding animation */
+  itemId?: string
+  /** Phosphor icon name */
+  icon?: string
+}
+
+/**
+ * Sidebar Item component - individual clickable item in the sidebar
+ * Uses subtle sage/mint style when selected with smooth sliding animation
+ */
+export function SidebarItem({
+  children,
+  selected = false,
+  active = false,
+  disabled = false,
+  indent = 0,
+  onClick,
+  className,
+  asideContent,
+  itemId,
+  icon,
+}: SidebarItemProps) {
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const context = useContext(SlidingIndicatorContext)
+  const id = itemId || String(children)
+  const IconComponent = getIcon(icon)
+
+  // Register this item with the sliding indicator provider
+  useEffect(() => {
+    if (context && buttonRef.current) {
+      context.registerItem(id, buttonRef.current)
+      return () => context.registerItem(id, null)
+    }
+  }, [context, id])
+
+  // Update selected state in context
+  useEffect(() => {
+    if (context && selected) {
+      context.setSelectedId(id)
+    }
+  }, [context, selected, id])
+  
+  // Auto-scroll into view when selected (e.g., via agent navigation)
+  useEffect(() => {
+    if (selected && buttonRef.current) {
+      // Small delay to allow folder expansion animation to complete
+      setTimeout(() => {
+        buttonRef.current?.scrollIntoView({
+          behavior: 'smooth',
+          block: 'center',
+        })
+      }, 100)
+    }
+  }, [selected])
+
+  // Check if we're inside a sliding indicator provider
+  const hasSliding = context !== null
+
+  return (
+    <li className="docs-sidebar-item-wrapper flex flex-col">
+      <button
+        ref={buttonRef}
+        type="button"
+        disabled={disabled}
+        aria-selected={selected}
+        onClick={onClick}
+        className={cn(
+          // Base styles
+          'docs-sidebar-item group/button flex items-center rounded-lg px-3 py-2 w-full text-left relative z-10',
+          'text-sm leading-5 transition-colors duration-150',
+          // Indentation
+          indent > 0 && `ml-${indent * 3}`,
+          // State variants
+          selected
+            ? hasSliding
+              ? 'docs-sidebar-item-active text-green-700 font-semibold dark:text-green-400' // No bg when sliding
+              : 'docs-sidebar-item-active bg-background text-green-700 font-semibold dark:bg-stone-800/50 dark:text-green-400'
+            : active
+              ? 'text-sidebar-foreground font-medium hover:bg-sidebar-accent/50'
+              : disabled
+                ? 'text-sidebar-foreground/50 cursor-default'
+                : 'text-sidebar-foreground/80 hover:bg-sidebar-accent/30 hover:text-sidebar-foreground',
+          className
+        )}
+        style={{ paddingLeft: indent > 0 ? `${indent * 12 + 12}px` : undefined }}
+      >
+        {IconComponent && (
+          <IconComponent className="h-4 w-4 mr-2 shrink-0 opacity-60" weight="regular" />
+        )}
+        <span className="flex-1 truncate">{children}</span>
+        {asideContent && (
+          <span className="ml-2 shrink-0">{asideContent}</span>
+        )}
+      </button>
+    </li>
+  )
+}

package/renderer/components/docs-viewer/sidebar/sidebar-section.tsx

@@ -0,0 +1,52 @@
+'use client'
+
+import { ReactNode } from 'react'
+import { cn } from '@/lib/utils'
+import * as PhosphorIcons from '@phosphor-icons/react'
+
+interface SidebarSectionProps {
+  title: string
+  children: ReactNode
+  className?: string
+  /** Phosphor icon name (e.g., "rocket", "book-open", "sliders") */
+  icon?: string
+}
+
+// Map of common icon names to Phosphor components
+function getIcon(iconName?: string): React.ComponentType<{ className?: string; weight?: "thin" | "light" | "regular" | "bold" | "fill" | "duotone" }> | null {
+  if (!iconName) return null
+  
+  // Convert kebab-case to PascalCase for Phosphor icons
+  const pascalCase = iconName
+    .split('-')
+    .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+    .join('')
+  
+  const IconComponent = (PhosphorIcons as Record<string, unknown>)[pascalCase] as React.ComponentType<{ className?: string; weight?: "thin" | "light" | "regular" | "bold" | "fill" | "duotone" }> | undefined
+  return IconComponent || null
+}
+
+/**
+ * Sidebar Section component - groups items under a title with optional icon
+ */
+export function SidebarSection({ title, children, className = '', icon }: SidebarSectionProps) {
+  const IconComponent = getIcon(icon)
+  
+  return (
+    <div className={cn('docs-sidebar-section flex flex-col', className)}>
+      {/* Section title with optional icon */}
+      <div className="docs-sidebar-section-header flex items-center gap-2 px-4 py-3">
+        {IconComponent && (
+          <IconComponent className="docs-sidebar-section-icon h-4 w-4 text-sidebar-foreground/70" weight="regular" />
+        )}
+        <span className="docs-sidebar-section-title text-sm font-semibold text-sidebar-foreground">
+          {title}
+        </span>
+      </div>
+      {/* Section items */}
+      <ul className="docs-sidebar-section-items flex flex-col gap-0.5 px-2 pb-4">
+        {children}
+      </ul>
+    </div>
+  )
+}

package/renderer/components/theme-provider.tsx

@@ -0,0 +1,11 @@
+"use client"
+
+import * as React from "react"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+
+export function ThemeProvider({
+  children,
+  ...props
+}: React.ComponentProps<typeof NextThemesProvider>) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}

package/renderer/components/theme-toggle.tsx

@@ -0,0 +1,76 @@
+"use client"
+
+import * as React from "react"
+import { Moon, Sun, Desktop, Check } from "@phosphor-icons/react"
+import { useTheme } from "next-themes"
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { cn } from "@/lib/utils"
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme()
+  const [mounted, setMounted] = React.useState(false)
+
+  // Avoid hydration mismatch
+  React.useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon" className="h-9 w-9">
+          <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="min-w-[140px]">
+        <DropdownMenuItem 
+          onClick={() => setTheme("light")}
+          className={cn(
+            "flex items-center justify-between gap-2",
+            mounted && theme === "light" && "bg-accent"
+          )}
+        >
+          <div className="flex items-center gap-2">
+            <Sun className="h-4 w-4" />
+            <span>Light</span>
+          </div>
+          {mounted && theme === "light" && <Check className="h-4 w-4" />}
+        </DropdownMenuItem>
+        <DropdownMenuItem 
+          onClick={() => setTheme("dark")}
+          className={cn(
+            "flex items-center justify-between gap-2",
+            mounted && theme === "dark" && "bg-accent"
+          )}
+        >
+          <div className="flex items-center gap-2">
+            <Moon className="h-4 w-4" />
+            <span>Dark</span>
+          </div>
+          {mounted && theme === "dark" && <Check className="h-4 w-4" />}
+        </DropdownMenuItem>
+        <DropdownMenuItem 
+          onClick={() => setTheme("system")}
+          className={cn(
+            "flex items-center justify-between gap-2",
+            mounted && theme === "system" && "bg-accent"
+          )}
+        >
+          <div className="flex items-center gap-2">
+            <Desktop className="h-4 w-4" />
+            <span>System</span>
+          </div>
+          {mounted && theme === "system" && <Check className="h-4 w-4" />}
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}