all logic for calculating the score + error + add delete/quest api

app/api/[questId]/score/route.ts

@@ -35,7 +35,7 @@ export async function POST(request: NextRequest, { params }: { params: { questId
   if (quest.prompt_id_correct !== promptId) {
     return Response.json({
       ok: false,
-      message: "Wrong answer",
+      resultId: quest.prompt_id_correct,
     }, { statusText: "Wrong answer", status: 400 });
   }
 

app/api/bulk-delete/route.ts

@@ -0,0 +1,19 @@
+import { NextRequest } from "next/server";
+import { PrismaClient } from '@prisma/client'
+
+const prisma = new PrismaClient()
+
+export async function DELETE(request: NextRequest) {
+  const total = await prisma.quest.deleteMany({
+    where: {
+      created_at: {
+        lt: new Date(Date.now() - 24 * 60 * 60 * 1000)
+      }
+    }
+  })
+
+  return Response.json({
+    ok: true,
+    message: `${total.count} quests deleted`
+  })
+}

app/results/page.tsx

@@ -0,0 +1,47 @@
+import Link from "next/link";
+import Image from "next/image";
+
+import { Button } from "@/components/button/button";
+import SparklingEffect from "@/assets/images/sparkles.svg";
+import SparklingEffect2 from "@/assets/images/sparkles-2.svg";
+
+export default function Home() {
+  return (
+    <div className="w-full min-h-screen mx-auto max-w-4xl relative flex items-center justify-center">
+      <div className="relative grid grid-cols-1 gap-8 py-12 px-6">
+        <h1 className="text-center text-5xl md:text-7xl font-extrabold bg-clip-text text-transparent bg-gradient-to-b from-white to-white/80 relative">
+          <Image
+            src={SparklingEffect}
+            width={30}
+            height={50}
+            alt="Sparkling effect"
+            className="absolute top-8 left-0 -translate-x-[calc(100%+1rem)]"
+          />
+          Here is your <br />
+          <span className="bg-gradient-to-tr from-green to-cyan bg-clip-text">
+            results
+          </span>{" "}
+          <Image
+            src={SparklingEffect2}
+            width={30}
+            height={50}
+            alt="Sparkling effect"
+            className="absolute -top-6 right-0 translate-x-[calc(100%+1rem)]"
+          />
+        </h1>
+        <h2 className="text-white text-xl md:text-2xl text-center font-light">
+          Congrats!
+        </h2>
+        <div className="w-full mx-auto flex items-center gap-6">
+          <Button theme="primary" className="mx-auto">
+            Share on LinkedIn
+          </Button>
+          <Button theme="primary" className="mx-auto">
+            Share on X
+          </Button>
+        </div>
+        <div className="absolute top-1/2 left-1/2 will-transform -translate-x-1/2 -translate-y-1/2 bg-gradient-to-br from-green to-cyan blur-[120px] md:blur-[140px] w-full h-full max-h-[250px] rounded-full z-[-1] opacity-40"></div>
+      </div>
+    </div>
+  );
+}

components/quizz/card/error.tsx

@@ -0,0 +1,26 @@
+import classNames from "classnames";
+import { IoCloseSharp } from "react-icons/io5";
+
+export const Error = ({
+  result,
+  prompt,
+}: {
+  result: { success: boolean; id: null | string } | null | undefined;
+  prompt: { id: string };
+}) => {
+  return (
+    <div
+      className={classNames(
+        "absolute bottom-0 w-full left-0 px-8 pb-8 flex justify-start items-center transition-all duration-200 opacity-0 pointer-events-none translate-y-full",
+        {
+          "!opacity-100 !pointer-events-auto !translate-y-0":
+            result && !result?.success && result?.id !== prompt.id,
+        }
+      )}
+    >
+      <div className="font-extrabold text-white text-3xl flex items-center justify-center transition-all duration-200 w-10 h-10 rounded-full bg-red-500">
+        <IoCloseSharp />
+      </div>
+    </div>
+  );
+};

components/quizz/{card.tsx → card/index.tsx}

@@ -3,53 +3,35 @@ import Image from "next/image";
 import Confetti from "react-confetti";
 
 import { PromptType } from "@/utils/type";
-import { useQuizz } from "./hooks/useQuizz";
+import { useQuizz } from "@/components/quizz/hooks/useQuizz";
 import classNames from "classnames";
+import { Success } from "./success";
+import { Error } from "./error";
+import { Valid } from "./valid";
 
 interface Props {
   prompt: PromptType;
 }
 
 export const Card: React.FC<Props> = ({ prompt }) => {
-  const { onScore, success } = useQuizz();
+  const { onScore, result } = useQuizz();
 
   return (
     <div
       className={classNames(
         "w-[340px] h-[340px] p-5 relative z-[1] cursor-pointer group",
         {
-          "!cursor-not-allowed": success,
+          "!cursor-not-allowed": result?.success,
         }
       )}
-      onClick={success ? () => {} : async () => await onScore(prompt.id)}
+      onClick={
+        result?.success ? () => {} : async () => await onScore(prompt.id)
+      }
     >
-      <div
-        className={classNames(
-          "absolute bottom-0 w-full left-0 px-0 py-0 flex justify-between items-center translate-y-10 transition-all duration-200",
-          {
-            "opacity-0 pointer-events-none": success !== prompt.id,
-          }
-        )}
-      >
-        <p
-          className={classNames("text-[90px] transition-all duration-200", {
-            "-translate-x-1/2 translate-y-1/2": success !== prompt.id,
-          })}
-        >
-          🎉
-        </p>
-        <p
-          className={classNames(
-            "font-extrabold text-white text-7xl pr-6 pb-10 transition-all duration-200",
-            {
-              "translate-y-full": success !== prompt.id,
-            }
-          )}
-        >
-          +1
-        </p>
-      </div>
-      {success === prompt.id && (
+      <Success result={result} prompt={prompt} />
+      <Error result={result} prompt={prompt} />
+      <Valid result={result} prompt={prompt} />
+      {result?.success && result?.id === prompt.id && (
         <Confetti width={340} height={340} numberOfPieces={100} />
       )}
       <Image
@@ -61,8 +43,11 @@ export const Card: React.FC<Props> = ({ prompt }) => {
           "object-center object-cover w-full h-full select-none hover:ring-4 ring-white transition-all duration-100",
           {
             "ring-4 !ring-[#E5AC00] hover:ring-[#E5AC00]":
-              success === prompt.id,
-            "!ring-transparent": success && success !== prompt.id,
+              result?.success && result?.id === prompt.id,
+            "!ring-transparent": result?.success && result?.id !== prompt.id,
+            "!ring-red-500 ring-4":
+              result && !result?.success && result?.id !== prompt.id,
+            "!ring-green ring-4": !result?.success && result?.id === prompt.id,
           }
         )}
       />
@@ -70,7 +55,7 @@ export const Card: React.FC<Props> = ({ prompt }) => {
         className={classNames(
           "w-full h-full blur-md lg:blur-md top-0 left-0 absolute z-[-1] opacity-20 transition-all duration-200",
           {
-            "group-hover:opacity-40": !success,
+            "group-hover:opacity-40": !result,
           }
         )}
         style={{

components/quizz/card/success.tsx

@@ -0,0 +1,39 @@
+import classNames from "classnames";
+
+export const Success = ({
+  result,
+  prompt,
+}: {
+  result: { success: boolean; id: null | string } | null | undefined;
+  prompt: { id: string };
+}) => {
+  return (
+    <div
+      className={classNames(
+        "absolute bottom-0 w-full left-0 px-0 py-0 flex justify-between items-center translate-y-10 transition-all duration-200",
+        {
+          "opacity-0 pointer-events-none":
+            !result?.success || result?.id !== prompt.id,
+        }
+      )}
+    >
+      <p
+        className={classNames("text-[90px] transition-all duration-200", {
+          "-translate-x-1/2 translate-y-1/2": result?.id !== prompt.id,
+        })}
+      >
+        🎉
+      </p>
+      <p
+        className={classNames(
+          "font-extrabold text-white text-7xl pr-6 pb-10 transition-all duration-200",
+          {
+            "translate-y-full": result?.id !== prompt.id,
+          }
+        )}
+      >
+        +1
+      </p>
+    </div>
+  );
+};

components/quizz/card/valid.tsx

@@ -0,0 +1,26 @@
+import classNames from "classnames";
+import { IoMdCheckmark } from "react-icons/io";
+
+export const Valid = ({
+  result,
+  prompt,
+}: {
+  result: { success: boolean; id: null | string } | null | undefined;
+  prompt: { id: string };
+}) => {
+  return (
+    <div
+      className={classNames(
+        "absolute bottom-0 w-full left-0 px-8 pb-8 flex justify-start items-center transition-all duration-200 opacity-0 pointer-events-none translate-y-full",
+        {
+          "!opacity-100 !pointer-events-auto !translate-y-0":
+            result && !result?.success && result?.id === prompt.id,
+        }
+      )}
+    >
+      <div className="font-extrabold text-white text-3xl flex items-center justify-center transition-all duration-200 w-10 h-10 rounded-full bg-green">
+        <IoMdCheckmark />
+      </div>
+    </div>
+  );
+};

components/quizz/hooks/useQuizz.ts

@@ -1,20 +1,32 @@
-import { useState } from "react";
+"use client";
+
 import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useRouter } from 'next/navigation'
 
 import { PromptType } from "@/utils/type";
 import { sleep } from "@/utils";
 
 export const useQuizz = () => {
   const client = useQueryClient();
+  const router = useRouter();
 
-  const { data: success } = useQuery<string | null>(['success'], () => null, {
+  const { data: result } = useQuery<{ success: boolean, id: string} | null>(['success'], () => null, {
     refetchOnWindowFocus: false,
     refetchOnMount: false,
     refetchOnReconnect: false,
     retry: false,
   });
 
-  const setSuccess = (s: string | null) => client.setQueryData(['success'], s);
+  const setResult = (s: string | null, success?: boolean) => {
+    if (!s) {
+      client.setQueryData(['success'], null);
+      return;
+    }
+    client.setQueryData(['success'], {
+      success,
+      id: s,
+    });
+  }
 
   const { data: score } = useQuery<number>(['score'], () => 0, {
     refetchOnWindowFocus: false,
@@ -34,12 +46,16 @@ export const useQuizz = () => {
       client.setQueryData(['score'], (score: number | undefined) => {
         return (score ?? 0) + 1;
       });
-      setSuccess(id);
-      await sleep(3000);
-      setSuccess(null);
-      await sleep(100);
+    }
+    setResult(response.ok ? id : response.resultId, response?.ok);
+    await sleep(3000);
+    setResult(null);
+    await sleep(100);
+    if (response?.ok) {
       client.invalidateQueries(['quizz']);
-      refetch()
+      await refetch()
+    } else {
+      return router.push('/results');
     }
   };
 
@@ -61,6 +77,6 @@ export const useQuizz = () => {
     question: data?.question,
     onScore,
     score,
-    success
+    result,
   }
 }

components/quizz/index.tsx

@@ -1,7 +1,5 @@
 "use client";
 
-import Image from "next/image";
-
 import { useQuizz } from "./hooks/useQuizz";
 import { PromptType } from "@/utils/type";
 import { Card } from "./card";

package-lock.json

@@ -19,6 +19,7 @@
         "react": "^18",
         "react-confetti": "^6.1.0",
         "react-dom": "^18",
+        "react-icons": "^4.12.0",
         "react-use": "^17.4.0"
       },
       "devDependencies": {
@@ -683,6 +684,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -691,6 +693,7 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -956,7 +959,8 @@
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true
     },
     "node_modules/binary-extensions": {
       "version": "2.2.0",
@@ -971,6 +975,7 @@
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
       "dependencies": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -1086,6 +1091,7 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
       "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
       "dependencies": {
         "ansi-styles": "^4.1.0",
         "supports-color": "^7.1.0"
@@ -1150,6 +1156,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
       "dependencies": {
         "color-name": "~1.1.4"
       },
@@ -1160,7 +1167,8 @@
     "node_modules/color-name": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
     },
     "node_modules/commander": {
       "version": "4.1.1",
@@ -1174,7 +1182,8 @@
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true
     },
     "node_modules/copy-to-clipboard": {
       "version": "3.3.3",
@@ -2073,7 +2082,8 @@
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
+      "dev": true
     },
     "node_modules/fsevents": {
       "version": "2.3.3",
@@ -2172,6 +2182,7 @@
       "version": "7.1.7",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
       "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
+      "dev": true,
       "dependencies": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
@@ -2290,6 +2301,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -2405,6 +2417,7 @@
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
       "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "dev": true,
       "dependencies": {
         "once": "^1.3.0",
         "wrappy": "1"
@@ -2413,7 +2426,8 @@
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true
     },
     "node_modules/inline-style-prefixer": {
       "version": "6.0.4",
@@ -2781,7 +2795,8 @@
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true
     },
     "node_modules/iterator.prototype": {
       "version": "1.1.2",
@@ -2963,6 +2978,7 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
       "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dev": true,
       "dependencies": {
         "yallist": "^4.0.0"
       },
@@ -3001,6 +3017,7 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
       "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
       "dependencies": {
         "brace-expansion": "^1.1.7"
       },
@@ -3020,7 +3037,8 @@
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "dev": true
     },
     "node_modules/mz": {
       "version": "2.7.0",
@@ -6020,6 +6038,7 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
       "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "dev": true,
       "dependencies": {
         "wrappy": "1"
       }
@@ -6096,6 +6115,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
       "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -6390,6 +6410,14 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "4.12.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.12.0.tgz",
+      "integrity": "sha512-IBaDuHiShdZqmfc/TwHu6+d6k2ltNCf3AszxNmjJc1KUfXdEeRJOKyNvLmAHaarhzGmTSVygNdyu8/opXv2gaw==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -6644,6 +6672,7 @@
       "version": "7.5.4",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
       "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+      "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
       },
@@ -6874,6 +6903,7 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
       "dependencies": {
         "ansi-regex": "^5.0.1"
       },
@@ -6975,6 +7005,7 @@
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
       "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
       "dependencies": {
         "has-flag": "^4.0.0"
       },
@@ -7043,7 +7074,8 @@
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
-      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw=="
+      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
+      "dev": true
     },
     "node_modules/thenify": {
       "version": "3.3.1",
@@ -7328,6 +7360,7 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
       "dependencies": {
         "isexe": "^2.0.0"
       },
@@ -7417,12 +7450,14 @@
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "dev": true
     },
     "node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true
     },
     "node_modules/yaml": {
       "version": "2.3.4",

package.json

@@ -20,6 +20,7 @@
     "react": "^18",
     "react-confetti": "^6.1.0",
     "react-dom": "^18",
+    "react-icons": "^4.12.0",
     "react-use": "^17.4.0"
   },
   "devDependencies": {