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
</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();

6
components/Nav.tsx
View File

@ -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>

2
components/common/Confetti.tsx
View File

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

111
components/lottery/LotteryMain.tsx
View File

@ -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;
} else {
redirect("/lottery/auth");
}
}
const LotteryMain = () => {
const [lotteryData, setLotteryData] = useState<any>();
const LotteryMain = async () => {
const lotteryData = await getData();
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("/cekilis/auth");
}
}
const status = await getLotteryStatus(
getData();
}, []);
const status = getLotteryStatus(
lotteryData?.data.start_time,
lotteryData?.data.end_time
);
@ -33,41 +50,43 @@ const LotteryMain = async () => {
<h1 className="text-[50px]">{lotteryData.errorMessage}</h1>
</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">
<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}
/>
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}
/>
{status === "Upcoming" && (
<div className="container">
<LotteryCountDown
lotteryStatus={status}
endDate={lotteryData.data.end_time}
startDate={lotteryData.data.start_time}
/>
</div>
)}
</div>
<LotteryRulesSection data={lotteryData} />
<div className="flex flex-col gap-10">
<LotteryWinners data={lotteryData} lotteryStatus={status} />
<div className="w-full">
<div className="container">
<Link
href="/lottery/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
</Link>
{status === "Upcoming" && (
<div className="container">
<LotteryCountDown
lotteryStatus={status}
endDate={lotteryData.data.end_time}
startDate={lotteryData.data.start_time}
/>
</div>
)}
</div>
<LotteryRulesSection data={lotteryData} />
<div className="flex flex-col gap-10">
<LotteryWinners data={lotteryData} lotteryStatus={status} />
<div className="w-full">
<div className="container">
<Link
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
</Link>
</div>
</div>
</div>
</div>
</div>
)
);
};

1
components/lottery/LotteryWinnersSection.tsx
View File

@ -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";

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

@ -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");

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">
<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>
);
};

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

@ -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>

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 {
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>

4
lib/actions.ts
View File

@ -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);

2
package.json
View File

@ -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"