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

LotteryCountDown reafactored

This commit is contained in:
Kakabay 2024-12-11 18:14:14 +05:00
parent 6574cf7ad3
commit 0a3066d398
1 changed files with 46 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,6 @@
'use client'; 'use client';
import { calculateTimeLeft } from '@/lib/hooks/useCalculateTimeLeft';
import React, { useState, useEffect, Dispatch, SetStateAction } from 'react'; import React, { useState, useEffect, Dispatch, SetStateAction } from 'react';
interface LotteryCountDownProps { interface LotteryCountDownProps {
@ -21,22 +22,6 @@ const LotteryCountDown: React.FC<LotteryCountDownProps> = ({
seconds: 0, seconds: 0,
}); });
const calculateTimeLeft = (targetDate: string) => {
const now = new Date();
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 }; // Countdown finished
}
const hours = Math.floor(timeDifference / (1000 * 60 * 60));
const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);
return { hours, minutes, seconds };
};
useEffect(() => { useEffect(() => {
const timer = setInterval(() => { const timer = setInterval(() => {
if (lotteryStatus === 'not-started') { if (lotteryStatus === 'not-started') {
@ -60,57 +45,63 @@ const LotteryCountDown: React.FC<LotteryCountDownProps> = ({
}, [startDate, endDate, lotteryStatus, setLotteryStatus]); }, [startDate, endDate, lotteryStatus, setLotteryStatus]);
return ( return (
<div className="bg-lightPrimaryContainer sm:pb-4 pb-2 flex flex-col w-full gap-2 rounded-[12px] text-lightOnPrimaryContainer"> <div className="bg-lightPrimaryContainer sm:p-6 p-2 flex flex-col w-full gap-2 rounded-[12px] text-lightOnPrimaryContainer">
<h3 className="text-center font-heading-1-regular text-lightOnSurface">
{lotteryStatus === 'started'
? 'Bije dowam edýär'
: lotteryStatus === 'ended'
? 'Bije tamamlandy'
: 'Bije'}
</h3>
{/* LotteryCountDown */} {/* LotteryCountDown */}
<div className="flex items-center sm:gap-6 gap-2 justify-between"> {lotteryStatus === 'not-started' && (
<div className="flex flex-col items-center justify-center flex-1 p-6"> <div className="flex items-center sm:gap-6 gap-2 justify-between">
<h3 className="md:text-[80px] sm:text-[56px] text-[28px] md:leading-[88px] sm:leading-[64px] leading-[36px] -tracking-[1%]"> <div className="flex flex-col items-center justify-center flex-1 p-6">
{timeLeft.hours} <h3 className="md:text-[80px] sm:text-[56px] text-[28px] md:leading-[88px] sm:leading-[64px] leading-[36px] -tracking-[1%]">
</h3> {timeLeft.hours}
<h4 className="font-medium md:text-[20px] sm:text-[18px] text-[14px] sm:leading-[28px] leading-[20px] -tracking-[1%] text-lightOnSurfaceVariant"> </h3>
hours <h4 className="font-medium md:text-[20px] sm:text-[18px] text-[14px] sm:leading-[28px] leading-[20px] -tracking-[1%] text-lightOnSurfaceVariant">
</h4> hours
</div> </h4>
</div>
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
<div className="w-3 h-3 rounded-full bg-lightPrimaryOutline"></div> <div className="w-3 h-3 rounded-full bg-lightOnSurfaceVariant"></div>
<div className="w-3 h-3 rounded-full bg-lightPrimaryOutline"></div> <div className="w-3 h-3 rounded-full bg-lightOnSurfaceVariant"></div>
</div> </div>
<div className="flex flex-col items-center justify-center flex-1 sm:p-6 p-4 pb-3"> <div className="flex flex-col items-center justify-center flex-1 sm:p-6 p-4 pb-3">
<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"> <h4 className="font-medium md:text-[20px] sm:text-[18px] text-[14px] sm:leading-[28px] leading-[20px] -tracking-[1%] text-lightOnSurfaceVariant">
minutes minutes
</h4> </h4>
</div> </div>
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
<div className="w-3 h-3 rounded-full bg-lightPrimaryOutline"></div> <div className="w-3 h-3 rounded-full bg-lightOnSurfaceVariant"></div>
<div className="w-3 h-3 rounded-full bg-lightPrimaryOutline"></div> <div className="w-3 h-3 rounded-full bg-lightOnSurfaceVariant"></div>
</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 p-6">
<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"> <h4 className="font-medium md:text-[20px] sm:text-[18px] text-[14px] sm:leading-[28px] leading-[20px] -tracking-[1%] text-lightOnSurfaceVariant">
seconds seconds
</h4> </h4>
</div>
</div> </div>
</div> )}
{/* Separator */}
<div className="w-full bg-lightPrimaryOutline h-[1px]"></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]"> <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> <span>
{lotteryStatus === 'not-started' {lotteryStatus === 'not-started'
? '- den başlar' ? '- den başlar'
: lotteryStatus === 'started' : lotteryStatus === 'started'
? '- den gutatar' ? 'girmek üçin aşakda kodyňyzy giriziň'
: 'gutardy'} : 'netijeleri görmek üçin aşakda kodyňyzy giriziň'}
</span> </span>
</div> </div>
</div> </div>