@ragrabbit/mcp

by madarco
Verified
"use client"; import Link from "next/link"; import { useState } from "react"; import { ChevronDown, Dot, LucideIcon } from "lucide-react"; import { cn } from "@repo/design/lib/utils"; import { Button } from "@repo/design/shadcn/button"; import { DropdownMenuArrow } from "@radix-ui/react-dropdown-menu"; import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@repo/design/shadcn/collapsible"; import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "@repo/design/shadcn/tooltip"; import { DropdownMenu, DropdownMenuItem, DropdownMenuLabel, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuSeparator, } from "@repo/design/shadcn/dropdown-menu"; import { usePathname } from "next/navigation"; type Submenu = { href: string; label: string; active?: boolean; }; interface CollapseMenuButtonProps { icon: LucideIcon; label: string; active: boolean; submenus: Submenu[]; isOpen: boolean | undefined; } export function CollapseMenuButton({ icon: Icon, label, active, submenus, isOpen }: CollapseMenuButtonProps) { const pathname = usePathname(); const isSubmenuActive = submenus.some((submenu) => submenu.active === undefined ? submenu.href === pathname : submenu.active ); const [isCollapsed, setIsCollapsed] = useState<boolean>(isSubmenuActive); return isOpen ? ( <Collapsible open={isCollapsed} onOpenChange={setIsCollapsed} className="w-full"> <CollapsibleTrigger className="[&[data-state=open]>div>div>svg]:rotate-180 mb-1" asChild> <Button variant={isSubmenuActive ? "secondary" : "ghost"} className="w-full justify-start h-10"> <div className="w-full items-center flex justify-between"> <div className="flex items-center"> <span className="mr-4"> <Icon size={18} /> </span> <p className={cn( "max-w-[150px] truncate", isOpen ? "translate-x-0 opacity-100" : "-translate-x-96 opacity-0" )} > {label} </p> </div> <div className={cn("whitespace-nowrap", isOpen ? "translate-x-0 opacity-100" : "-translate-x-96 opacity-0")} > <ChevronDown size={18} className="transition-transform duration-200" /> </div> </div> </Button> </CollapsibleTrigger> <CollapsibleContent className="overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down"> {submenus.map(({ href, label, active }, index) => ( <Button key={index} variant={(active === undefined && pathname === href) || active ? "secondary" : "ghost"} className="w-full justify-start h-10 mb-1" asChild > <Link href={href}> <span className="mr-4 ml-2"> <Dot size={18} /> </span> <p className={cn( "max-w-[170px] truncate", isOpen ? "translate-x-0 opacity-100" : "-translate-x-96 opacity-0" )} > {label} </p> </Link> </Button> ))} </CollapsibleContent> </Collapsible> ) : ( <DropdownMenu> <TooltipProvider disableHoverableContent> <Tooltip delayDuration={100}> <TooltipTrigger asChild> <DropdownMenuTrigger asChild> <Button variant={isSubmenuActive ? "secondary" : "ghost"} className="w-full justify-start h-10 mb-1"> <div className="w-full items-center flex justify-between"> <div className="flex items-center"> <span className={cn(isOpen === false ? "" : "mr-4")}> <Icon size={18} /> </span> <p className={cn("max-w-[200px] truncate", isOpen === false ? "opacity-0" : "opacity-100")}> {label} </p> </div> </div> </Button> </DropdownMenuTrigger> </TooltipTrigger> <TooltipContent side="right" align="start" alignOffset={2}> {label} </TooltipContent> </Tooltip> </TooltipProvider> <DropdownMenuContent side="right" sideOffset={25} align="start"> <DropdownMenuLabel className="max-w-[190px] truncate">{label}</DropdownMenuLabel> <DropdownMenuSeparator /> {submenus.map(({ href, label, active }, index) => ( <DropdownMenuItem key={index} asChild> <Link className={`cursor-pointer ${((active === undefined && pathname === href) || active) && "bg-secondary"}`} href={href} > <p className="max-w-[180px] truncate">{label}</p> </Link> </DropdownMenuItem> ))} <DropdownMenuArrow className="fill-border" /> </DropdownMenuContent> </DropdownMenu> ); }