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 ( 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 && ( {data && (
<section className=""> <section className="">
<div className="container"> <div className="container">
@ -82,10 +82,10 @@ const page = () => {
</div> </div>
)} )}
<div className="bg-lightSurfaceContainer flex flex-col gap-6"> <div className="bg-lightSurfaceContainer flex flex-col">
<LotteryCountDown <LotteryCountDown
startDate={'2024-12-9 16:15:00'} startDate={'2024-12-14 16:15:00'}
endDate={'2024-12-10 16:00:00'} endDate={'2024-12-15 16:00:00'}
lotteryStatus={lotteryStatus} lotteryStatus={lotteryStatus}
setLotteryStatus={setLotteryStatus} setLotteryStatus={setLotteryStatus}
/> />
@ -99,15 +99,15 @@ const page = () => {
<section className="flex flex-col gap-[40px]"> <section className="flex flex-col gap-[40px]">
{lotteryStatus === 'not-started' && ( {lotteryStatus === 'not-started' && (
<LotteryCountDown <LotteryCountDown
startDate={'2024-12-9 16:15:00'} startDate={'2024-12-14 16:15:00'}
endDate={'2024-12-10 16:00:00'} endDate={'2024-12-15 16:00:00'}
lotteryStatus={lotteryStatus} lotteryStatus={lotteryStatus}
setLotteryStatus={setLotteryStatus} setLotteryStatus={setLotteryStatus}
/> />
)} )}
<LotteryCountDownAllert <LotteryCountDownAllert
startDate={'2024-12-9 16:15:00'} startDate={'2024-12-14 16:15:00'}
endDate={'2024-12-10 16:00:00'} endDate={'2024-12-15 16:00:00'}
lotteryStatus={lotteryStatus} lotteryStatus={lotteryStatus}
setLotteryStatus={setLotteryStatus} setLotteryStatus={setLotteryStatus}
/> />

4
components/lottery/LotteryWinnersSection.tsx
View File

@ -10,12 +10,12 @@ const LotteryWinnersSection = () => {
return ( return (
<section> <section>
<div className="container"> <div className="container">
<div className="flex gap-6 bg-lightSurfaceContainer rounded-[12px]"> <div className="flex gap-6 bg-lightSurfaceContainer rounded-[12px] flex-1">
{/* Winners */} {/* Winners */}
<LotteryWinnersList winners={winners} /> <LotteryWinnersList winners={winners} />
{/* Sping the wheel */} {/* 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} /> <SpinWheel setWinners={setWinners} />
</div> </div>
</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 return () => clearInterval(timer); // Clean up interval on component unmount
}, [startDate, endDate, lotteryStatus, setLotteryStatus]); }, [startDate, endDate, lotteryStatus, setLotteryStatus]);
console.log(lotteryStatus);
return ( return (
<div className="bg-lightPrimaryContainer sm:p-6 p-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 md:gap-2 rounded-[12px] text-lightOnPrimaryContainer">
<h3 className="text-center font-heading-1-regular text-lightOnSurface"> <h3 className="text-center md:font-heading-1-regular text-[32px] leading-[40px] text-lightOnSurface">
{lotteryStatus === 'started' {lotteryStatus === 'started'
? 'Bije dowam edýär' ? 'Bije dowam edýär'
: lotteryStatus === 'ended' : lotteryStatus === 'ended'

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

@ -19,7 +19,7 @@ const LotteryForm = () => {
</div> </div>
</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 Tassyklamak
</button> </button>
</div> </div>

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

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

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

@ -82,14 +82,14 @@ const SpinWheel = ({ setWinners }: IProps) => {
/> />
</div> </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 */} {/* Wheel triangle */}
<Image <Image
src={'/wheel-triangle.svg'} src={'/wheel-triangle.svg'}
alt="wheel" alt="wheel"
height={34} height={34}
width={35} 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 */} {/* Wheel */}
@ -111,15 +111,15 @@ const SpinWheel = ({ setWinners }: IProps) => {
</div> </div>
{/* Countdown */} {/* 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 "> <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] text-[45px] leading-[70px] tracking-[-1%]"> <span className="text-[#79536A] font-roboto lg:text-[60px] md:text-[45px] text-[28px] leading-[70px] tracking-[-1%]">
{countdown} {countdown}
</span> </span>
</div> </div>
</div> </div>
{/* Spin Button */} {/* Spin Button */}
<button {/* <button
onClick={handleSpinClick} onClick={handleSpinClick}
disabled={isSpinning || isCountingDown} disabled={isSpinning || isCountingDown}
className={`mt-6 px-6 py-3 rounded-full text-white font-bold ${ className={`mt-6 px-6 py-3 rounded-full text-white font-bold ${
@ -132,7 +132,7 @@ const SpinWheel = ({ setWinners }: IProps) => {
: isSpinning : isSpinning
? 'Spinning...' ? 'Spinning...'
: 'Spin the Wheel'} : 'Spin the Wheel'}
</button> </button> */}
</div> </div>
); );
}; };

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

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

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

@ -2,15 +2,17 @@ import LotteryWinner from './LotteryWinner';
const LotteryWinnersList = ({ winners }: { winners: number[] }) => { const LotteryWinnersList = ({ winners }: { winners: number[] }) => {
return ( return (
<div className="flex flex-col w-full p-8 gap-4"> <div className="flex flex-col w-full md:p-8 p-6 gap-4">
<div className="flex flex-col gap-2 pb-4 border-b border-lightOutlineVariant"> <div className="flex flex-col gap-2 md:pb-4 pb-3 border-b border-lightOutlineVariant">
<h4 className="font-heading-3-regular">Results</h4> <h4 className="font-heading-3-regular">Results</h4>
<p className="font-base-medium">The results after each stage will be shown here.</p> <p className="font-base-medium">The results after each stage will be shown here.</p>
</div> </div>
{winners.map((_, index) => ( <div className="flex flex-col w-full gap-4">
<LotteryWinner number="8 XX XX-XX-XX" index={index} /> {winners.map((_, index) => (
))} <LotteryWinner number="8 XX XX-XX-XX" index={index} />
))}
</div>
</div> </div>
); );
}; };