Spaces:
Running
Running
File size: 1,705 Bytes
eb27538 |
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 |
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 mb-4">
<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;
|