import React, { useEffect, useState } from "react" import { AnimatePresence, motion, MotionConfig } from "framer-motion" import { ChevronDownIcon, X } from "lucide-react" type TSelectData = { id: string label: string value: string description?: string icon?: string disabled?: boolean custom?: React.ReactNode } type SelectProps = { data?: TSelectData[] onChange?: (value: string) => void defaultValue?: string } const Select = ({ data, defaultValue }: SelectProps) => { const [open, setOpen] = React.useState(false) const ref = React.useRef(null) const [selected, setSelected] = useState(undefined) useEffect(() => { if (defaultValue) { const item = data?.find((i) => i.value === defaultValue) if (item) { setSelected(item) } } else { setSelected(data?.[0]) } }, [defaultValue]) const onSelect = (value: string) => { const item = data?.find((i) => i.value === value) setSelected(item as TSelectData) setOpen(false) } return ( {!open ? ( setOpen(true)} className="overflow-hidden rounded-[30px] border border-input bg-background shadow-sm" > ) : (

{data?.map((item) => ( ))}

)} ) } export default Select const Head = ({ setOpen }: { setOpen: (open: boolean) => void }) => { return ( Choose Model ) } type SelectItemProps = { item?: TSelectData noDescription?: boolean order?: string onChange?: (index: string) => void } const animation = { hidden: { opacity: 0, y: 10, }, visible: { opacity: 1, y: 0, transition: (custom: number) => ({ delay: custom * 0.1, duration: 0.5, }), }, exit: { opacity: 0, y: 10, transition: (custom: number) => ({ delay: custom * 0.1, }), }, } const SelectItem = ({ item, noDescription = true, order, onChange, }: SelectItemProps) => { return ( onChange?.(order as string)} >

{item?.icon} {item?.label} {noDescription ? null : ( {item?.description} )}

{noDescription ? ( ) : null} ) }