// react import { useState } from "react"; // components import { DeleteCycleModal, SingleCycleCard } from "components/cycles"; // types import { ICycle, SelectCycleType } from "types"; import { CompletedCycleIcon, CurrentCycleIcon, UpcomingCycleIcon } from "components/icons"; type TCycleStatsViewProps = { cycles: ICycle[]; setCreateUpdateCycleModal: React.Dispatch>; setSelectedCycle: React.Dispatch>; type: "current" | "upcoming" | "completed"; }; export const CyclesListView: React.FC = ({ cycles, setCreateUpdateCycleModal, setSelectedCycle, type, }) => { const [cycleDeleteModal, setCycleDeleteModal] = useState(false); const [selectedCycleForDelete, setSelectedCycleForDelete] = useState(); const handleDeleteCycle = (cycle: ICycle) => { setSelectedCycleForDelete({ ...cycle, actionType: "delete" }); setCycleDeleteModal(true); }; const handleEditCycle = (cycle: ICycle) => { setSelectedCycle({ ...cycle, actionType: "edit" }); setCreateUpdateCycleModal(true); }; return ( <> {cycles.length > 0 ? ( cycles.map((cycle) => ( handleDeleteCycle(cycle)} handleEditCycle={() => handleEditCycle(cycle)} /> )) ) : (
{type === "upcoming" ? ( ) : type === "completed" ? ( ) : ( )}

No {type} {type === "current" ? "cycle" : "cycles"} yet. Create with{" "}
Q
.

)} ); };