сщтауееш ыештпы

app/(main)/(lottery)/lottery/page.tsx

@@ -1,7 +1,6 @@
-import LotteryCountDown from "@/components/lottery/countDown/LotteryCountDown";
+import LotteryWinnersSection from '@/components/lottery/LotteryWinnersSection';
-import SpinWheel from "@/components/lottery/spinWheel/SpinWheel";
+import LotteryCountDown from '@/components/lottery/countDown/LotteryCountDown';
-import Image from "next/image";
+import Image from 'next/image';
-import React from "react";
 
 const page = () => {
   return (
@@ -25,33 +24,7 @@ const page = () => {
         </div>
       </section>
 
-      <section>
+      <LotteryWinnersSection />
-        <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>
 
       <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
+                        Ilkinji we dogry jogap beren sanawda ilkinji ýeri eýelýär
-                        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>
                     ))}

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>
+              {/* <a href="tel:+99312493705">Phone: +993 12 493705</a>
-              <span>Aşgabat şäheri Oguzhan 13</span>
+              <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>

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;

components/lottery/spinWheel/SpinWheel.tsx

@@ -1,11 +1,15 @@
-"use client";
+'use client';
 
-import Image from "next/image";
+import Image from 'next/image';
-import { useState } from "react";
+import { Dispatch, SetStateAction, useState } from 'react';
-import Confetti from "react-confetti";
+import Confetti from 'react-confetti';
-import { useWindowSize } from "react-use";
+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, #5D5D72, #8589DE)',
-              "linear-gradient(45deg, #E1E0FF, #575992)",
+              'linear-gradient(45deg, #E1E0FF, #575992)',
-              "#8589DE",
+              '#8589DE',
-              "#575992",
+              '#575992',
-              "#E1E0FF",
+              '#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-gray-400 cursor-not-allowed'
-            : "bg-blue-500 hover:bg-blue-700"
+            : 'bg-blue-500 hover:bg-blue-700'
-        }`}
+        }`}>
-      >
         {isCountingDown
           ? `Starting in ${countdown}...`
           : isSpinning
-          ? "Spinning..."
+          ? 'Spinning...'
-          : "Spin the Wheel"}
+          : 'Spin the Wheel'}
       </button>
     </div>
   );

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;

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;