Adding postpone button

lukdog · Feb 9, 2024 · 1330bf6 · 1330bf6
1 parent 432ab27
commit 1330bf6
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 8 deletions.
diff --git a/src/components/Stage/index.tsx b/src/components/Stage/index.tsx
@@ -8,9 +8,10 @@ type StageProps = {
   index: number;
   onCompleted: () => void;
   onNext: () => void;
+  onPostpone: () => void;
 };
 
-export default function Stage({ member, onCompleted, onNext, index }: StageProps) {
+export default function Stage({ member, onCompleted, onNext, index, onPostpone }: StageProps) {
   const [currentTime, setCurrentTime] = useState(0);
 
   useEffect(() => {
@@ -48,6 +49,12 @@ export default function Stage({ member, onCompleted, onNext, index }: StageProps
         ></CountdownCircleTimer>
       </div>
       <div className="m-auto flex w-fit flex-row">
+        <h1
+          onClick={onPostpone}
+          className="mx-2 w-fit cursor-pointer rounded-md bg-orange-600 px-2 py-1 text-center text-2xl font-bold text-white dark:text-text-dark"
+        >
+          POSTPONE
+        </h1>
         <h1
           onClick={addBonusTime}
           className="mx-2 w-fit cursor-pointer rounded-md bg-orange-600 px-2 py-1 text-center text-2xl font-bold text-white dark:text-text-dark"

diff --git a/src/components/StandupTimer/index.tsx b/src/components/StandupTimer/index.tsx
@@ -19,32 +19,45 @@ export default function StandupTimer({ members }: StandupTimerProps) {
     }
   };
 
+  const onPostpone = () => {
+    if (currentMember < members.length - 1) {
+      members.push(members[currentMember]);
+      setCurrentMember(currentMember + 1);
+    }
+  };
+
   return (
     <div className="mx-auto grid max-w-2xl py-4">
       {!completed && (
         <>
-          <Stage member={members[currentMember]} index={currentMember} onCompleted={onNext} onNext={onNext} />
+          <Stage
+            member={members[currentMember]}
+            index={currentMember}
+            onCompleted={onNext}
+            onNext={onNext}
+            postpone={onPostpone}
+          />
           {currentMember < members.length - 1 && (
             <>
               <div className="divider-container -mt-2 flex flex-col items-center">
-                <div className="bg-orange-600 relative z-10 h-4 w-4 rounded-full dark:brightness-75"></div>
-                <div className="bg-gray-200 dark:bg-gray-500 -mt-2 h-24 w-1 rounded-full"></div>
+                <div className="relative z-10 h-4 w-4 rounded-full bg-orange-600 dark:brightness-75"></div>
+                <div className="-mt-2 h-24 w-1 rounded-full bg-gray-200 dark:bg-gray-500"></div>
               </div>
               <Card>
-                <h1 className="text-orange-600 absolute -top-10 text-4xl font-bold md:-left-10 md:-top-10">Next One</h1>
+                <h1 className="absolute -top-10 text-4xl font-bold text-orange-600 md:-left-10 md:-top-10">Next One</h1>
                 <h1 className="text-center text-2xl font-semibold dark:text-text-dark">
                   {members[currentMember + 1].name}
                 </h1>
-                <p className="text-gray-500 text-center dark:text-text-dark">{members[currentMember + 1].role}</p>
+                <p className="text-center text-gray-500 dark:text-text-dark">{members[currentMember + 1].role}</p>
               </Card>
             </>
           )}
         </>
       )}
       {completed && (
         <Card>
-          <h1 className="text-orange-600 p-2 text-center text-4xl font-semibold">Standup completed 🚀</h1>
-          <h2 className="dark:text-gray-400 p-2 text-center text-2xl">See you tomorrow 👋🏼</h2>
+          <h1 className="p-2 text-center text-4xl font-semibold text-orange-600">Standup completed 🚀</h1>
+          <h2 className="p-2 text-center text-2xl dark:text-gray-400">See you tomorrow 👋🏼</h2>
         </Card>
       )}
     </div>