Merge branch 'release' into feature/sample-dashboard-page

DemocracyDevelopers · Oct 5, 2024 · de54c8a · de54c8a
2 parents 5845b4b + fac196c
commit de54c8a
Show file tree

Hide file tree

Showing 9 changed files with 2,534 additions and 92 deletions.
diff --git a/app/svg-test/components/candidate-list-bar.tsx b/app/svg-test/components/candidate-list-bar.tsx
@@ -1,14 +1,30 @@
-import { Input } from "@/components/ui/input";
+import { Candidate } from "../constants";
 import SearchDropdown from "./search-dropdown";
-import { candidateList } from "../constants";
 
-function CandidateListBar() {
+type CandidateListBarProps = {
+  selectedWinnerId: number;
+  handleSelectWinner: (id: number) => void;
+  useAvatar: boolean;
+  candidateList: Candidate[];
+};
+
+function CandidateListBar({
+  selectedWinnerId,
+  handleSelectWinner,
+  useAvatar,
+  candidateList,
+}: CandidateListBarProps) {
   return (
-    <div className="flex justify-center">
+    <div className="flex justify-center mb-5">
       {candidateList.map((candidate) => (
-        <div key={candidate.id} className="flex flex-col items-center w-14">
-          <div className="w-8 h-8 bg-gray-300 rounded-full"></div>
-          <div>{candidate.name}</div>
+        <div key={candidate.id} className="flex flex-col items-center w-12">
+          <div
+            // onClick={() => setSelectedWinnerId(candidate.id)}
+            onClick={() => handleSelectWinner(candidate.id)}
+            className="w-10 h-10 rounded-full cursor-pointer flex items-center justify-center border-2 border-black text-xs"
+          >
+            {candidate.name}
+          </div>
         </div>
       ))}
       <SearchDropdown />

diff --git a/app/svg-test/components/step-by-step.tsx b/app/svg-test/components/step-by-step.tsx
@@ -1,16 +1,26 @@
-const stepsNum = 5;
+import { Dispatch, SetStateAction } from "react";
 
-function StepByStep() {
+type StepByStepProps = {
+  stepSize?: number;
+  selectedStep: number;
+  setSelectedStep: Dispatch<SetStateAction<number>>;
+};
+function StepByStep({
+  stepSize = 5,
+  selectedStep,
+  setSelectedStep,
+}: StepByStepProps) {
   return (
     <div className="relative flex flex-col">
       <div
         className="absolute h-full w-0.5 bg-[#bfbfbf] left-1/2 transform -translate-x-1/2 z-0"
-        style={{ top: "20px", height: `${(stepsNum - 1) * 50}px` }}
+        style={{ top: "20px", height: `${(stepSize - 1) * 50}px` }}
       />
-      {Array.from({ length: stepsNum }, (_, index) => (
+      {Array.from({ length: stepSize }, (_, index) => (
         <div
           key={index}
-          className="rounded-full bg-[#b3b3b3] w-10 h-10 text-center leading-10 mb-2 cursor-pointer z-10 font-bold"
+          onClick={() => setSelectedStep(index + 1)}
+          className={`rounded-full w-10 h-10 text-center leading-10 mb-2 cursor-pointer z-10 font-bold ${selectedStep === index + 1 ? "bg-[#18a0fb]" : "bg-[#b3b3b3]"}`}
         >
           {index + 1}
         </div>

diff --git a/app/svg-test/constants.ts b/app/svg-test/constants.ts
@@ -64,77 +64,90 @@ const dataOneTree = {
     },
   ],
 };
-const dataOneTree2 =
-  // name: "root",
-  // children: [
-  {
-    name: "Alice",
-    children: [
-      {
-        name: "Bob",
-        children: [
-          {
-            name: "Chuan",
-            children: [
-              {
-                name: "Diego",
-              },
-            ],
-          },
-          {
-            name: "Diego",
-            children: [
-              {
-                name: "Chuan",
-              },
-            ],
-          },
-        ],
-      },
-      {
-        name: "Chuan",
-        children: [
-          {
-            name: "Bob",
-            children: [
-              {
-                name: "Diego",
-              },
-            ],
-          },
-          {
-            name: "Diego",
-            children: [
-              {
-                name: "Bob",
-              },
-            ],
-          },
-        ],
-      },
-      {
-        name: "Diego",
-        children: [
-          {
-            name: "Bob",
-            children: [
-              {
-                name: "Chuan",
-              },
-            ],
-          },
-          {
-            name: "Chuan",
-            children: [
-              {
-                name: "Bob",
-              },
-            ],
-          },
-        ],
-      },
-    ],
-  };
+const dataOneTree2 = {
+  id: 1,
+  name: "Alice",
+  children: [
+    {
+      id: 2,
+      name: "Bob",
+      children: [
+        {
+          id: 3,
+          name: "Chuan",
+          children: [
+            {
+              id: 4,
+              name: "Diego",
+            },
+          ],
+        },
+        {
+          id: 4,
+          name: "Diego",
+          children: [
+            {
+              id: 3,
+              name: "Chuan",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      id: 3,
+      name: "Chuan",
+      children: [
+        {
+          id: 2,
+          name: "Bob",
+          children: [
+            {
+              id: 4,
+              name: "Diego",
+            },
+          ],
+        },
+        {
+          id: 4,
+          name: "Diego",
+          children: [
+            {
+              id: 2,
+              name: "Bob",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      id: 4,
+      name: "Diego",
+      children: [
+        {
+          id: 2,
+          name: "Bob",
+          children: [
+            {
+              id: 3,
+              name: "Chuan",
+            },
+          ],
+        },
+        {
+          id: 3,
+          name: "Chuan",
+          children: [
+            {
+              id: 2,
+              name: "Bob",
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
 
 // step by step
 const dataStepByStep = {
@@ -213,28 +226,28 @@ const dataMultiWinner = [
 type Candidate = {
   id: number;
   name: string;
-  avatar: string;
+  color?: string;
 };
 const candidateList: Candidate[] = [
   {
     id: 1,
     name: "Alice",
-    avatar: "",
+    color: "",
   },
   {
     id: 2,
     name: "Bob",
-    avatar: "",
+    color: "",
   },
   {
     id: 3,
     name: "Chuan",
-    avatar: "",
+    color: "",
   },
   {
     id: 4,
     name: "Diego",
-    avatar: "",
+    color: "",
   },
 ];