фзш фтв куы ыефкеув

api/queries.ts

@@ -6,6 +6,7 @@ import { CategoriesModel } from '@/models/categories.model';
 import { ChannelsModel } from '@/models/channels.model';
 import { HomeModel } from '@/models/home.model';
 import { LiveDescriptionModel } from '@/models/liveDescription.model';
+import { ILottery } from '@/models/lottery/lottery.model';
 import { MarqueeModel } from '@/models/marquee.model';
 import { NewsModel, NewsType } from '@/models/news.model';
 import { NewsItemModel } from '@/models/newsItem.model';
@@ -233,16 +234,16 @@ export class Queries {
   }
 
   // Lottery ================================================================================
-  public static async getLottery(): Promise<IAllVotes> {
+  public static async getLottery(): Promise<ILottery> {
     return await fetch(`${baseUrl.QUIZ_SRC}${routes.lotteryActive}`, {
       next: { revalidate: 3600 },
-    }).then((res) => res.json().then((res) => res as IAllVotes));
+    }).then((res) => res.json().then((res) => res as ILottery));
   }
 
-  public static async getLotteryById(lottery_id: string): Promise<IVote> {
+  public static async getLotteryById(lottery_id: string): Promise<ILottery> {
     return await fetch(`${baseUrl.QUIZ_SRC}${routes.lotteryId(lottery_id)}`, {
       next: { revalidate: 3600 },
-    }).then((res) => res.json().then((res) => res as IVote));
+    }).then((res) => res.json().then((res) => res as ILottery));
   }
 
   // ============================================================================================

app/(main)/lottery/[lottery_id]/page.tsx

@@ -55,8 +55,10 @@ const page = ({ params }: IParams) => {
                 <ul className="list-disc flex flex-col gap-4 pl-[16px]">
                   {Array(1)
                     .fill(' ')
-                    .map((item) => (
+                    .map((item, i) => (
-                      <li className="font-small-regular">SMS = 1 manat</li>
+                      <li className="font-small-regular" key={i}>
+                        SMS = 1 manat
+                      </li>
                     ))}
                 </ul>
               </div>

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

@@ -1,30 +1,83 @@
+'use client';
+
+import { Queries } from '@/api/queries';
 import LotteryWinnersSection from '@/components/lottery/LotteryWinnersSection';
 import LotteryCountDown from '@/components/lottery/countDown/LotteryCountDown';
+import { ILottery } from '@/models/lottery/lottery.model';
 import Image from 'next/image';
+import { useEffect, useState } from 'react';
 
 const page = () => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [data, setData] = useState<ILottery>();
+  const [lotteryStatus, setLotteryStatus] = useState<'not-started' | 'started' | 'ended'>(
+    'not-started',
+  );
+
+  useEffect(() => {
+    Queries.getLottery()
+      .then((res) => {
+        setIsLoading(true);
+        setData(res);
+      })
+      .finally(() => setIsLoading(false));
+  }, []);
+
+  console.log(lotteryStatus);
+
   return (
-    <div className="flex flex-col gap-[128px] font-roboto pt-[64px] pb-[128px] text-lightOnSurface">
+    <div className="flex flex-col gap-[128px] font-roboto md:pt-[64px] sm:pt-[48px] pt-[40px] pb-[128px] text-lightOnSurface">
-      <section className="">
+      {data && (
-        <div className="container">
+        <section className="">
-          <div className="flex flex-col gap-[32px]">
+          <div className="container">
-            <h1 className="font-display-1-regular text-center">Bije</h1>
+            <div className="flex flex-col md:gap-[32px] gap-[24px]">
-            <div className="mb-8">
+              <div className="flex flex-col gap-[24px] items-center ">
-              <Image
+                <h1 className="sm:font-display-1-regular text-[32px] leading-[40px] text-center">
-                src="/banner-lottery.jpg"
+                  {data.data.title}
-                width={1416}
+                </h1>
-                height={177}
+                <p className="max-w-[600px] w-full font-base-regular text-center">
-                alt="banner"
+                  {data.data.description}
-                className="rounded-[12px]"
+                </p>
-              />
+                <p className="p-2 font-heading-5-medium bg-lightTertiaryContainer text-lightOnTertiaryContainer">
+                  SMS-kod: {data.data.sms_code}
+                </p>
+              </div>
+              <div className="md:mb-8 sm:mb-[40px] mb-[16px]">
+                <Image
+                  src="/banner-lottery.jpg"
+                  width={1416}
+                  height={177}
+                  alt="banner"
+                  className="rounded-[12px] object-cover h-[177px]"
+                />
+              </div>
+
+              {/* {lotteryStatus === 'started' ||
+                (lotteryStatus === 'not-started' && (
+                  <LotteryCountDown
+                    startDate={data.data.start_time}
+                    endDate={data.data.end_time}
+                    lotteryStatus={lotteryStatus}
+                    setLotteryStatus={setLotteryStatus}
+                  />
+                ))} */}
+
+              {lotteryStatus === 'not-started' || lotteryStatus === 'started' ? (
+                <LotteryCountDown
+                  // startDate={data.data.start_time}
+                  // endDate={data.data.end_time}
+                  startDate={'2024-12-10 16:15:00'}
+                  endDate={'2024-12-11 16:00:00'}
+                  lotteryStatus={lotteryStatus}
+                  setLotteryStatus={setLotteryStatus}
+                />
+              ) : null}
             </div>
-
-            <LotteryCountDown startDate="2024-11-25" />
           </div>
-        </div>
+        </section>
-      </section>
+      )}
 
-      <LotteryWinnersSection />
+      {lotteryStatus === 'started' || (lotteryStatus === 'ended' && <LotteryWinnersSection />)}
 
       <section>
         <div className="container">
@@ -49,8 +102,10 @@ const page = () => {
                 <ul className="list-disc flex flex-col gap-4 pl-[16px]">
                   {Array(1)
                     .fill(' ')
-                    .map((item) => (
+                    .map((item, i) => (
-                      <li className="font-small-regular">SMS = 1 manat</li>
+                      <li className="font-small-regular" key={i}>
+                        SMS = 1 manat
+                      </li>
                     ))}
                 </ul>
               </div>

app/globals.css

@@ -86,7 +86,7 @@ html {
 
 .container {
   max-width: 1316px;
-  padding: 0 30px;
+  padding: 0 16px;
   width: 100%;
   margin: 0 auto;
   /* overflow-x: hidden; */
@@ -228,9 +228,18 @@ big {
   @apply -tracking-[1%] text-[24px] leading-[32px];
 }
 
+.font-heading-5-medium {
+  @apply font-medium -tracking-[1%] text-[24px] leading-[32px];
+}
+
+.font-base-regular {
+  @apply font-normal -tracking-[1%] text-[16px] leading-[24px];
+}
+
 .font-base-medium {
   @apply font-medium -tracking-[1%] text-[16px] leading-[24px];
 }
+
 .font-small-regular {
   @apply -tracking-[1%] text-[14px] leading-[20px];
 }

components/lottery/countDown/LotteryCountDown.tsx

@@ -1,92 +1,117 @@
-"use client";
+'use client';
 
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, Dispatch, SetStateAction } from 'react';
 
 interface LotteryCountDownProps {
-  startDate: string; // Event start date in "YYYY-MM-DD" format
+  startDate: string; // Event start date in "YYYY-MM-DD HH:mm:ss" format
+  endDate: string; // Event end date in "YYYY-MM-DD HH:mm:ss" format
+  lotteryStatus: string;
+  setLotteryStatus: Dispatch<SetStateAction<'not-started' | 'started' | 'ended'>>;
 }
 
-const LotteryCountDown: React.FC<LotteryCountDownProps> = ({ startDate }) => {
+const LotteryCountDown: React.FC<LotteryCountDownProps> = ({
+  startDate,
+  endDate,
+  lotteryStatus,
+  setLotteryStatus,
+}) => {
   const [timeLeft, setTimeLeft] = useState({
     hours: 0,
     minutes: 0,
     seconds: 0,
   });
 
-  const calculateTimeLeft = () => {
+  const calculateTimeLeft = (targetDate: string) => {
     const now = new Date();
-    const eventDate = new Date(`${startDate}T00:00:00+05:00`); // Set the time to midnight UTC+5
+    const eventDate = new Date(targetDate); // Parse target date directly
     const timeDifference = eventDate.getTime() - now.getTime();
 
     if (timeDifference <= 0) {
-      return { hours: 0, minutes: 0, seconds: 0 }; // Event has started or passed
+      return { hours: 0, minutes: 0, seconds: 0 }; // Countdown finished
     }
 
     const hours = Math.floor(timeDifference / (1000 * 60 * 60));
-    const minutes = Math.floor(
+    const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
-      (timeDifference % (1000 * 60 * 60)) / (1000 * 60)
-    );
     const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);
 
     return { hours, minutes, seconds };
   };
 
   useEffect(() => {
-    // Update time left every second
     const timer = setInterval(() => {
-      setTimeLeft(calculateTimeLeft());
+      if (lotteryStatus === 'not-started') {
+        const timeToStart = calculateTimeLeft(startDate);
+        setTimeLeft(timeToStart);
+
+        if (timeToStart.hours === 0 && timeToStart.minutes === 0 && timeToStart.seconds === 0) {
+          setLotteryStatus('started'); // Update status to "started"
+        }
+      } else if (lotteryStatus === 'started') {
+        const timeToEnd = calculateTimeLeft(endDate);
+        setTimeLeft(timeToEnd);
+
+        if (timeToEnd.hours === 0 && timeToEnd.minutes === 0 && timeToEnd.seconds === 0) {
+          setLotteryStatus('ended'); // Update status to "finished"
+        }
+      }
     }, 1000);
 
     return () => clearInterval(timer); // Clean up interval on component unmount
-  }, [startDate]);
+  }, [startDate, endDate, lotteryStatus, setLotteryStatus]);
 
   return (
-    <div className="bg-lightSurfaceContainer pb-8 flex flex-col w-full gap-2 rounded-[12px]">
+    <div className="bg-lightPrimaryContainer sm:pb-4 pb-2 flex flex-col w-full gap-2 rounded-[12px] text-lightOnPrimaryContainer">
       {/* LotteryCountDown */}
-      <div className="flex items-center gap-6">
+      <div className="flex items-center sm:gap-6 gap-2 justify-between">
         <div className="flex flex-col items-center justify-center flex-1 p-6">
-          <h3 className="text-[80px] leading-[88px] -tracking-[1%]">
+          <h3 className="md:text-[80px] sm:text-[56px] text-[28px] md:leading-[88px] sm:leading-[64px] leading-[36px] -tracking-[1%]">
             {timeLeft.hours}
           </h3>
-          <h4 className="font-medium text-[20px] leading-[28px] -tracking-[1%]">
+          <h4 className="font-medium md:text-[20px] sm:text-[18px] text-[14px] sm:leading-[28px] leading-[20px] -tracking-[1%] text-lightOnSurfaceVariant">
             hours
           </h4>
         </div>
 
         <div className="flex flex-col gap-3">
-          <div className="w-3 h-3 rounded-full bg-lightOutlineVariant"></div>
+          <div className="w-3 h-3 rounded-full bg-lightPrimaryOutline"></div>
-          <div className="w-3 h-3 rounded-full bg-lightOutlineVariant"></div>
+          <div className="w-3 h-3 rounded-full bg-lightPrimaryOutline"></div>
         </div>
 
-        <div className="flex flex-col items-center justify-center flex-1 p-6">
+        <div className="flex flex-col items-center justify-center flex-1 sm:p-6 p-4 pb-3">
-          <h3 className="text-[80px] leading-[88px] -tracking-[1%]">
+          <h3 className="md:text-[80px] sm:text-[56px] text-[28px] md:leading-[88px] sm:leading-[64px] leading-[36px] -tracking-[1%]">
             {timeLeft.minutes}
           </h3>
-          <h4 className="font-medium text-[20px] leading-[28px] -tracking-[1%]">
+          <h4 className="font-medium md:text-[20px] sm:text-[18px] text-[14px] sm:leading-[28px] leading-[20px] -tracking-[1%] text-lightOnSurfaceVariant">
             minutes
           </h4>
         </div>
 
         <div className="flex flex-col gap-3">
-          <div className="w-3 h-3 rounded-full bg-lightOutlineVariant"></div>
+          <div className="w-3 h-3 rounded-full bg-lightPrimaryOutline"></div>
-          <div className="w-3 h-3 rounded-full bg-lightOutlineVariant"></div>
+          <div className="w-3 h-3 rounded-full bg-lightPrimaryOutline"></div>
         </div>
 
         <div className="flex flex-col items-center justify-center flex-1 p-6">
-          <h3 className="text-[80px] leading-[88px] -tracking-[1%]">
+          <h3 className="md:text-[80px] sm:text-[56px] text-[28px] md:leading-[88px] sm:leading-[64px] leading-[36px] -tracking-[1%]">
             {timeLeft.seconds}
           </h3>
-          <h4 className="font-medium text-[20px] leading-[28px] -tracking-[1%]">
+          <h4 className="font-medium md:text-[20px] sm:text-[18px] text-[14px] sm:leading-[28px] leading-[20px] -tracking-[1%] text-lightOnSurfaceVariant">
             seconds
           </h4>
         </div>
       </div>
 
       {/* Separator */}
-      <div className="w-full bg-lightOutlineVariant h-[1px]"></div>
+      <div className="w-full bg-lightPrimaryOutline h-[1px]"></div>
 
-      <div className="flex items-center justify-center text-lightOnSurface font-heading-1-regular">
+      <div className="flex items-center justify-center text-lightOnSurfaceVariant md:font-heading-1-regular md:text-[20px] sm:text-[18px] sm:leading-[28px] text-[14px] leading-[20px]">
-        <span>-dan başlar</span>
+        <span>
+          {lotteryStatus === 'not-started'
+            ? '- den başlar'
+            : lotteryStatus === 'started'
+            ? '- den gutatar'
+            : 'gutardy'}
+        </span>
       </div>
     </div>
   );

components/lottery/spinWheel/SpinWheel.tsx

@@ -82,14 +82,14 @@ const SpinWheel = ({ setWinners }: IProps) => {
           />
         </div>
       )}
-      <div className="relative rounded-full w-[554px] h-[554px]">
+      <div className="relative rounded-full max-w-[554px] max-h-[554px] w-full h-full">
         {/* Wheel triangle */}
         <Image
           src={'/wheel-triangle.svg'}
           alt="wheel"
           height={34}
           width={35}
-          className="absolute z-10 left-[50%] -translate-x-[50%] top-7"
+          className="absolute z-10 left-[50%] -translate-x-[50%] lg:top-7 top-[17px]"
         />
 
         {/* Wheel */}
@@ -98,8 +98,8 @@ const SpinWheel = ({ setWinners }: IProps) => {
             transform: `rotate(${rotation}deg)`,
             transition: isSpinning ? 'transform 5s ease-out' : '',
           }}
-          className="p-3 bg-[#5D5D72] rounded-full overflow-hidden">
+          className="lg:p-3 p-2 bg-[#5D5D72] rounded-full overflow-hidden">
-          <div className="p-[15px] bg-[#8589DE] rounded-full ">
+          <div className="lg:p-[15px] p-[10px] bg-[#8589DE] rounded-full ">
             <Image
               src={'/wheel-circle-inner.png'}
               alt="wheel"
@@ -111,8 +111,8 @@ const SpinWheel = ({ setWinners }: IProps) => {
         </div>
 
         {/* Countdown */}
-        <div className="absolute top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%] w-[105px] h-[105px] rounded-full z-10 bg-white flex items-center justify-center ">
+        <div className="absolute top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%] lg:w-[105px] lg:h-[105px] h-[75px] w-[75px] rounded-full z-10 bg-white flex items-center justify-center ">
-          <span className="text-[#79536A] font-roboto text-[60px] leading-[70px] tracking-[-1%]">
+          <span className="text-[#79536A] font-roboto lg:text-[60px] text-[45px]  leading-[70px] tracking-[-1%]">
             {countdown}
           </span>
         </div>

models/lottery/lottery.model.ts

@@ -0,0 +1,21 @@
+export interface ILottery {
+  data: Data;
+}
+
+export interface Data {
+  id: number;
+  title: string;
+  description: string;
+  image: string;
+  start_time: string;
+  end_time: string;
+  sms_code: string;
+  winners: Winner[];
+}
+
+export interface Winner {
+  no: number;
+  client: string;
+  dt: string;
+  winner_no: number;
+}

package.json

@@ -58,3 +58,4 @@
     "eslint-config-next": "^14.1.0"
   }
 }
+

tailwind.config.js

@@ -82,6 +82,7 @@ export const theme = {
       // Outline
       lightOutline: '#777680',
       lightOutlineVariant: '#C7C5D0',
+      lightPrimaryOutline: '#D8D6FF',
     },
     fontSize: {
       // Display