import { observer } from "mobx-react-lite"; import { Combobox } from "@headlessui/react"; // hooks import { useProjectState } from "@/hooks/store"; export const BulkDeleteIssuesModalItem: React.FC<any> = observer((props) => { const { issue, delete_issue_ids, identifier } = props; const { getStateById } = useProjectState(); const color = getStateById(issue.state_id)?.color; return ( <Combobox.Option key={issue.id} as="div" value={issue.id} className={({ active }) => `flex cursor-pointer select-none items-center justify-between rounded-md px-3 py-2 ${ active ? "bg-custom-background-80 text-custom-text-100" : "" }` } > <div className="flex items-center gap-2"> <input type="checkbox" checked={delete_issue_ids} readOnly /> <span className="block h-1.5 w-1.5 flex-shrink-0 rounded-full" style={{ backgroundColor: color, }} /> <span className="flex-shrink-0 text-xs"> {identifier}-{issue.sequence_id} </span> <span>{issue.name}</span> </div> </Combobox.Option> ); });