| | |
| | | offset={4} |
| | | > |
| | | <PortalToFollowElemTrigger onClick={() => setOpen(!open)} className='w-[120px] cursor-pointer'> |
| | | <div className='flex h-8 items-center justify-between rounded-lg border-0 bg-components-button-secondary-bg px-2.5 text-[13px] text-text-primary'> |
| | | <div className='w-0 grow truncate capitalize' title={value}>{value}</div> |
| | | <RiArrowDownSLine className='h-3.5 w-3.5 shrink-0 text-text-secondary' /> |
| | | <div className='flex items-center h-8 justify-between px-2.5 rounded-lg border-0 bg-gray-100 text-gray-900 text-[13px]'> |
| | | <div className='capitalize grow w-0 truncate' title={value}>{value}</div> |
| | | <RiArrowDownSLine className='shrink-0 w-3.5 h-3.5 text-gray-700' /> |
| | | </div> |
| | | </PortalToFollowElemTrigger> |
| | | <PortalToFollowElemContent style={{ |
| | | zIndex: 100, |
| | | }}> |
| | | <div className='w-[120px] rounded-lg bg-components-panel-bg p-1 shadow-sm'> |
| | | <div className='w-[120px] p-1 bg-white rounded-lg shadow-sm'> |
| | | {TYPES.map(type => ( |
| | | <div |
| | | key={type} |
| | | className='flex h-[30px] cursor-pointer items-center justify-between rounded-lg pl-3 pr-2 text-[13px] text-text-primary hover:bg-state-base-hover' |
| | | className='flex items-center h-[30px] justify-between pl-3 pr-2 rounded-lg hover:bg-gray-100 text-gray-900 text-[13px] cursor-pointer' |
| | | onClick={handleChange(type)} |
| | | > |
| | | <div className='w-0 grow truncate capitalize'>{type}</div> |
| | | {type === value && <Check className='h-4 w-4 shrink-0 text-text-accent' />} |
| | | <div className='w-0 grow capitalize truncate'>{type}</div> |
| | | {type === value && <Check className='shrink-0 w-4 h-4 text-primary-600' />} |
| | | </div> |
| | | ))} |
| | | </div> |