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

2024-11-25 19:33:01 +05:00 · 2024-11-25 19:33:01 +05:00 · 014b1563af
parent 2717fbc571
commit 014b1563af
6 changed files with 109 additions and 60 deletions
--- 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>
                    ))}
--- 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>
--- a/components/lottery/LotteryWinnersSection.tsx
+++ 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;
--- 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>
  );
--- a/components/lottery/winners/LotteryWinner.tsx
+++ 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;
--- a/components/lottery/winners/LotteryWinnersList.tsx
+++ 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;