style: empty cycle state (#410)

apps/app/components/cycles/cycles-list.tsx

@@ -1,12 +1,10 @@
 import { useState } from "react";
 
 // components
-import { DeleteCycleModal, SingleCycleCard } from "components/cycles";
+import { DeleteCycleModal, EmptyCycle, SingleCycleCard } from "components/cycles";
-// icons
+import { Loader } from "components/ui";
-import { CompletedCycleIcon, CurrentCycleIcon, UpcomingCycleIcon } from "components/icons";
 // types
 import { ICycle, SelectCycleType } from "types";
-import { Loader } from "components/ui";
 
 type TCycleStatsViewProps = {
   cycles: ICycle[] | undefined;
@@ -58,19 +56,7 @@ export const CyclesList: React.FC<TCycleStatsViewProps> = ({
             ))}
           </div>
         ) : (
-          <div className="flex flex-col items-center justify-center gap-4 text-center">
+          <EmptyCycle/>
-            {type === "upcoming" ? (
-              <UpcomingCycleIcon height="56" width="56" />
-            ) : type === "draft" ? (
-              <CompletedCycleIcon height="56" width="56" />
-            ) : (
-              <CurrentCycleIcon height="56" width="56" />
-            )}
-            <h3 className="text-gray-500">
-              No {type} {type === "current" ? "cycle" : "cycles"} yet. Create with{" "}
-              <pre className="inline rounded bg-gray-200 px-2 py-1">Q</pre>.
-            </h3>
-          </div>
         )
       ) : (
         <Loader className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">

apps/app/components/cycles/empty-cycle.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+import { LinearProgressIndicator } from "components/ui";
+
+export const EmptyCycle = () => {
+  const emptyCycleData = [
+    {
+      id: 1,
+      name: "backlog",
+      value: 20,
+      color: "#DEE2E6",
+    },
+    {
+      id: 2,
+      name: "unstarted",
+      value: 14,
+      color: "#26B5CE",
+    },
+    {
+      id: 3,
+      name: "started",
+      value: 27,
+      color: "#F7AE59",
+    },
+    {
+      id: 4,
+      name: "cancelled",
+      value: 15,
+      color: "#D687FF",
+    },
+    {
+      id: 5,
+      name: "completed",
+      value: 14,
+      color: "#09A953",
+    },
+  ];
+  return (
+    <div className="flex h-full w-full flex-col items-center justify-center gap-5 ">
+      <div className="relative h-32 w-72">
+        <div className="absolute right-0 top-0 flex w-64 flex-col rounded-[10px] bg-white text-xs shadow">
+          <div className="flex flex-col items-start justify-center gap-2.5 p-3.5">
+            <span className="text-sm font-semibold text-black">Cycle Name</span>
+            <div className="flex h-full w-full items-center gap-4">
+              <span className="h-2 w-20 rounded-full bg-gray-200" />
+              <span className="h-2 w-20 rounded-full bg-gray-200" />
+            </div>
+          </div>
+
+          <div className="border-t border-gray-200 bg-gray-100 px-4 py-3">
+            <LinearProgressIndicator data={emptyCycleData} />
+          </div>
+        </div>
+
+        <div className="absolute left-0 bottom-0 flex w-64 flex-col rounded-[10px] bg-white text-xs shadow">
+          <div className="flex flex-col items-start justify-center gap-2.5 p-3.5">
+            <span className="text-sm font-semibold text-black">Cycle Name</span>
+            <div className="flex h-full w-full items-center gap-4">
+              <span className="h-2 w-20 rounded-full bg-gray-200" />
+              <span className="h-2 w-20 rounded-full bg-gray-200" />
+            </div>
+          </div>
+
+          <div className="border-t border-gray-200 bg-gray-100 px-4 py-3">
+            <LinearProgressIndicator data={emptyCycleData} />
+          </div>
+        </div>
+      </div>
+
+      <div className="flex flex-col items-center justify-center gap-4 text-center ">
+        <h3 className="text-xl font-semibold">Create New Cycle</h3>
+        <p className="text-sm text-gray-500">
+          Sprint more effectively with Cycles by confining your project <br /> to a fixed amount of
+          time. Create new cycle now.
+        </p>
+      </div>
+    </div>
+  );
+};

apps/app/components/cycles/index.ts

@@ -6,3 +6,4 @@ export * from "./modal";
 export * from "./select";
 export * from "./sidebar";
 export * from "./single-cycle-card";
+export * from "./empty-cycle";