feat: cycle list page (#577)

* style: cycle list page

* fix:typo fix
This commit is contained in:
Anmol Singh Bhatia 2023-03-29 16:27:55 +05:30 committed by GitHub
parent e3cb0ed13e
commit 248d094762
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 4 deletions

View File

@ -1,11 +1,12 @@
import { useState } from "react";
// components
import { DeleteCycleModal, SingleCycleCard } from "components/cycles";
import { DeleteCycleModal, SingleCycleCard } from "components/cycles";
import { EmptyState, Loader } from "components/ui";
// image
import emptyCycle from "public/empty-state/empty-cycle.svg";
// icon
import { XMarkIcon } from "@heroicons/react/24/outline";
// types
import { ICycle, SelectCycleType } from "types";
@ -24,6 +25,7 @@ export const CyclesList: React.FC<TCycleStatsViewProps> = ({
}) => {
const [cycleDeleteModal, setCycleDeleteModal] = useState(false);
const [selectedCycleForDelete, setSelectedCycleForDelete] = useState<SelectCycleType>();
const [showNoCurrentCycleMessage, setShowNoCurrentCycleMessage] = useState(true);
const handleDeleteCycle = (cycle: ICycle) => {
setSelectedCycleForDelete({ ...cycle, actionType: "delete" });
@ -58,6 +60,15 @@ export const CyclesList: React.FC<TCycleStatsViewProps> = ({
/>
))}
</div>
) : type === "current" ? (
showNoCurrentCycleMessage && (
<div className="flex items-center justify-between bg-white w-full px-6 py-4 rounded-[10px]">
<h3 className="text-base font-medium text-black "> No current cycle is present.</h3>
<button onClick={() => setShowNoCurrentCycleMessage(false)}>
<XMarkIcon className="h-4 w-4" />
</button>
</div>
)
) : (
<EmptyState
type="cycle"

View File

@ -113,7 +113,9 @@ const ProjectCycles: NextPage<UserAuth> = (props) => {
/>
<div className="space-y-8">
<div className="flex flex-col gap-5">
<h3 className="text-3xl font-semibold text-black">Current Cycle</h3>
{currentAndUpcomingCycles && currentAndUpcomingCycles.current_cycle.length > 0 && (
<h3 className="text-3xl font-semibold text-black">Current Cycle</h3>
)}
<div className="space-y-5">
<CyclesList
cycles={currentAndUpcomingCycles?.current_cycle}
@ -124,7 +126,7 @@ const ProjectCycles: NextPage<UserAuth> = (props) => {
</div>
</div>
<div className="flex flex-col gap-5">
<h3 className="text-3xl font-semibold text-black">Others</h3>
<h3 className="text-3xl font-semibold text-black">Other Cycles</h3>
<div>
<Tab.Group>
<Tab.List