| | |
| | | import { useCallback } from 'react' |
| | | import { useTranslation } from 'react-i18next' |
| | | import { RiArrowDownSLine } from '@remixicon/react' |
| | | import Button from '@/app/components/base/button' |
| | | import Dropdown from '@/app/components/base/dropdown' |
| | | import { SlidersH } from '@/app/components/base/icons/src/vender/line/mediaAndDevices' |
| | | import { Brush01 } from '@/app/components/base/icons/src/vender/solid/editor' |
| | | import { Scales02 } from '@/app/components/base/icons/src/vender/solid/FinanceAndECommerce' |
| | | import { Target04 } from '@/app/components/base/icons/src/vender/solid/general' |
| | | import { TONE_LIST } from '@/config' |
| | | import cn from '@/utils/classnames' |
| | | |
| | | type PresetsParameterProps = { |
| | | onSelect: (toneId: number) => void |
| | |
| | | const { t } = useTranslation() |
| | | const renderTrigger = useCallback((open: boolean) => { |
| | | return ( |
| | | <Button |
| | | size={'small'} |
| | | variant={'secondary'} |
| | | className={cn(open && 'bg-state-base-hover')} |
| | | <div |
| | | className={` |
| | | flex items-center px-[7px] h-7 rounded-md border-[0.5px] border-gray-200 shadow-xs |
| | | text-xs font-medium text-gray-700 cursor-pointer |
| | | ${open && 'bg-gray-100'} |
| | | `} |
| | | > |
| | | <SlidersH className='mr-[5px] w-3.5 h-3.5 text-gray-500' /> |
| | | {t('common.modelProvider.loadPresets')} |
| | | <RiArrowDownSLine className='ml-0.5 h-3.5 w-3.5' /> |
| | | </Button> |
| | | <RiArrowDownSLine className='ml-0.5 w-3.5 h-3.5 text-gray-500' /> |
| | | </div> |
| | | ) |
| | | }, [t]) |
| | | }, []) |
| | | const getToneIcon = (toneId: number) => { |
| | | const className = 'mr-2 w-[14px] h-[14px]' |
| | | const res = ({ |
| | |
| | | return { |
| | | value: tone.id, |
| | | text: ( |
| | | <div className='flex h-full items-center'> |
| | | <div className='flex items-center h-full'> |
| | | {getToneIcon(tone.id)} |
| | | {t(`common.model.tone.${tone.name}`) as string} |
| | | </div> |