Ilgeldi
/
turkmentv_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix ui errors

This commit is contained in:
Ilgeldi 2025-02-11 17:34:39 +05:00
parent f035fd03cc
commit 714932d3f3
13 changed files with 86 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
app/(main)/lottery/auth/page.tsx → app/(main)/cekilis/auth/page.tsx
View File

0
app/(main)/lottery/page.tsx → app/(main)/cekilis/page.tsx
View File

4
components/MobileMenu.tsx
View File

@ -178,9 +178,9 @@ const MobileMenu = () => {
Sowgatlar Sowgatlar
</Link> </Link>
<Link <Link
href={'/lottery/auth'} href={'/cekilis/auth'}
className="block text-2xl text-white transition-all font-roboto font-bold" 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={() => { onClick={() => {
setDropDownOpened(false); setDropDownOpened(false);
onClickCloseBurgerHandler(); onClickCloseBurgerHandler();

6
components/Nav.tsx
View File

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

2
components/common/Confetti.tsx
View File

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

111
components/lottery/LotteryMain.tsx
View File

@ -1,29 +1,46 @@
"use client";
import LotteryHeader from "@/components/lottery/LotteryHeader"; import LotteryHeader from "@/components/lottery/LotteryHeader";
import LotteryRulesSection from "@/components/lottery/rules/LotteryRulesSection"; import LotteryRulesSection from "@/components/lottery/rules/LotteryRulesSection";
import LotteryCountDown from "@/components/lottery/countDown/LotteryCountDown"; import LotteryCountDown from "@/components/lottery/countDown/LotteryCountDown";
import Link from "next/link"; import Link from "next/link";
import { authenticateLottery } from "@/api"; import { authenticateLottery } from "@/api";
import { redirect } from "next/navigation"; import { redirect } from "next/navigation";
import { cookies } from "next/headers";
import { getLotteryStatus } from "@/lib/actions"; import { getLotteryStatus } from "@/lib/actions";
import LotteryWinners from "./LotteryWinners"; import LotteryWinners from "./LotteryWinners";
import { useEffect, useState } from "react";
import { ILotteryResponse } from "@/models/lottery/lottery.model";
async function getData() { const LotteryMain = () => {
const cookieStore = await cookies(); const [lotteryData, setLotteryData] = useState<any>();
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;
} else {
redirect("/lottery/auth");
}
}
const LotteryMain = async () => { useEffect(() => {
const lotteryData = await getData(); 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("/cekilis/auth");
}
}
const status = await getLotteryStatus( getData();
}, []);
const status = getLotteryStatus(
lotteryData?.data.start_time, lotteryData?.data.start_time,
lotteryData?.data.end_time lotteryData?.data.end_time
); );
@ -33,41 +50,43 @@ const LotteryMain = async () => {
<h1 className="text-[50px]">{lotteryData.errorMessage}</h1> <h1 className="text-[50px]">{lotteryData.errorMessage}</h1>
</div> </div>
) : ( ) : (
<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"> lotteryData?.data && (
<div className="flex flex-col sm:gap-[64px] gap-[40px]"> <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">
<LotteryHeader <div className="flex flex-col sm:gap-[64px] gap-[40px]">
title={lotteryData.data.title} <LotteryHeader
description={lotteryData.data.description} title={lotteryData?.data.title}
image={lotteryData.data.image} description={lotteryData?.data.description}
smsCode={lotteryData.data.sms_code} image={lotteryData?.data.image}
startDate={lotteryData.data.start_time} smsCode={lotteryData?.data.sms_code}
/> startDate={lotteryData?.data.start_time}
/>
{status === "Upcoming" && ( {status === "Upcoming" && (
<div className="container"> <div className="container">
<LotteryCountDown <LotteryCountDown
lotteryStatus={status} lotteryStatus={status}
endDate={lotteryData.data.end_time} endDate={lotteryData.data.end_time}
startDate={lotteryData.data.start_time} startDate={lotteryData.data.start_time}
/> />
</div> </div>
)} )}
</div> </div>
<LotteryRulesSection data={lotteryData} /> <LotteryRulesSection data={lotteryData} />
<div className="flex flex-col gap-10"> <div className="flex flex-col gap-10">
<LotteryWinners data={lotteryData} lotteryStatus={status} /> <LotteryWinners data={lotteryData} lotteryStatus={status} />
<div className="w-full"> <div className="w-full">
<div className="container"> <div className="container">
<Link <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" 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 Çykmak
</Link> </Link>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> )
); );
}; };

1
components/lottery/LotteryWinnersSection.tsx
View File

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

7
components/lottery/auth/LotteryAuthForm.tsx
View File

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

25
components/lottery/countDown/LotteryCountDown.tsx
View File

@ -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"> <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"> <h3 className="text-center md:font-heading-1-regular sm:text-[32px] sm:leading-[40px] text-[20px] leading-[28px] text-lightOnSurface">
{status === "Ongoing" {status === "Ongoing"
? "Bije dowam edýär" ? "Çeklis dowam edýär"
: status === "Finished" : status === "Finished"
? "Bije tamamlandy" ? "Çeklisx tamamlandy"
: "Bije"} : null}
</h3> </h3>
{/* LotteryCountDown */} {/* LotteryCountDown */}
{status === "Upcoming" && ( {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%]"> <h3 className="md:text-[80px] sm:text-[56px] text-[28px] md:leading-[88px] sm:leading-[64px] leading-[36px] -tracking-[1%]">
{timeLeft.hours} {timeLeft.hours}
</h3> </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> </div>
{/* Dots */} {/* 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%]"> <h3 className="md:text-[80px] sm:text-[56px] text-[28px] md:leading-[88px] sm:leading-[64px] leading-[36px] -tracking-[1%]">
{timeLeft.minutes} {timeLeft.minutes}
</h3> </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> </div>
{/* Dots */} {/* 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%]"> <h3 className="md:text-[80px] sm:text-[56px] text-[28px] md:leading-[88px] sm:leading-[64px] leading-[36px] -tracking-[1%]">
{timeLeft.seconds} {timeLeft.seconds}
</h3> </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> </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> </div>
); );
}; };

9
components/lottery/rules/LotteryRulesSection.tsx
View File

@ -19,11 +19,6 @@ const LotteryRulesSection = ({ show = true, data }: IProps) => {
data ? data?.data?.bije_count : 0 data ? data?.data?.bije_count : 0
); );
if (!data.errorMessage) {
document.cookie = "phoneNumber=;path=/";
document.cookie = "key=;path=/";
}
// Subscribe to WebSocket messages // Subscribe to WebSocket messages
useEffect(() => { useEffect(() => {
const unsubscribe = subscribeToMessages((event) => { const unsubscribe = subscribeToMessages((event) => {
@ -77,9 +72,9 @@ const LotteryRulesSection = ({ show = true, data }: IProps) => {
</ul> </ul>
</div> </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]"> <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> </h1>
<p className="text-[24px]">{totalParticipants}</p> <p className="text-[24px]">{totalParticipants}</p>
</div> </div>

12
components/lottery/winners/LotteryWinner.tsx
View File

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

4
lib/actions.ts
View File

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

2
package.json
View File

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