import { FC } from "react"; import { observer } from "mobx-react-lite"; import { ChevronRight } from "lucide-react"; import { Disclosure } from "@headlessui/react"; // components import { CyclePeekOverview, CyclesBoardMap } from "@/components/cycles"; // helpers import { cn } from "@/helpers/common.helper"; export interface ICyclesBoard { completedCycleIds: string[]; cycleIds: string[]; workspaceSlug: string; projectId: string; peekCycle: string | undefined; } export const CyclesBoard: FC<ICyclesBoard> = observer((props) => { const { completedCycleIds, cycleIds, workspaceSlug, projectId, peekCycle } = props; return ( <div className="h-full w-full"> <div className="flex h-full w-full justify-between"> <div className="h-full w-full flex flex-col p-8 space-y-8 vertical-scrollbar scrollbar-lg"> {cycleIds.length > 0 && ( <CyclesBoardMap cycleIds={cycleIds} peekCycle={peekCycle} projectId={projectId} workspaceSlug={workspaceSlug} /> )} {completedCycleIds.length !== 0 && ( <Disclosure as="div" className="space-y-4"> <Disclosure.Button className="bg-custom-background-80 font-semibold text-sm py-1 px-2 rounded flex items-center gap-1"> {({ open }) => ( <> Completed cycles ({completedCycleIds.length}) <ChevronRight className={cn("h-3 w-3 transition-all", { "rotate-90": open, })} /> </> )} </Disclosure.Button> <Disclosure.Panel> <CyclesBoardMap cycleIds={completedCycleIds} peekCycle={peekCycle} projectId={projectId} workspaceSlug={workspaceSlug} /> </Disclosure.Panel> </Disclosure> )} </div> <CyclePeekOverview projectId={projectId} workspaceSlug={workspaceSlug} /> </div> </div> ); });