Spaces:
Running
Running
File size: 1,702 Bytes
08dfd47 eb27538 08dfd47 eb27538 08dfd47 eb27538 08dfd47 eb27538 08dfd47 eb27538 08dfd47 eb27538 08dfd47 eb27538 08dfd47 eb27538 08dfd47 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
import React from 'react'
interface ExampleVariantSelectorProps {
variantKeys: string[]
selectedVariant: string
setSelectedVariant: (v: string) => void
}
const ExampleVariantSelector: React.FC<ExampleVariantSelectorProps> = ({
variantKeys,
selectedVariant,
setSelectedVariant,
}) => {
// Keyboard shortcut for variant switching (keys 1-N)
React.useEffect(() => {
const handler = (e: KeyboardEvent) => {
if (document.activeElement && (document.activeElement as HTMLElement).tagName === 'INPUT')
return
const idx = parseInt(e.key, 10)
if (!isNaN(idx) && idx > 0 && idx <= variantKeys.length) {
setSelectedVariant(variantKeys[idx - 1])
}
}
window.addEventListener('keydown', handler)
return () => window.removeEventListener('keydown', handler)
}, [variantKeys, setSelectedVariant])
return (
<fieldset className="fieldset w-full p-4 rounded border border-gray-700 bg-base-200 ">
<legend className="fieldset-legend font-semibold">Variants</legend>
<div className="mb-2 flex gap-4 flex-wrap">
{variantKeys.map((variant, idx) => (
<label key={variant} className="flex items-center gap-1 cursor-pointer">
<input
type="radio"
name={`variant-selector`}
value={variant}
checked={selectedVariant === variant}
onChange={() => setSelectedVariant(variant)}
/>
<span className="text-xs font-semibold">
{variant} <span className="opacity-60">[{idx + 1}]</span>
</span>
</label>
))}
</div>
</fieldset>
)
}
export default ExampleVariantSelector
|