import { FC } from "react"; import { observer } from "mobx-react-lite"; // components import { CyclePeekOverview, CyclesBoardCard } from "components/cycles"; import { EmptyState } from "components/empty-state"; // constants import { EMPTY_STATE_DETAILS } from "constants/empty-state"; export interface ICyclesBoard { cycleIds: string[]; filter: string; workspaceSlug: string; projectId: string; peekCycle: string | undefined; } export const CyclesBoard: FC<ICyclesBoard> = observer((props) => { const { cycleIds, filter, workspaceSlug, projectId, peekCycle } = props; return ( <> {cycleIds?.length > 0 ? ( <div className="h-full w-full"> <div className="flex h-full w-full justify-between"> <div className={`grid h-full w-full grid-cols-1 gap-6 overflow-y-auto p-8 ${ peekCycle ? "lg:grid-cols-1 xl:grid-cols-2 3xl:grid-cols-3" : "lg:grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4" } auto-rows-max transition-all vertical-scrollbar scrollbar-lg`} > {cycleIds.map((cycleId) => ( <CyclesBoardCard key={cycleId} workspaceSlug={workspaceSlug} projectId={projectId} cycleId={cycleId} /> ))} </div> <CyclePeekOverview projectId={projectId?.toString() ?? ""} workspaceSlug={workspaceSlug?.toString() ?? ""} /> </div> </div> ) : ( <EmptyState type={`project-cycle-${filter}` as keyof typeof EMPTY_STATE_DETAILS} size="sm" /> )} </> ); });