34 lines
865 B
TypeScript
34 lines
865 B
TypeScript
import { Signal, useSignal } from "@preact/signals";
|
|
import { useId } from "preact/hooks";
|
|
|
|
const Checkbox = (
|
|
{ label, checked = useSignal(false) }: {
|
|
label: string;
|
|
checked?: Signal<boolean>;
|
|
},
|
|
) => {
|
|
const _id = useId();
|
|
const id = `checkbox-${_id}`;
|
|
return (
|
|
<label
|
|
className="flex items-center py-3 px-4 rounded-2xl"
|
|
style={{ color: "var(--foreground)", background: "var(--background)" }}
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
checked={checked.value}
|
|
name="checkbox-one"
|
|
id={id}
|
|
onChange={(ev) => {
|
|
checked.value = ev.currentTarget.checked;
|
|
}}
|
|
class="bg-gray-200 hover:bg-gray-300 cursor-pointer
|
|
w-5 h-5 border-3 border-amber-500 focus:outline-none rounded-lg"
|
|
/>
|
|
<span class="ml-3">{label}</span>
|
|
</label>
|
|
);
|
|
};
|
|
|
|
export default Checkbox;
|