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';
import { calculateTimeLeft } from '@/lib/hooks/useCalculateTimeLeft';
import React, { useState, useEffect, Dispatch, SetStateAction } from 'react';
interface LotteryCountDownProps {
@ -21,22 +22,6 @@ const LotteryCountDown: React.FC<LotteryCountDownProps> = ({
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(() => {
const timer = setInterval(() => {
if (lotteryStatus === 'not-started') {
@ -60,57 +45,63 @@ const LotteryCountDown: React.FC<LotteryCountDownProps> = ({
}, [startDate, endDate, lotteryStatus, setLotteryStatus]);
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 */}
<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="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">
hours
</h4>
</div>
{lotteryStatus === 'not-started' && (
<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="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">
hours
</h4>
</div>
<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-lightPrimaryOutline"></div>
</div>
<div className="flex flex-col gap-3">
<div className="w-3 h-3 rounded-full bg-lightOnSurfaceVariant"></div>
<div className="w-3 h-3 rounded-full bg-lightOnSurfaceVariant"></div>
</div>
<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%]">
{timeLeft.minutes}
</h3>
<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 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%]">
{timeLeft.minutes}
</h3>
<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-lightPrimaryOutline"></div>
<div className="w-3 h-3 rounded-full bg-lightPrimaryOutline"></div>
</div>
<div className="flex flex-col gap-3">
<div className="w-3 h-3 rounded-full bg-lightOnSurfaceVariant"></div>
<div className="w-3 h-3 rounded-full bg-lightOnSurfaceVariant"></div>
</div>
<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%]">
{timeLeft.seconds}
</h3>
<h4 className="font-medium md:text-[20px] sm:text-[18px] text-[14px] sm:leading-[28px] leading-[20px] -tracking-[1%] text-lightOnSurfaceVariant">
seconds
</h4>
<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%]">
{timeLeft.seconds}
</h3>
<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>
</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]">
<span>
{lotteryStatus === 'not-started'
? '- den başlar'
: lotteryStatus === 'started'
? '- den gutatar'
: 'gutardy'}
? 'girmek üçin aşakda kodyňyzy giriziň'
: 'netijeleri görmek üçin aşakda kodyňyzy giriziň'}
</span>
</div>
</div>