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

continued lottery page

This commit is contained in:
Kakabay 2024-11-18 19:36:51 +05:00
parent fa37c440bb
commit 49464e0c2e
5 changed files with 159 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
app/(main)/(lottery)/lottery/page.tsx
View File

@ -1,14 +1,15 @@
import CountDown from '@/components/lottery/countDown/CountDown';
import Image from 'next/image';
import React from 'react';
const page = () => {
return (
<div className="flex flex-col gap-[128px]">
<section className="py-[64px]">
<div className="flex flex-col gap-[128px] font-roboto pt-[64px] pb-[128px] text-lightOnSurface">
<section className="">
<div className="container">
<div className="flex flex-col gap-[32px]">
<h1 className="font-display-1-regular text-center">Bije</h1>
<div>
<div className="mb-8">
<Image
src="/banner-lottery.jpg"
width={1416}
@ -17,13 +18,66 @@ const page = () => {
className="rounded-[12px]"
/>
</div>
<CountDown />
</div>
</div>
</section>
<section>
<div className="container">
<div></div>
<div className="flex gap-6 bg-lightSurfaceContainer rounded-[12px]">
{/* Winners */}
<div className="flex flex-col w-full p-8 gap-4">
<div className="flex flex-col gap-2 pb-4 border-b border-lightOutlineVariant">
<h4 className="font-heading-3-regular">Results</h4>
<p className="font-base-medium">The results after each stage will be shown here.</p>
</div>
{[...Array(5)].map((item, index) => (
<div className="flex flex-col gap-2 pb-4 last:border-none border-b border-lightOutlineVariant">
<h4 className="font-heading-5-regular">The winner of the {index + 1} stage:</h4>
<p className="font-base-medium">8 XX XX-XX-XX</p>
</div>
))}
</div>
{/* Sping the wheel */}
<div className="flex justify-center items-center w-full"></div>
</div>
</div>
</section>
<section>
<div className="container">
<div className="flex flex-col gap-8">
<h2 className="font-heading-1-regular">Lotereýanyň duzgunleri:</h2>
<div className="flex gap-6">
<div className="flex flex-col gap-4 bg-lightSurfaceContainer py-4 px-8 rounded-[12px] w-full">
<h3 className="font-heading-5-regular">Umumy düzgünler:</h3>
<ul className="list-disc flex flex-col gap-4 pl-[16px]">
{Array(5)
.fill(' ')
.map((item) => (
<li className="font-small-regular">
Ilkinji we dogry jogap beren sanawda ilkinji ýeri eýelýär
</li>
))}
</ul>
</div>
<div className="flex flex-col gap-4 bg-lightSurfaceContainer py-4 px-8 rounded-[12px] w-full">
<h3 className="font-heading-5-regular">Üns beriň:</h3>
<ul className="list-disc flex flex-col gap-4 pl-[16px]">
{Array(1)
.fill(' ')
.map((item) => (
<li className="font-small-regular">SMS = 1 manat</li>
))}
</ul>
</div>
</div>
</div>
</div>
</section>
</div>

19
app/globals.css
View File

@ -215,3 +215,22 @@ big {
@apply font-roboto text-[56px] leading-[64px] -tracking-[1%] font-normal;
}
}
.font-heading-1-regular {
@apply -tracking-[1%] text-[36px] leading-[44px];
}
.font-heading-3-regular {
@apply -tracking-[1%] text-[28px] leading-[36px];
}
.font-heading-5-regular {
@apply -tracking-[1%] text-[24px] leading-[32px];
}
.font-base-medium {
@apply font-medium -tracking-[1%] text-[16px] leading-[24px];
}
.font-small-regular {
@apply -tracking-[1%] text-[14px] leading-[20px];
}

57
components/lottery/countDown/CountDown.tsx Normal file
View File

@ -0,0 +1,57 @@
const CountDown = () => {
return (
<div className="bg-lightSurfaceContainer pb-8 flex flex-col w-full gap-2 rounded-[12px]">
{/* Countdown */}
<div className="flex items-center gap-6">
{/* {Array(5)
.fill(' ')
.map((item, index) =>
index % 2 === 0 ? (
<div className="flex flex-col items-center justify-center flex-1 p-6">
<h3 className="text-[80px] leading-[88px] -tracking-[1%]">12</h3>
<h4 className="font-medium text-[20px] leading-[28px] -tracking-[1%]">sagat</h4>
</div>
) : (
<div className="flex flex-col gap-3">
<div className="w-3 h-3 rounded-full bg-lightOutlineVariant"></div>
<div className="w-3 h-3 rounded-full bg-lightOutlineVariant"></div>
</div>
),
)} */}
<div className="flex flex-col items-center justify-center flex-1 p-6">
<h3 className="text-[80px] leading-[88px] -tracking-[1%]">12</h3>
<h4 className="font-medium text-[20px] leading-[28px] -tracking-[1%]">sagat</h4>
</div>
<div className="flex flex-col gap-3">
<div className="w-3 h-3 rounded-full bg-lightOutlineVariant"></div>
<div className="w-3 h-3 rounded-full bg-lightOutlineVariant"></div>
</div>
<div className="flex flex-col items-center justify-center flex-1 p-6">
<h3 className="text-[80px] leading-[88px] -tracking-[1%]">44</h3>
<h4 className="font-medium text-[20px] leading-[28px] -tracking-[1%]">minut</h4>
</div>
<div className="flex flex-col gap-3">
<div className="w-3 h-3 rounded-full bg-lightOutlineVariant"></div>
<div className="w-3 h-3 rounded-full bg-lightOutlineVariant"></div>
</div>
<div className="flex flex-col items-center justify-center flex-1 p-6">
<h3 className="text-[80px] leading-[88px] -tracking-[1%]">36</h3>
<h4 className="font-medium text-[20px] leading-[28px] -tracking-[1%]">sekund</h4>
</div>
</div>
{/* Seperator */}
<div className="w-full bg-lightOutlineVariant h-[1px]"></div>
<div className="flex items-center justify-center text-lightOnSurface font-heading-1-regular">
<span>-dan başlar</span>
</div>
</div>
);
};
export default CountDown;

15
components/lottery/countDown/CountDownCell.tsx Normal file
View File

@ -0,0 +1,15 @@
interface IProps {
number: string;
title: string;
}
const CountDownCell = ({ number, title }: IProps) => {
return (
<div className="flex flex-col items-center justify-center flex-1 p-6">
<h3 className="text-[80px] leading-[88px] -tracking-[1%]">{number}</h3>
<h4 className="font-medium text-[20px] leading-[28px] -tracking-[1%]">{title}</h4>
</div>
);
};
export default CountDownCell;

10
components/lottery/countDown/CountDownSemicolmn.tsx Normal file
View File

@ -0,0 +1,10 @@
const CountDownSemicolmn = () => {
return (
<div className="flex flex-col gap-3">
<div className="w-3 h-3 rounded-full bg-lightOutlineVariant"></div>
<div className="w-3 h-3 rounded-full bg-lightOutlineVariant"></div>
</div>
);
};
export default CountDownSemicolmn;