fix ui errors

components/MobileMenu.tsx

@@ -178,9 +178,9 @@ const MobileMenu = () => {
                         Sowgatlar
                       </Link>
                       <Link
-                        href={'/lottery/auth'}
+                        href={'/cekilis/auth'}
                         className="block text-2xl text-white transition-all font-roboto font-bold"
-                        style={path.includes('lottery') ? { color: '#FFAB48' } : {}}
+                        style={path.includes('cekilis') ? { color: '#FFAB48' } : {}}
                         onClick={() => {
                           setDropDownOpened(false);
                           onClickCloseBurgerHandler();

components/Nav.tsx

@@ -2,8 +2,6 @@
 import Image from 'next/image';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
-import { AiOutlineUser } from 'react-icons/ai';
-import ThemeSwitch from './home/ThemeSwitch';
 import { useContext, useEffect, useRef, useState } from 'react';
 import GlobalContext from '@/context/GlobalContext';
 import burger from '@/public/menu-outline.svg';
@@ -140,9 +138,9 @@ const Nav = () => {
                       Sowgatlar
                     </Link>
                     <Link
-                      href={'/lottery/auth'}
+                      href={'/cekilis/auth'}
                       className="block min-w-fit text-lg text-white transition-all font-roboto font-bold"
-                      style={path.includes('lottery') ? { color: '#FFAB48' } : {}}
+                      style={path.includes('cekilis') ? { color: '#FFAB48' } : {}}
                       onClick={() => setDropDownOpened(false)}>
                       Bije
                     </Link>

components/common/Confetti.tsx

@@ -19,7 +19,7 @@ const Confetti = () => {
   const mobile = useMediaQuery("(max-width: 426px)");
 
   useEffect(() => {
-    setTimeout(() => setRecycle(false), 30000);
+    setTimeout(() => setRecycle(false), 10000);
   }, [recycle]);
 
   return (

components/lottery/LotteryMain.tsx

@@ -1,29 +1,46 @@
+"use client";
 import LotteryHeader from "@/components/lottery/LotteryHeader";
 import LotteryRulesSection from "@/components/lottery/rules/LotteryRulesSection";
 import LotteryCountDown from "@/components/lottery/countDown/LotteryCountDown";
 import Link from "next/link";
 import { authenticateLottery } from "@/api";
 import { redirect } from "next/navigation";
-import { cookies } from "next/headers";
 import { getLotteryStatus } from "@/lib/actions";
 import LotteryWinners from "./LotteryWinners";
+import { useEffect, useState } from "react";
+import { ILotteryResponse } from "@/models/lottery/lottery.model";
 
-async function getData() {
-  const cookieStore = await cookies();
-  const phone = cookieStore.get("phoneNumber");
-  const key = cookieStore.get("key");
-  if (phone?.value && key?.value) {
-    const res = await authenticateLottery(phone.value, key.value);
-    return res;
+const LotteryMain = () => {
+  const [lotteryData, setLotteryData] = useState<any>();
+
+  useEffect(() => {
+    async function getData() {
+      const phone = document.cookie
+        .split("; ")
+        [
+          document.cookie
+            .split("; ")
+            .findIndex((item) => item.startsWith("phoneNumber="))
+        ].split("=")[1];
+      const key = document.cookie
+        .split("; ")
+        [
+          document.cookie
+            .split("; ")
+            .findIndex((item) => item.startsWith("key="))
+        ].split("=")[1];
+      if (phone && key) {
+        const res = await authenticateLottery(phone, key);
+        setLotteryData(res);
       } else {
-    redirect("/lottery/auth");
+        redirect("/cekilis/auth");
+      }
     }
-}
 
-const LotteryMain = async () => {
-  const lotteryData = await getData();
+    getData();
+  }, []);
 
-  const status = await getLotteryStatus(
+  const status = getLotteryStatus(
     lotteryData?.data.start_time,
     lotteryData?.data.end_time
   );
@@ -33,14 +50,15 @@ const LotteryMain = async () => {
       <h1 className="text-[50px]">{lotteryData.errorMessage}</h1>
     </div>
   ) : (
+    lotteryData?.data && (
       <div className="flex flex-col md:gap-[128px] gap-[80px] font-roboto md:pt-[64px] sm:pt-[48px] pt-[40px] ms:pb-[128px] pb-[80px] text-lightOnSurface">
         <div className="flex flex-col sm:gap-[64px] gap-[40px]">
           <LotteryHeader
-          title={lotteryData.data.title}
-          description={lotteryData.data.description}
-          image={lotteryData.data.image}
-          smsCode={lotteryData.data.sms_code}
-          startDate={lotteryData.data.start_time}
+            title={lotteryData?.data.title}
+            description={lotteryData?.data.description}
+            image={lotteryData?.data.image}
+            smsCode={lotteryData?.data.sms_code}
+            startDate={lotteryData?.data.start_time}
           />
 
           {status === "Upcoming" && (
@@ -59,7 +77,7 @@ const LotteryMain = async () => {
           <div className="w-full">
             <div className="container">
               <Link
-              href="/lottery/auth"
+                href="/cekilis/auth"
                 className="sm:text-textLarge sm:leading-textLarge text-[16px] rounded-full leading-[24px] sm:py-[12px] py-[8px] w-full flex justify-center items-center border-2 border-lightPrimary  hover:bg-lightPrimary font-medium text-lightPrimary hover:text-lightOnPrimary disabled:opacity-50 transition-all duration-300"
               >
                 Çykmak
@@ -68,6 +86,7 @@ const LotteryMain = async () => {
           </div>
         </div>
       </div>
+    )
   );
 };
 

components/lottery/LotteryWinnersSection.tsx

@@ -1,5 +1,4 @@
 import { useState, useEffect } from "react";
-import { useLotteryAuth } from "@/store/useLotteryAuth";
 import { LotteryWinnerDataSimplified } from "@/typings/lottery/lottery.types";
 import LotteryWinnersList from "./winners/LotteryWinnersList";
 import LotterySlotCounter from "./slotCounter/LotterySlotCounter";

components/lottery/auth/LotteryAuthForm.tsx

@@ -36,10 +36,9 @@ const LotteryAuthForm = () => {
       if (response.errorMessage) {
         setError(response.errorMessage);
       } else {
-        console.log(response);
-        document.cookie = `phoneNumber=${phoneNumber};path=/`;
-        document.cookie = `key=${key};path=/`;
-        router.replace("/lottery");
+        document.cookie = `phoneNumber=${phoneNumber};path=/;max-age=3600;`;
+        document.cookie = `key=${key};path=/;max-age=3600;`;
+        router.replace("/cekilis");
       }
     } catch (err) {
       setError("Telefon belgisi ýa-da açar nädogry");

components/lottery/countDown/LotteryCountDown.tsx

@@ -57,10 +57,10 @@ const LotteryCountDown: React.FC<LotteryCountDownProps> = ({
     <div className="bg-lightPrimaryContainer sm:p-6 py-3 flex flex-col w-full md:gap-2 rounded-[12px] sm:gap-3 gap-0 text-lightOnPrimaryContainer">
       <h3 className="text-center md:font-heading-1-regular sm:text-[32px] sm:leading-[40px] text-[20px] leading-[28px] text-lightOnSurface">
         {status === "Ongoing"
-          ? "Bije dowam edýär"
+          ? "Çeklis dowam edýär"
           : status === "Finished"
-          ? "Bije tamamlandy"
-          : "Bije"}
+          ? "Çeklisx tamamlandy"
+          : null}
       </h3>
       {/* LotteryCountDown */}
       {status === "Upcoming" && (
@@ -69,9 +69,6 @@ const LotteryCountDown: React.FC<LotteryCountDownProps> = ({
             <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 md:text-[20px] sm:text-[18px] text-[14px] sm:leading-[28px] leading-[20px] -tracking-[1%] text-lightOnSurfaceVariant">
-              sagat
-            </h4>
           </div>
 
           {/* Dots */}
@@ -84,9 +81,6 @@ const LotteryCountDown: React.FC<LotteryCountDownProps> = ({
             <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 md:text-[20px] sm:text-[18px] text-[14px] sm:leading-[28px] leading-[20px] -tracking-[1%] text-lightOnSurfaceVariant">
-              minut
-            </h4>
           </div>
 
           {/* Dots */}
@@ -99,22 +93,9 @@ const LotteryCountDown: React.FC<LotteryCountDownProps> = ({
             <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 md:text-[20px] sm:text-[18px] text-[14px] sm:leading-[28px] leading-[20px] -tracking-[1%] text-lightOnSurfaceVariant">
-              sekunt
-            </h4>
           </div>
         </div>
       )}
-
-      <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>
-          {status === "Upcoming"
-            ? "- den başlar"
-            : status === "Ongoing"
-            ? "girmek üçin aşakda kodyňyzy giriziň"
-            : "netijeleri görmek üçin aşakda kodyňyzy giriziň"}
-        </span>
-      </div>
     </div>
   );
 };

components/lottery/rules/LotteryRulesSection.tsx

@@ -19,11 +19,6 @@ const LotteryRulesSection = ({ show = true, data }: IProps) => {
     data ? data?.data?.bije_count : 0
   );
 
-  if (!data.errorMessage) {
-    document.cookie = "phoneNumber=;path=/";
-    document.cookie = "key=;path=/";
-  }
-
   // Subscribe to WebSocket messages
   useEffect(() => {
     const unsubscribe = subscribeToMessages((event) => {
@@ -77,9 +72,9 @@ const LotteryRulesSection = ({ show = true, data }: IProps) => {
               </ul>
             </div>
 
-            <div className="bg-lightSurfaceContainer flex flex-col gap-4 px-4 py-[12px] rounded-[12px]">
+            <div className="bg-lightSurfaceContainer flex items-center gap-4 px-4 py-[12px] rounded-[12px]">
               <h1 className="md:font-heading-5-regular sm:text-[20px] text-[18px] sm:leading-[24px] leading-[28px]">
-                Umumy gatnaşyjylaryň sany:
+                Gatnaşyjylaryň sany:
               </h1>
               <p className="text-[24px]">{totalParticipants}</p>
             </div>

components/lottery/winners/LotteryWinner.tsx

@@ -1,6 +1,6 @@
-'use client';
+"use client";
 
-import { motion } from 'framer-motion';
+import { motion } from "framer-motion";
 
 interface IProps {
   phone: string;
@@ -14,14 +14,14 @@ const LotteryWinner = ({ phone, ticket, isNew, winnerNumber }: IProps) => {
     <motion.div
       layout
       initial={isNew ? { opacity: 0, translateY: 20 } : false}
-      animate={{ opacity: 1, translateY: 0 }}
-      exit={{ opacity: 0, translateY: -20 }}
+      animate={isNew ? { opacity: 1, translateY: 0 } : false}
       transition={{ duration: 0.5 }}
-      className="flex flex-col gap-2 md:pb-4 pb-3 border-b w-full border-[#CECCFF]">
+      className="flex flex-col gap-2 md:pb-4 pb-3 border-b w-full border-[#CECCFF]"
+    >
       <h4 className="md:font-heading-6-regular text-[20px] leading-[28px]">
         {/* The winner of the {winnerNumber} stage: */}
         {winnerNumber}
-        {' - nji ýeňiji'}
+        {" - nji ýeňiji"}
       </h4>
       <div className="flex items-center gap-4">
         <p className="md:font-base-medium font-base-regular">{phone}</p>

lib/actions.ts

@@ -1,6 +1,4 @@
-"use server";
-
-export async function getLotteryStatus(startTime: string, endTime: string) {
+export function getLotteryStatus(startTime: string, endTime: string) {
   const now = new Date();
   const start = new Date(startTime);
   const end = new Date(endTime);

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev --turbopack -p 4000",
+    "dev": "next dev -p 4000",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"