Files
golunteer/client/src/components/CheckboxIcon.tsx
2025-01-10 14:06:53 +00:00

34 lines
708 B
TypeScript

import { SwitchProps, useSwitch, VisuallyHidden } from "@nextui-org/react";
import React from "react";
export default function CheckboxIcon(props: SwitchProps) {
const {
Component,
slots,
isSelected,
getBaseProps,
getInputProps,
getWrapperProps,
} = useSwitch(props);
return (
<Component {...getBaseProps()}>
<VisuallyHidden>
<input {...getInputProps()} />
</VisuallyHidden>
<div
{...getWrapperProps()}
className={slots.wrapper({
class: [
"h-8 w-8",
"flex items-center justify-center",
"rounded-lg bg-default-100 hover:bg-default-200",
],
})}
>
{isSelected ? props.startContent : props.endContent}
</div>
</Component>
);
}