junior-sheer/recommender/components/SensativeSelector.tsx
2024-05-21 14:22:11 -05:00

25 lines
901 B
TypeScript

import { Checkbox, Field, Label } from '@headlessui/react';
interface SensativeSelectorProps {
showSensitiveTags: boolean;
setShowSensitiveTags: (checked: boolean) => void;
}
export const SensativeSelector: React.FC<SensativeSelectorProps> = ({ showSensitiveTags, setShowSensitiveTags }) => {
return (
<div>
<Field className="flex items-center gap-2">
<Checkbox
checked={showSensitiveTags}
onChange={setShowSensitiveTags}
className="group block size-4 rounded border bg-white data-[checked]:bg-blue-500"
>
<svg className="stroke-white opacity-0 group-data-[checked]:opacity-100" viewBox="0 0 14 14" fill="none">
<path d="M3 8L6 11L11 3.5" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Checkbox>
<Label>Show sensitive tags?</Label>
</Field>
</div>
)
}