56 lines
1.4 KiB
TypeScript
56 lines
1.4 KiB
TypeScript
import { memo, useMemo } from 'react'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Shuffle } from 'lucide-react'
|
|
|
|
interface Preset {
|
|
label: string
|
|
[key: string]: any
|
|
}
|
|
|
|
interface PresetSelectorProps<T extends Preset> {
|
|
presets: readonly T[]
|
|
onSelect: (preset: T) => void
|
|
}
|
|
|
|
const PresetSelectorInner = <T extends Preset>({ presets, onSelect }: PresetSelectorProps<T>) => {
|
|
const presetButtons = useMemo(() => {
|
|
return presets.map((preset, index) => (
|
|
<Button
|
|
key={`${preset.label}-${index}`}
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => onSelect(preset)}
|
|
className="text-xs md:text-sm px-2 py-0.5 h-5"
|
|
>
|
|
{preset.label}
|
|
</Button>
|
|
))
|
|
}, [presets, onSelect])
|
|
|
|
const handleRandomSelect = () => {
|
|
const randomIndex = Math.floor(Math.random() * presets.length)
|
|
onSelect(presets[randomIndex])
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center gap-1.5 mt-1">
|
|
<div className="flex flex-wrap gap-1 flex-1">
|
|
{presetButtons}
|
|
</div>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={handleRandomSelect}
|
|
className="h-6 w-6 flex-shrink-0"
|
|
title="随机选择"
|
|
>
|
|
<Shuffle className="h-3 w-3" />
|
|
</Button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export const PresetSelector = memo(PresetSelectorInner) as typeof PresetSelectorInner
|