| 1 | import { Play } from 'lucide-react' |
| 2 | import { useT } from '@renderer/i18n' |
| 3 | import { useSessionDetailRuntimeStore } from '@renderer/store' |
| 4 | import { ElementAnimationPicker } from './ElementAnimationPicker' |
| 5 | import { IndexTransitionPicker } from './IndexTransitionPicker' |
| 6 | import { ToolRowShell } from './ToolRowShell' |
| 7 | import type { ToolRowProps } from './types' |
| 8 | |
| 9 | export function AnimationToolRow({ disabled }: ToolRowProps): React.JSX.Element { |
| 10 | const t = useT() |
| 11 | const refreshCurrentPreview = useSessionDetailRuntimeStore( |
| 12 | (state) => state.refreshCurrentPreview |
| 13 | ) |
| 14 | |
| 15 | return ( |
| 16 | <ToolRowShell> |
| 17 | <IndexTransitionPicker disabled={disabled} /> |
| 18 | <ElementAnimationPicker disabled={disabled} /> |
| 19 | <button |
| 20 | type="button" |
| 21 | disabled={disabled} |
| 22 | className="inline-flex h-7 shrink-0 items-center gap-1.5 rounded-full border border-[#d8ccb5]/70 bg-[#fffdf8]/88 px-2.5 text-[10px] font-bold leading-none text-[#314028] shadow-[inset_0_1px_2px_rgba(74,59,42,0.04)] transition-colors hover:bg-[#f3f7ed] disabled:cursor-not-allowed disabled:opacity-50" |
| 23 | onClick={() => { |
| 24 | refreshCurrentPreview() |
| 25 | }} |
| 26 | > |
| 27 | <Play className="h-3 w-3 shrink-0" /> |
| 28 | <span>{t('sessionDetail.elementAnimationPreview')}</span> |
| 29 | </button> |
| 30 | </ToolRowShell> |
| 31 | ) |
| 32 | } |
| 33 |