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

tablet responsive done

This commit is contained in:
Kakabay 2024-12-13 16:37:37 +05:00
parent 9a6c76df21
commit 08a2e5d5fe
8 changed files with 44 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
app/(main)/lottery/active/page.tsx
View File

@ -35,7 +35,7 @@ const page = () => {
}
return (
<div className="flex flex-col gap-[128px] font-roboto md:pt-[64px] sm:pt-[48px] pt-[40px] pb-[128px] text-lightOnSurface">
<div className="flex flex-col md:gap-[128px] gap-[80px] font-roboto md:pt-[64px] sm:pt-[48px] pt-[40px] pb-[128px] text-lightOnSurface">
{data && (
<section className="">
<div className="container">
@ -82,10 +82,10 @@ const page = () => {
</div>
)}
<div className="bg-lightSurfaceContainer flex flex-col gap-6">
<div className="bg-lightSurfaceContainer flex flex-col">
<LotteryCountDown
startDate={'2024-12-9 16:15:00'}
endDate={'2024-12-10 16:00:00'}
startDate={'2024-12-14 16:15:00'}
endDate={'2024-12-15 16:00:00'}
lotteryStatus={lotteryStatus}
setLotteryStatus={setLotteryStatus}
/>
@ -99,15 +99,15 @@ const page = () => {
<section className="flex flex-col gap-[40px]">
{lotteryStatus === 'not-started' && (
<LotteryCountDown
startDate={'2024-12-9 16:15:00'}
endDate={'2024-12-10 16:00:00'}
startDate={'2024-12-14 16:15:00'}
endDate={'2024-12-15 16:00:00'}
lotteryStatus={lotteryStatus}
setLotteryStatus={setLotteryStatus}
/>
)}
<LotteryCountDownAllert
startDate={'2024-12-9 16:15:00'}
endDate={'2024-12-10 16:00:00'}
startDate={'2024-12-14 16:15:00'}
endDate={'2024-12-15 16:00:00'}
lotteryStatus={lotteryStatus}
setLotteryStatus={setLotteryStatus}
/>

4
components/lottery/LotteryWinnersSection.tsx
View File

@ -10,12 +10,12 @@ const LotteryWinnersSection = () => {
return (
<section>
<div className="container">
<div className="flex gap-6 bg-lightSurfaceContainer rounded-[12px]">
<div className="flex gap-6 bg-lightSurfaceContainer rounded-[12px] flex-1">
{/* Winners */}
<LotteryWinnersList winners={winners} />
{/* Sping the wheel */}
<div className="flex justify-center items-center w-full h-full px-8 py-[29px]">
<div className="flex justify-center items-center md:w-full h-full md:px-8 md:py-[29px] p-6">
<SpinWheel setWinners={setWinners} />
</div>
</div>

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

@ -44,9 +44,11 @@ const LotteryCountDown: React.FC<LotteryCountDownProps> = ({
return () => clearInterval(timer); // Clean up interval on component unmount
}, [startDate, endDate, lotteryStatus, setLotteryStatus]);
console.log(lotteryStatus);
return (
<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">
<div className="bg-lightPrimaryContainer sm:p-6 p-2 flex flex-col w-full md:gap-2 rounded-[12px] text-lightOnPrimaryContainer">
<h3 className="text-center md:font-heading-1-regular text-[32px] leading-[40px] text-lightOnSurface">
{lotteryStatus === 'started'
? 'Bije dowam edýär'
: lotteryStatus === 'ended'

2
components/lottery/form/LotteryForm.tsx
View File

@ -19,7 +19,7 @@ const LotteryForm = () => {
</div>
</div>
<button className="p-[10px] w-full flex items-center justify-center text-lightPrimary font-small-medium rounded-full outline-none border border-lightOutline hover:bg-[#57599214] transition-all ease-in-out duration-300">
<button className="p-[10px] w-full flex items-center justify-center text-lightPrimary md:font-small-medium text-[14px] leading-[20px] rounded-full outline-none border border-lightOutline hover:bg-[#57599214] transition-all ease-in-out duration-300">
Tassyklamak
</button>
</div>

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

@ -2,12 +2,16 @@ const LotteryRulesSection = () => {
return (
<section>
<div className="container">
<div className="flex flex-col gap-8">
<h2 className="font-heading-1-regular">Lotereýanyň duzgunleri:</h2>
<div className="flex flex-col md:gap-8 gap-6">
<h2 className="md:font-heading-1-regular text-[32px] leading-[40px]">
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]">
<div className="flex flex-col md:gap-4 gap-2 bg-lightSurfaceContainer py-4 md:px-8 px-6 rounded-[12px] w-full">
<h3 className="md:font-heading-5-regular text-[20px] leading-[24px]">
Umumy düzgünler:
</h3>
<ul className="list-disc flex flex-col md:gap-4 gap-2 pl-[16px]">
{Array(5)
.fill(' ')
.map((item, i) => (
@ -18,9 +22,9 @@ const LotteryRulesSection = () => {
</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]">
<div className="flex flex-col md:gap-4 gap-2 bg-lightSurfaceContainer py-4 md:px-8 px-6 rounded-[12px] w-full">
<h3 className="md:font-heading-5-regular text-[20px] leading-[24px]">Üns beriň:</h3>
<ul className="list-disc flex flex-col md:gap-4 gap-2 pl-[16px]">
{Array(1)
.fill(' ')
.map((item, i) => (

12
components/lottery/spinWheel/SpinWheel.tsx
View File

@ -82,14 +82,14 @@ const SpinWheel = ({ setWinners }: IProps) => {
/>
</div>
)}
<div className="relative rounded-full max-w-[554px] max-h-[554px] w-full h-full">
<div className="relative rounded-full md:max-w-[554px] md:max-h-[554px] w-[276px] h-[276px] md:w-full md:h-full">
{/* Wheel triangle */}
<Image
src={'/wheel-triangle.svg'}
alt="wheel"
height={34}
width={35}
className="absolute z-10 left-[50%] -translate-x-[50%] lg:top-7 top-[17px]"
className="absolute z-10 left-[50%] -translate-x-[50%] lg:top-7 top-[17px] md:w-[34px] md:h-[34px] w-[17px] h-[17px]"
/>
{/* Wheel */}
@ -111,15 +111,15 @@ const SpinWheel = ({ setWinners }: IProps) => {
</div>
{/* Countdown */}
<div className="absolute top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%] lg:w-[105px] lg:h-[105px] h-[75px] w-[75px] rounded-full z-10 bg-white flex items-center justify-center ">
<span className="text-[#79536A] font-roboto lg:text-[60px] text-[45px] leading-[70px] tracking-[-1%]">
<div className="absolute top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%] lg:w-[105px] lg:h-[105px] md:h-[75px] md:w-[75px] w-[50px] h-[50px] rounded-full z-10 bg-white flex items-center justify-center ">
<span className="text-[#79536A] font-roboto lg:text-[60px] md:text-[45px] text-[28px] leading-[70px] tracking-[-1%]">
{countdown}
</span>
</div>
</div>
{/* Spin Button */}
<button
{/* <button
onClick={handleSpinClick}
disabled={isSpinning || isCountingDown}
className={`mt-6 px-6 py-3 rounded-full text-white font-bold ${
@ -132,7 +132,7 @@ const SpinWheel = ({ setWinners }: IProps) => {
: isSpinning
? 'Spinning...'
: 'Spin the Wheel'}
</button>
</button> */}
</div>
);
};

6
components/lottery/winners/LotteryWinner.tsx
View File

@ -18,8 +18,10 @@ const LotteryWinner = ({ index, number }: IProps) => {
opacity: 1,
translateY: 0,
}}
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>
className="flex flex-col gap-2 md:pb-4 pb-3 last:border-none border-b border-lightOutlineVariant">
<h4 className="md:font-heading-5-regular text-[20px] leading-[28px]">
The winner of the {index + 1} stage:
</h4>
<p className="font-base-medium">8 XX XX-XX-XX</p>
</motion.div>
);

12
components/lottery/winners/LotteryWinnersList.tsx
View File

@ -2,15 +2,17 @@ import LotteryWinner from './LotteryWinner';
const LotteryWinnersList = ({ winners }: { winners: number[] }) => {
return (
<div className="flex flex-col w-full p-8 gap-4">
<div className="flex flex-col gap-2 pb-4 border-b border-lightOutlineVariant">
<div className="flex flex-col w-full md:p-8 p-6 gap-4">
<div className="flex flex-col gap-2 md:pb-4 pb-3 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>
{winners.map((_, index) => (
<LotteryWinner number="8 XX XX-XX-XX" index={index} />
))}
<div className="flex flex-col w-full gap-4">
{winners.map((_, index) => (
<LotteryWinner number="8 XX XX-XX-XX" index={index} />
))}
</div>
</div>
);
};