From d34f794bada39efa3ee1a6dc773e65bb70506e80 Mon Sep 17 00:00:00 2001
From: SICout9010 <68893699+SICout9010@users.noreply.github.com>
Date: Sun, 21 Jul 2024 16:11:40 +0700
Subject: [PATCH] fix: Add key prop to buttons in Game component and fix typo
 in SetLessons component

---
 app/game/page.tsx         | 4 ++--
 components/setLessons.tsx | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/game/page.tsx b/app/game/page.tsx
index 820717f..b8c110e 100644
--- a/app/game/page.tsx
+++ b/app/game/page.tsx
@@ -26,8 +26,8 @@ function Game(): GameProps {
             <div className="w-full h-fit items-center justify-center flex flex-col">
                 <p className="text-4xl font-bold text-wrap text-center text-[#343434]">{currentQuiz.question}</p>
                 <div className="flex gap-6 mt-20">
-                    {currentQuiz.options.map((option) => (
-                        <button className={`text-4xl text-white p-24  ${currentQuiz.type == 'boolean' ? "bg-[#35CD4D]" : "bg-[#FBAE17]"} rounded-[36px]`} onClick={
+                    {currentQuiz.options.map((option, index) => (
+                        <button key={index} className={`text-4xl text-white p-24  ${currentQuiz.type == 'boolean' ? "bg-[#35CD4D]" : "bg-[#FBAE17]"} rounded-[36px]`} onClick={
                             () => {
                                 setSelectedOption(option)
                                 if (selectedOption === currentQuiz.answer) {
diff --git a/components/setLessons.tsx b/components/setLessons.tsx
index 2500647..0b7e94c 100644
--- a/components/setLessons.tsx
+++ b/components/setLessons.tsx
@@ -9,11 +9,11 @@ const prompt = Prompt({ subsets: ["latin"], weight: ["300", "400", "500", "600",
 
 function SetLessons() {
     return (
-        <main className="min-w-[1440px] flex flex-col justify-center">
-            <div className="flex gap-2 items-center">
+        <main className="min-w-[1440px] h-full flex flex-col justify-center">
+            <div className="flex tems-center justify-between">
 
                 <div>
-                    <div className="flex items-center justify-center mb-1">
+                    <div className="flex items-centermb-1">
                         <svg width="55" height="50" viewBox="0 0 55 50" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <path d="M25.9722 32.7709L18.3333 24.7501M18.3333 24.7501L25.9722 16.7292M18.3333 24.7501H36.6666" stroke="#343434" stroke-width="3.66667" stroke-linecap="round" stroke-linejoin="round" />
                         </svg>
@@ -27,7 +27,7 @@ function SetLessons() {
 
                 <div className="relative w-[340px] h-[500px]">
                      <div className="absolute">
-                        <Image src={step1} alt="step1"/>
+                        <Image className="" src={step1} alt="step1"/>
                         <Image src={step2} alt="step2"/>
                         <Image src={step3} alt="step3"/>