style: new cycle list (#374)
* feat: short date helper function * feat: linear progress indicator added * style: new cyce list and cycle card design * feat: short date function improve * feat: linear progress indicator improvement * style: cycle card and progress indicator * fix: helper date function and progress indicator fix * fix: build error --------- Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>
This commit is contained in:
parent
fef72ccc70
commit
786816ed41
7 changed files with 285 additions and 180 deletions
|
|
@ -1,10 +1,11 @@
|
|||
// react
|
||||
import { useState } from "react";
|
||||
|
||||
// components
|
||||
import { DeleteCycleModal, SingleCycleCard } from "components/cycles";
|
||||
// icons
|
||||
import { CompletedCycleIcon, CurrentCycleIcon, UpcomingCycleIcon } from "components/icons";
|
||||
// types
|
||||
import { ICycle, SelectCycleType } from "types";
|
||||
import { CompletedCycleIcon, CurrentCycleIcon, UpcomingCycleIcon } from "components/icons";
|
||||
|
||||
type TCycleStatsViewProps = {
|
||||
cycles: ICycle[];
|
||||
|
|
@ -44,14 +45,16 @@ export const CyclesList: React.FC<TCycleStatsViewProps> = ({
|
|||
data={selectedCycleForDelete}
|
||||
/>
|
||||
{cycles.length > 0 ? (
|
||||
cycles.map((cycle) => (
|
||||
<SingleCycleCard
|
||||
key={cycle.id}
|
||||
cycle={cycle}
|
||||
handleDeleteCycle={() => handleDeleteCycle(cycle)}
|
||||
handleEditCycle={() => handleEditCycle(cycle)}
|
||||
/>
|
||||
))
|
||||
<div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
|
||||
{cycles.map((cycle) => (
|
||||
<SingleCycleCard
|
||||
key={cycle.id}
|
||||
cycle={cycle}
|
||||
handleDeleteCycle={() => handleDeleteCycle(cycle)}
|
||||
handleEditCycle={() => handleEditCycle(cycle)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center gap-4 text-center">
|
||||
{type === "upcoming" ? (
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue