Create ScoreButton component

Author: mahutt

cue-client/src/components/study-stack.tsx

@@ -9,6 +9,7 @@ import { useNotification } from '../hooks/notification-hook';
 import { Ban, Check, Frown, Meh, Smile } from 'lucide-react';
 import { Button } from './ui/button';
 import ScoreBoard from './study/score-board';
+import ScoreButton from './study/score-button';
 
 interface ScoredCard extends Card {
     score: number;
@@ -156,31 +157,10 @@ function CardFlipper({
                     readOnly={!editing}
                 />
             )}
-            <div className="scores" style={{ display: !editing && showScores ? 'flex' : 'none' }}>
-                <div
-                    onClick={(e) => {
-                        e.stopPropagation();
-                        updateScore(0);
-                    }}
-                >
-                    <Frown size={16} />
-                </div>
-                <div
-                    onClick={(e) => {
-                        e.stopPropagation();
-                        updateScore(1);
-                    }}
-                >
-                    <Meh size={16} />
-                </div>
-                <div
-                    onClick={(e) => {
-                        e.stopPropagation();
-                        updateScore(2);
-                    }}
-                >
-                    <Smile size={16} />
-                </div>
+            <div className="flex-row gap-2" style={{ display: !editing && showScores ? 'flex' : 'none' }}>
+                <ScoreButton score={0} updateScore={updateScore} />
+                <ScoreButton score={1} updateScore={updateScore} />
+                <ScoreButton score={2} updateScore={updateScore} />
             </div>
             <div className="flex-row gap-2" style={{ display: editing ? 'flex' : 'none' }}>
                 <Button

cue-client/src/components/study/score-button.tsx

@@ -0,0 +1,27 @@
+import { Frown, LucideIcon, Meh, Smile } from 'lucide-react';
+
+const iconByScore: Record<number, LucideIcon> = {
+    0: Frown,
+    1: Meh,
+    2: Smile,
+};
+
+export default function ScoreButton({
+    score,
+    updateScore,
+}: {
+    score: number;
+    updateScore: (score: number) => Promise<void>;
+}) {
+    if (score < 0 || score > 2) return null;
+    const Icon = iconByScore[score];
+    return (
+        <button
+            onClick={() => updateScore(score)}
+            aria-label={`Set score ${score}`}
+            className="text-white bg-black w-12 h-12 rounded-full flex items-center justify-center cursor-pointer transition-all duration-150 hover:bg-gray-800 hover:scale-105 active:scale-95"
+        >
+            <Icon size={16} />
+        </button>
+    );
+}

cue-client/src/index.css

@@ -194,24 +194,6 @@ main #content {
     background-color: var(--green);
 }
 
-.scores {
-    flex-direction: row;
-    gap: 0.5rem;
-}
-.scores div {
-    color: white;
-    background-color: black;
-    border-radius: 3rem;
-    width: 3rem;
-    height: 3rem;
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    cursor: pointer;
-}
-
 @theme inline {
     --radius-sm: calc(var(--radius) - 4px);
     --radius-md: calc(var(--radius) - 2px);