CheckBoxFilter

Code

import React, { useState } from "react"
import * as Collapsible from "@radix-ui/react-collapsible"
import { Plus, Minus } from "@phosphor-icons/react"

interface CheckboxFilterProps {
	name: string
	code: string
	options: string[]
}

const CheckboxFilter: React.FC<CheckboxFilterProps> = ({ name, options }) => {
	const [isOpen, setIsOpen] = useState(false)

	return (
		<div className="w-full py-[15px] border-b">
			<div className="flex items-center" onClick={() => setIsOpen(!isOpen)}>
				<p className="font-medium text-gray-900">{name}</p>
				<span className="ml-auto cursor-pointer">{isOpen ? <Minus /> : <Plus />}</span>
			</div>
			<Collapsible.Root open={isOpen}>
				<Collapsible.Content>
					<div className="flex flex-col mt-[10px]">
						{options.map((option) => (
							<div key={option} className="flex items-center mb-[7px]">
								<input type="checkbox" className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 cursor-pointer" />
								<label className="ml-3 min-w-0 flex-1 text-gray-500">{option}</label>
							</div>
						))}
					</div>
				</Collapsible.Content>
			</Collapsible.Root>
		</div>
	)
}

export default CheckboxFilter