import { FC } from "react"; import { observer } from "mobx-react"; import Image from "next/image"; import { useTheme } from "next-themes"; // components import { UpcomingCycleListItem } from "@/components/cycles"; // hooks import { useCycle } from "@/hooks/store"; type Props = { handleEmptyStateAction: () => void; }; export const UpcomingCyclesList: FC<Props> = observer((props) => { const { handleEmptyStateAction } = props; // store hooks const { currentProjectUpcomingCycleIds } = useCycle(); // theme const { resolvedTheme } = useTheme(); const resolvedEmptyStatePath = `/empty-state/active-cycle/cycle-${resolvedTheme === "light" ? "light" : "dark"}.webp`; if (!currentProjectUpcomingCycleIds) return null; return ( <div> <div className="bg-custom-background-80 font-semibold text-sm py-1 px-2 rounded inline-block text-custom-text-400"> Next cycles </div> {currentProjectUpcomingCycleIds.length > 0 ? ( <div className="mt-2 divide-y-[0.5px] divide-custom-border-200 border-b-[0.5px] border-custom-border-200"> {currentProjectUpcomingCycleIds.map((cycleId) => ( <UpcomingCycleListItem key={cycleId} cycleId={cycleId} /> ))} </div> ) : ( <div className="flex items-center justify-center h-full w-full py-20"> <div className="text-center flex flex-col gap-2.5 items-center"> <div className="h-24 w-24"> <Image src={resolvedEmptyStatePath} alt="button image" width={78} height={78} layout="responsive" lazyBoundary="100%" /> </div> <h5 className="text-xl font-medium mb-1">No upcoming cycles</h5> <p className="text-custom-text-400 text-base"> Create new cycles to find them here or check <br /> {"'"}All{"'"} cycles tab to see all cycles or{" "} <button type="button" className="text-custom-primary-100 font-medium" onClick={handleEmptyStateAction}> click here </button> </p> </div> </div> )} </div> ); });