import React from "react"; import dynamic from "next/dynamic"; // headless ui import { Tab } from "@headlessui/react"; // hooks import useLocalStorage from "hooks/use-local-storage"; // components import { ActiveCycleDetails, CompletedCyclesListProps, AllCyclesBoard, AllCyclesList, CompletedCycles, } from "components/cycles"; // ui import { EmptyState, Loader } from "components/ui"; // icons import { ListBulletIcon, Squares2X2Icon } from "@heroicons/react/24/outline"; import emptyCycle from "public/empty-state/empty-cycle.svg"; // types import { SelectCycleType, ICycle, CurrentAndUpcomingCyclesResponse, DraftCyclesResponse, } from "types"; type Props = { setSelectedCycle: React.Dispatch>; setCreateUpdateCycleModal: React.Dispatch>; cyclesCompleteList: ICycle[] | undefined; currentAndUpcomingCycles: CurrentAndUpcomingCyclesResponse | undefined; draftCycles: DraftCyclesResponse | undefined; }; export const CyclesView: React.FC = ({ setSelectedCycle, setCreateUpdateCycleModal, cyclesCompleteList, currentAndUpcomingCycles, draftCycles, }) => { const { storedValue: cycleTab, setValue: setCycleTab } = useLocalStorage("cycleTab", "All"); const { storedValue: cycleView, setValue: setCycleView } = useLocalStorage("cycleView", "list"); const currentTabValue = (tab: string | null) => { switch (tab) { case "All": return 0; case "Active": return 1; case "Upcoming": return 2; case "Completed": return 3; case "Drafts": return 4; default: return 0; } }; const CompletedCycles = dynamic( () => import("components/cycles").then((a) => a.CompletedCycles), { ssr: false, loading: () => ( ), } ); return (
{ switch (i) { case 0: return setCycleTab("All"); case 1: return setCycleTab("Active"); case 2: return setCycleTab("Upcoming"); case 3: return setCycleTab("Completed"); case 4: return setCycleTab("Drafts"); default: return setCycleTab("All"); } }} > {" "}
{["All", "Active", "Upcoming", "Completed", "Drafts"].map((tab, index) => ( `rounded-3xl border px-6 py-1 outline-none ${ selected ? "border-brand-accent bg-brand-accent text-white font-medium" : "border-brand-base bg-brand-base hover:bg-brand-surface-2" }` } > {tab} ))} {cycleTab !== "Active" && (
)}
{cycleView === "list" && ( )} {cycleView === "board" && ( )} {currentAndUpcomingCycles?.current_cycle?.[0] ? ( ) : ( )} {cycleView === "list" && ( )} {cycleView === "board" && ( )} {cycleView === "list" && ( )} {cycleView === "board" && ( )}
); };