var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var F=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var A=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var u=(l,n)=>()=>(n||l((n={exports:{}}).exports,n),n.exports),m=(l,n)=>{for(var r in n)s(l,r,{get:n[r],enumerable:!0})},a=(l,n,r,c)=>{if(n&&typeof n=="object"||typeof n=="function")for(let o of h(n))!y.call(l,o)&&o!==r&&s(l,o,{get:()=>n[o],enumerable:!(c=F(n,o))||c.enumerable});return l};var w=(l,n,r)=>(r=l!=null?p(A(l)):{},a(n||!l||!l.__esModule?s(r,"default",{value:l,enumerable:!0}):r,l)),C=l=>a(s({},"__esModule",{value:!0}),l);var i=u((M,t)=>{t.exports=_jsx_runtime});var x={};m(x,{default:()=>D,frontmatter:()=>f});var e=w(i()),f={title:"Dropdown Button",date:new Date(17445024e5),description:"A dropdown components with animated icon",published:!0,author:"vivianlin"};function d(l){let n=Object.assign({figure:"figure",pre:"pre",code:"code",span:"span"},l.components),{ComponentPreview:r}=n;return r||v("ComponentPreview",!0),(0,e.jsx)(r,{name:"dropdown-button",children:(0,e.jsx)(n.figure,{__src__:"src/registry/core/ui/dropdown-button.tsx","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(n.pre,{style:{backgroundColor:"#101010",color:"#FFF"},tabIndex:"0","data-language":"tsx","data-theme":"vesper",__rawString__:`import { Check, ChevronDown } from 'lucide-react'; import * as React from 'react'; import { cn } from '@/lib/utils'; import { Button } from '@/components/ui/button'; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu'; interface DropdownButtonProps { className?: string; } const options = ['All Difficulty', 'Easy', 'Medium', 'Hard'] as const; type OptionType = (typeof options)[number]; function DropdownOption({ value, currentValue, onSelect, }: { value: OptionType; currentValue: OptionType; onSelect: (value: OptionType) => void; }) { return ( onSelect(value)} className='relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-8 text-sm outline-none transition-colors focus:bg-zinc-100 focus:text-zinc-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-zinc-800 dark:focus:text-zinc-50' > {value} {currentValue === value && ( )} ); } function DropdownButton({ className }: DropdownButtonProps) { const [isOpen, setIsOpen] = React.useState(false); const [currentValue, setCurrentValue] = React.useState( options[0], ); const handleSelect = (value: OptionType) => { setCurrentValue(value); }; return ( {options.map((option) => ( ))} ); } export DropdownButton; `,__src__:"src/registry/core/ui/dropdown-button.tsx",__event__:"copy_usage_code",children:(0,e.jsxs)(n.code,{"data-language":"tsx","data-theme":"vesper",style:{display:"grid"},children:[(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" { Check, ChevronDown } "}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:" 'lucide-react'"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:";"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" * "}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"as"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" React "}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:" 'react'"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:";"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" { cn } "}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:" '@/lib/utils'"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:";"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" { Button } "}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:" '@/components/ui/button'"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:";"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" {"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" DropdownMenu,"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" DropdownMenuContent,"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" DropdownMenuItem,"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" DropdownMenuTrigger,"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"} "}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:" '@/components/ui/dropdown-menu'"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:";"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"interface"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" DropdownButtonProps"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" {"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"?:"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" string"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:";"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"}"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"const"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" options "}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" ["}),(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:"'All Difficulty'"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:", "}),(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:"'Easy'"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:", "}),(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:"'Medium'"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:", "}),(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:"'Hard'"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"] "}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"as"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" const"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:";"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"type"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" OptionType"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" ="}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" ("}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"typeof"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" options)["}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"number"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"];"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"function"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" DropdownOption"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"({"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" value,"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" currentValue,"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" onSelect,"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"}"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:":"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" {"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" value"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:":"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" OptionType"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:";"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" currentValue"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:":"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" OptionType"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:";"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" onSelect"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:":"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" (value"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:":"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" OptionType"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:") "}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"=>"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" void"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:";"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"}) {"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" return"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" ("})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"DropdownMenuItem"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" onSelect={"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"() "}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"=>"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" onSelect"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"(value)"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:"'relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-8 text-sm outline-none transition-colors focus:bg-zinc-100 focus:text-zinc-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-zinc-800 dark:focus:text-zinc-50'"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" >"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"span"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:">{"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"value"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" {"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"currentValue "}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"==="}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" value "}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"&&"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" ("})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"span"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:"'absolute right-2 flex h-3.5 w-3.5 items-center justify-center'"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"Check"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:"'h-4 w-4'"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" />"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" )"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" );"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"}"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"function"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" DropdownButton"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"({ className }"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:":"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" DropdownButtonProps"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:") {"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" const"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" [isOpen, setIsOpen] "}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" React."}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"useState"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"("}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"false"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:");"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" const"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" [currentValue, setCurrentValue] "}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" React."}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"useState"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"<"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"OptionType"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:">("})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" options["}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"0"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"],"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" );"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" const"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" handleSelect"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" ="}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" (value"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:":"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" OptionType"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:") "}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"=>"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" {"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" setCurrentValue"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"(value);"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" };"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" return"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" ("})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"DropdownMenu"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" open={"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"isOpen"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" onOpenChange={"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"setIsOpen"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}>"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"DropdownMenuTrigger"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:"'flex justify-between min-w-[120px]'"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" asChild"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" >"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"Button"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" size="}),(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:"'sm'"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className={"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"cn"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"("})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:" 'hover:bg-white border shadow-sm bg-white text-gray-900 font-normal'"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:","})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" className,"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" )"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" >"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" {"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"currentValue"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"ChevronDown"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" size={"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"16"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" strokeWidth={"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"2"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" aria-hidden="}),(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:"'true'"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className={"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"cn"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"("})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:" '-me-1 ms-2 opacity-60 transition-transform duration-500'"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:","})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" isOpen "}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"?"}),(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:" 'rotate-180'"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" :"}),(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:" 'rotate-0'"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:","})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" )"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" />"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"DropdownMenuContent"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:"'min-w-[120px]'"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" {"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"options."}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"map"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"((option) "}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"=>"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" ("})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"DropdownOption"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" key={"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"option"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" value={"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"option"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" currentValue={"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"currentValue"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" onSelect={"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"handleSelect"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" />"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" ))"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" );"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"}"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" DropdownButton;"})]})]})})})})}function g(l={}){let{wrapper:n}=l.components||{};return n?(0,e.jsx)(n,Object.assign({},l,{children:(0,e.jsx)(d,l)})):d(l)}var D=g;function v(l,n){throw new Error("Expected "+(n?"component":"object")+" `"+l+"` to be defined: you likely forgot to import, pass, or provide it.")}return C(x);})(); ;return Component;