basic animation when a choice is made

src/app/globals.css

@@ -78,5 +78,6 @@
     --brand: 181 69% 14%;
     --brand-600: 166 12% 48%;
     --brand-300: 167 11% 69%;
+    --brand-100: 129 18% 92%;
   }
 }

src/components/quiz.tsx

@@ -57,29 +57,41 @@ export function Quiz() {
   const isAccepted = questions.every((q) => q.status === "complete");
 
   function handleOptionClick(option: Option) {
+    // Update the current question with its response and "complete" status
+    // and set the next question as "upcoming"
     setQuestions((prevQuestions) =>
-      // Update the current question with its response and "complete" status
-      // and set the next question as "upcoming"
       prevQuestions.map((q, i) => {
         if (i === currentIndex) {
           return {
             ...q,
             response: option,
             status: "complete",
           };
-        } else if (i === currentIndex + 1 && q.status === "upcoming") {
-          return {
-            ...q,
-            status: "current",
-          };
         }
+
         return q;
       }),
     );
 
-    if (currentIndex < questions.length - 1) {
-      setCurrentIndex(currentIndex + 1);
-    }
+    // Add a small delay to show the selected option before moving to the next question
+    setTimeout(() => {
+      setQuestions((prevQuestions) =>
+        prevQuestions.map((q, i) => {
+          if (i === currentIndex + 1 && q.status === "upcoming") {
+            return {
+              ...q,
+              status: "current",
+            };
+          }
+
+          return q;
+        }),
+      );
+
+      if (currentIndex < questions.length - 1) {
+        setCurrentIndex(currentIndex + 1);
+      }
+    }, 1000);
   }
 
   // If the number of options is a multiple of 3, use 3 columns, otherwise 2
@@ -117,6 +129,9 @@ export function Quiz() {
                   variant="outline"
                   className={cn("mt-2 h-auto flex flex-col relative", {
                     "ring-2 ring-primary": isOptionSelected,
+                    // TODO: only apply this after clicking the option because otherwise, when navigating back to a question,
+                    // the selected option will blink.
+                    "animate-blink": isOptionSelected,
                   })}
                 >
                   {isOptionSelected ? (

tailwind.config.ts

@@ -57,6 +57,7 @@ const config = {
           DEFAULT: "hsl(var(--brand))",
           600: "hsl(var(--brand-600))",
           300: "hsl(var(--brand-300))",
+          100: "hsl(var(--brand-100))",
         },
       },
       borderRadius: {
@@ -73,10 +74,15 @@ const config = {
           from: { height: "var(--radix-accordion-content-height)" },
           to: { height: "0" },
         },
+        blink: {
+          "0%, 50%, 100%": { backgroundColor: "transparent" },
+          "25%, 75%": { backgroundColor: "hsl(var(--brand-100))" },
+        },
       },
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
+        blink: "blink 0.6s cubic-bezier(0.4, 0, 0.2, 1) both",
       },
       fontFamily: {
         sans: ["var(--font-sans)", ...fontFamily.sans],