From 639d4e4df6fd74585ea268a05afb9cc7a77d5110 Mon Sep 17 00:00:00 2001
From: Aaron McAdam <aaron@aaronmcadam.com>
Date: Mon, 5 Aug 2024 15:46:55 +0100
Subject: [PATCH] refactor: extract a component for the quiz option

---
 src/components/quiz-option.tsx | 37 ++++++++++++++++++++++++++++++++++
 src/components/quiz.tsx        | 23 ++++++---------------
 2 files changed, 43 insertions(+), 17 deletions(-)
 create mode 100644 src/components/quiz-option.tsx

diff --git a/src/components/quiz-option.tsx b/src/components/quiz-option.tsx
new file mode 100644
index 0000000..cb70ddd
--- /dev/null
+++ b/src/components/quiz-option.tsx
@@ -0,0 +1,37 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { Button } from "./ui/button";
+import { CircleCheck } from "lucide-react";
+
+export type QuizOptionProps = {
+  onClick: () => void;
+  isSelected: boolean;
+  display: string;
+  value: string | boolean;
+};
+
+export const QuizOption = React.memo(function QuizOption({
+  onClick,
+  isSelected,
+  display,
+  value,
+}: QuizOptionProps) {
+  return (
+    <Button
+      onClick={onClick}
+      variant="outline"
+      className={cn("mt-2 h-auto flex flex-col relative", {
+        "ring-2 ring-primary": isSelected,
+        // TODO: only apply this after clicking the option because otherwise, when navigating back to a question,
+        // the selected option will blink.
+        "animate-blink": isSelected,
+      })}
+    >
+      {isSelected ? (
+        <CircleCheck className="h-5 w-5 text-primary absolute top-2 right-2" />
+      ) : null}
+      <span dangerouslySetInnerHTML={{ __html: display }} />
+      {value}
+    </Button>
+  );
+});
diff --git a/src/components/quiz.tsx b/src/components/quiz.tsx
index 5d53571..82ec03d 100644
--- a/src/components/quiz.tsx
+++ b/src/components/quiz.tsx
@@ -2,10 +2,9 @@
 
 import * as React from "react";
 import { cn } from "@/lib/utils";
-import { Button } from "./ui/button";
-import { CircleCheck } from "lucide-react";
 import { QuizNavigation } from "./quiz-navigation";
 import { QuizResult } from "./quiz-result";
+import { QuizOption } from "./quiz-option";
 
 type Option = {
   display: string;
@@ -157,23 +156,13 @@ export function Quiz() {
               const isOptionSelected = currentQuestion.response === o;
 
               return (
-                <Button
+                <QuizOption
                   key={i}
                   onClick={() => handleOptionClick(o)}
-                  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 ? (
-                    <CircleCheck className="h-5 w-5 text-primary absolute top-2 right-2" />
-                  ) : null}
-                  <span dangerouslySetInnerHTML={{ __html: o.display }} />
-                  {o.value}
-                </Button>
+                  isSelected={isOptionSelected}
+                  display={o.display}
+                  value={o.value}
+                />
               );
             })}
           </div>