From 014b1563af1e25649660be1dc593e6ba3f453dc5 Mon Sep 17 00:00:00 2001
From: Kakabay <2kakabayashyrberdyew@gmail.com>
Date: Mon, 25 Nov 2024 19:33:01 +0500
Subject: [PATCH] =?UTF-8?q?=D1=81=D1=89=D1=82=D0=B0=D1=83=D0=B5=D0=B5?=
 =?UTF-8?q?=D1=88=20=D1=8B=D0=B5=D1=88=D1=82=D0=BF=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/(main)/(lottery)/lottery/page.tsx         | 42 +++-------------
 components/Footer.tsx                         |  4 +-
 components/lottery/LotteryWinnersSection.tsx  | 27 ++++++++++
 components/lottery/spinWheel/SpinWheel.tsx    | 50 ++++++++++---------
 components/lottery/winners/LotteryWinner.tsx  | 28 +++++++++++
 .../lottery/winners/LotteryWinnersList.tsx    | 18 +++++++
 6 files changed, 109 insertions(+), 60 deletions(-)
 create mode 100644 components/lottery/LotteryWinnersSection.tsx
 create mode 100644 components/lottery/winners/LotteryWinner.tsx
 create mode 100644 components/lottery/winners/LotteryWinnersList.tsx

diff --git a/app/(main)/(lottery)/lottery/page.tsx b/app/(main)/(lottery)/lottery/page.tsx
index 8c41b13..1d236a7 100644
--- a/app/(main)/(lottery)/lottery/page.tsx
+++ b/app/(main)/(lottery)/lottery/page.tsx
@@ -1,7 +1,6 @@
-import LotteryCountDown from "@/components/lottery/countDown/LotteryCountDown";
-import SpinWheel from "@/components/lottery/spinWheel/SpinWheel";
-import Image from "next/image";
-import React from "react";
+import LotteryWinnersSection from '@/components/lottery/LotteryWinnersSection';
+import LotteryCountDown from '@/components/lottery/countDown/LotteryCountDown';
+import Image from 'next/image';
 
 const page = () => {
   return (
@@ -25,33 +24,7 @@ const page = () => {
         </div>
       </section>
 
-      <section>
-        <div className="container">
-          <div className="flex gap-6 bg-lightSurfaceContainer rounded-[12px]">
-            {/* Winners */}
-            <div className="flex flex-col w-full p-8 gap-4">
-              <div className="flex flex-col gap-2 pb-4 border-b border-lightOutlineVariant">
-                <h4 className="font-heading-3-regular">Results</h4>
-                <p className="font-base-medium">
-                  The results after each stage will be shown here.
-                </p>
-              </div>
-
-              {/* {[...Array(5)].map((item, index) => (
-                <div className="flex flex-col gap-2 pb-4 last:border-none border-b border-lightOutlineVariant">
-                  <h4 className="font-heading-5-regular">The winner of the {index + 1} stage:</h4>
-                  <p className="font-base-medium">8 XX XX-XX-XX</p>
-                </div>
-              ))} */}
-            </div>
-
-            {/* Sping the wheel */}
-            <div className="flex justify-center items-center w-full h-full px-8 py-[29px]">
-              <SpinWheel />
-            </div>
-          </div>
-        </div>
-      </section>
+      <LotteryWinnersSection />
 
       <section>
         <div className="container">
@@ -62,11 +35,10 @@ const page = () => {
                 <h3 className="font-heading-5-regular">Umumy düzgünler:</h3>
                 <ul className="list-disc flex flex-col gap-4 pl-[16px]">
                   {Array(5)
-                    .fill(" ")
+                    .fill(' ')
                     .map((item, i) => (
                       <li className="font-small-regular" key={i}>
-                        Ilkinji we dogry jogap beren sanawda ilkinji ýeri
-                        eýelýär
+                        Ilkinji we dogry jogap beren sanawda ilkinji ýeri eýelýär
                       </li>
                     ))}
                 </ul>
@@ -76,7 +48,7 @@ const page = () => {
                 <h3 className="font-heading-5-regular">Üns beriň:</h3>
                 <ul className="list-disc flex flex-col gap-4 pl-[16px]">
                   {Array(1)
-                    .fill(" ")
+                    .fill(' ')
                     .map((item) => (
                       <li className="font-small-regular">SMS = 1 manat</li>
                     ))}
diff --git a/components/Footer.tsx b/components/Footer.tsx
index aa9a7cf..cb30bc5 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -102,8 +102,8 @@ const Footer = () => {
           </div>
           <div className="flex flex-col gap-9">
             <p className="relative font-roboto font-normal opacity-60 text-white flex flex-col gap-3 pl-[18px]">
-              <a href="tel:+99312493705">Phone: +993 12 493705</a>
-              <span>Aşgabat şäheri Oguzhan 13</span>
+              {/* <a href="tel:+99312493705">Phone: +993 12 493705</a>
+              <span>Aşgabat şäheri Oguzhan 13</span> */}
               <a href="mailto:mahabat@turkmentv.gov.tm">mahabat@turkmentv.gov.tm</a>
               <span className="absolute top-0 left-0 w-[5px] h-full bg-white"></span>
             </p>
diff --git a/components/lottery/LotteryWinnersSection.tsx b/components/lottery/LotteryWinnersSection.tsx
new file mode 100644
index 0000000..0d012eb
--- /dev/null
+++ b/components/lottery/LotteryWinnersSection.tsx
@@ -0,0 +1,27 @@
+'use client';
+
+import LotteryWinnersList from './winners/LotteryWinnersList';
+import SpinWheel from './spinWheel/SpinWheel';
+import { useState } from 'react';
+
+const LotteryWinnersSection = () => {
+  const [winners, setWinners] = useState<number[]>([]);
+
+  return (
+    <section>
+      <div className="container">
+        <div className="flex gap-6 bg-lightSurfaceContainer rounded-[12px]">
+          {/* Winners */}
+          <LotteryWinnersList winners={winners} />
+
+          {/* Sping the wheel */}
+          <div className="flex justify-center items-center w-full h-full px-8 py-[29px]">
+            <SpinWheel setWinners={setWinners} />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default LotteryWinnersSection;
diff --git a/components/lottery/spinWheel/SpinWheel.tsx b/components/lottery/spinWheel/SpinWheel.tsx
index cad6bd4..2bf0c17 100644
--- a/components/lottery/spinWheel/SpinWheel.tsx
+++ b/components/lottery/spinWheel/SpinWheel.tsx
@@ -1,11 +1,15 @@
-"use client";
+'use client';
 
-import Image from "next/image";
-import { useState } from "react";
-import Confetti from "react-confetti";
-import { useWindowSize } from "react-use";
+import Image from 'next/image';
+import { Dispatch, SetStateAction, useState } from 'react';
+import Confetti from 'react-confetti';
+import { useWindowSize } from 'react-use';
 
-const SpinWheel: React.FC = () => {
+interface IProps {
+  setWinners: Dispatch<SetStateAction<number[]>>;
+}
+
+const SpinWheel = ({ setWinners }: IProps) => {
   const [isSpinning, setIsSpinning] = useState(false);
   const [isCountingDown, setIsCountingDown] = useState(false);
   const [countdown, setCountdown] = useState(5);
@@ -45,6 +49,7 @@ const SpinWheel: React.FC = () => {
     setTimeout(() => {
       setIsSpinning(false);
       setRotation((prev) => prev % 360); // Normalize the rotation
+      setWinners((prev) => [...prev, 1]);
       triggerConfetti(); // Show confetti after spinning
     }, 5000); // Spin duration
   };
@@ -63,15 +68,16 @@ const SpinWheel: React.FC = () => {
             width={width}
             height={height}
             recycle={false}
-            numberOfPieces={2000}
+            numberOfPieces={1000}
             tweenDuration={10000}
             run={true}
             colors={[
-              "linear-gradient(45deg, #5D5D72, #8589DE)",
-              "linear-gradient(45deg, #E1E0FF, #575992)",
-              "#8589DE",
-              "#575992",
-              "#E1E0FF",
+              'linear-gradient(45deg, #5D5D72, #8589DE)',
+              'linear-gradient(45deg, #E1E0FF, #575992)',
+              '#8589DE',
+              '#575992',
+              '#E1E0FF',
+              '#BA1A1A',
             ]}
           />
         </div>
@@ -79,7 +85,7 @@ const SpinWheel: React.FC = () => {
       <div className="relative rounded-full w-[554px] h-[554px]">
         {/* Wheel triangle */}
         <Image
-          src={"/wheel-triangle.svg"}
+          src={'/wheel-triangle.svg'}
           alt="wheel"
           height={34}
           width={35}
@@ -90,13 +96,12 @@ const SpinWheel: React.FC = () => {
         <div
           style={{
             transform: `rotate(${rotation}deg)`,
-            transition: isSpinning ? "transform 5s ease-out" : "",
+            transition: isSpinning ? 'transform 5s ease-out' : '',
           }}
-          className="p-3 bg-[#5D5D72] rounded-full overflow-hidden"
-        >
+          className="p-3 bg-[#5D5D72] rounded-full overflow-hidden">
           <div className="p-[15px] bg-[#8589DE] rounded-full ">
             <Image
-              src={"/wheel-circle-inner.png"}
+              src={'/wheel-circle-inner.png'}
               alt="wheel"
               height={530}
               width={530}
@@ -119,15 +124,14 @@ const SpinWheel: React.FC = () => {
         disabled={isSpinning || isCountingDown}
         className={`mt-6 px-6 py-3 rounded-full text-white font-bold ${
           isSpinning || isCountingDown
-            ? "bg-gray-400 cursor-not-allowed"
-            : "bg-blue-500 hover:bg-blue-700"
-        }`}
-      >
+            ? 'bg-gray-400 cursor-not-allowed'
+            : 'bg-blue-500 hover:bg-blue-700'
+        }`}>
         {isCountingDown
           ? `Starting in ${countdown}...`
           : isSpinning
-          ? "Spinning..."
-          : "Spin the Wheel"}
+          ? 'Spinning...'
+          : 'Spin the Wheel'}
       </button>
     </div>
   );
diff --git a/components/lottery/winners/LotteryWinner.tsx b/components/lottery/winners/LotteryWinner.tsx
new file mode 100644
index 0000000..c551b8f
--- /dev/null
+++ b/components/lottery/winners/LotteryWinner.tsx
@@ -0,0 +1,28 @@
+'use client';
+
+import { motion } from 'framer-motion';
+
+interface IProps {
+  index: number;
+  number: string;
+}
+
+const LotteryWinner = ({ index, number }: IProps) => {
+  return (
+    <motion.div
+      initial={{
+        opacity: 0,
+        translateY: 20,
+      }}
+      animate={{
+        opacity: 1,
+        translateY: 0,
+      }}
+      className="flex flex-col gap-2 pb-4 last:border-none border-b border-lightOutlineVariant">
+      <h4 className="font-heading-5-regular">The winner of the {index + 1} stage:</h4>
+      <p className="font-base-medium">8 XX XX-XX-XX</p>
+    </motion.div>
+  );
+};
+
+export default LotteryWinner;
diff --git a/components/lottery/winners/LotteryWinnersList.tsx b/components/lottery/winners/LotteryWinnersList.tsx
new file mode 100644
index 0000000..40fc344
--- /dev/null
+++ b/components/lottery/winners/LotteryWinnersList.tsx
@@ -0,0 +1,18 @@
+import LotteryWinner from './LotteryWinner';
+
+const LotteryWinnersList = ({ winners }: { winners: number[] }) => {
+  return (
+    <div className="flex flex-col w-full p-8 gap-4">
+      <div className="flex flex-col gap-2 pb-4 border-b border-lightOutlineVariant">
+        <h4 className="font-heading-3-regular">Results</h4>
+        <p className="font-base-medium">The results after each stage will be shown here.</p>
+      </div>
+
+      {winners.map((_, index) => (
+        <LotteryWinner number="8 XX XX-XX-XX" index={index} />
+      ))}
+    </div>
+  );
+};
+
+export default LotteryWinnersList;