Ilgeldi
/
turkmen-textile-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

timer added

This commit is contained in:
Batyr 2025-06-05 17:05:49 +05:00
parent 514aeec4fd
commit f235185eb9
2 changed files with 27 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/shared/home/home-timer.tsx
View File

@ -86,8 +86,7 @@ export const HomeTimer: FC<Props> = ({ className }) => {
seconds: string;
};
return (
<section className={cn("2xl:w-[600px] xl:w-[450px] w-[350px]", className)}>
<div className="grid grid-cols-4 w-full mr-[50%] gap-6 items-end place-items-center">
<div className="flex flex-col fixed left-0 top-1/3 gap-2 bg-[#E7E5E5] py-4 pr-4 rounded drop-shadow-md z-[100]">
<TimerItem
value={timeLeft.days}
prevValue={prevValues.days || timeLeft.days}
@ -109,6 +108,5 @@ export const HomeTimer: FC<Props> = ({ className }) => {
label={secondsLabel}
/>
</div>
</section>
);
};

10
src/components/shared/timer-item.tsx
View File

@ -7,24 +7,24 @@ export const TimerItem = ({
label: string;
prevValue: string;
}) => (
<div className="timer-item flex flex-col items-center">
<div className="relative sm:h-14 h-6 w-16 overflow-hidden font-bold">
<div className="timer-item flex flex-col items-center justify-center bg-teritary p-1 rounded-[2px]">
<div className="relative font-bold h-10 ">
<span
className={`absolute left-1/2 -translate-x-1/2 black bg-gradient-to-t from-white to-surface_high text-transparent bg-clip-text sm:text-5xl text-xl leading-none transition-all duration-300 ${
className={`absolute -translate-x-1/2 black flex text-center text-white text-transparent size-10 sm:text-3xl text-xl leading-none transition-all duration-300 ${
prevValue !== value ? " opacity-0" : " opacity-100"
}`}
>
{prevValue}
</span>
<span
className={`absolute left-1/2 -translate-x-1/2 black bg-gradient-to-t from-white to-surface_high text-transparent bg-clip-text sm:text-5xl text-xl leading-none transition-all duration-300 ${
className={`absolute -translate-x-1/2 black text-center bg-gradient-to-t from-white to-surface_high text-transparent bg-clip-text sm:text-3xl text-xl leading-none transition-all duration-300 ${
prevValue !== value ? "opacity-100" : "opacity-0"
}`}
>
{value}
</span>
</div>
<div className="label normal sm:text-lg text-base text-[#FAD8DB]">
<div className="label normal sm:text-lg text-base text-[#FACFAE] text-center">
{label}
</div>
</div>