87 lines
3.0 KiB
TypeScript
87 lines
3.0 KiB
TypeScript
"use client";
|
|
import LotteryHeader from "@/components/lottery/LotteryHeader";
|
|
import LotteryRulesSection from "@/components/lottery/rules/LotteryRulesSection";
|
|
import LotteryCountDown from "@/components/lottery/countDown/LotteryCountDown";
|
|
import Link from "next/link";
|
|
import { authenticateLottery } from "@/api";
|
|
import { useRouter } from "next/navigation";
|
|
import { getLotteryStatus } from "@/lib/actions";
|
|
import LotteryWinners from "./LotteryWinners";
|
|
import { useEffect, useState } from "react";
|
|
import { useMediaQuery } from "usehooks-ts";
|
|
|
|
const LotteryMain = () => {
|
|
const [lotteryData, setLotteryData] = useState<any>();
|
|
const router = useRouter();
|
|
const mobile = useMediaQuery("(max-width: 768px)");
|
|
|
|
useEffect(() => {
|
|
async function getData() {
|
|
const phone = localStorage.getItem("phoneNumber");
|
|
const key = localStorage.getItem("key");
|
|
if (phone && key) {
|
|
const res = await authenticateLottery(phone, key);
|
|
setLotteryData(res);
|
|
} else {
|
|
localStorage.clear();
|
|
router.push("/b/auth");
|
|
}
|
|
}
|
|
|
|
getData();
|
|
}, []);
|
|
|
|
const status = getLotteryStatus(
|
|
lotteryData?.data.start_time,
|
|
lotteryData?.data.end_time
|
|
);
|
|
|
|
return lotteryData?.errorMessage ? (
|
|
<div className="flex flex-1 w-full justify-center items-center">
|
|
<h1 className="text-[50px]">{lotteryData.errorMessage}</h1>
|
|
</div>
|
|
) : (
|
|
lotteryData?.data && (
|
|
<div className="flex flex-col font-roboto md:pt-[64px] sm:pt-[48px] pt-[40px] ms:pb-[128px] pb-[80px] text-lightOnSurface">
|
|
<div className="flex flex-col sm:gap-[64px] gap-[40px] pb-[80px]">
|
|
<LotteryHeader
|
|
title={lotteryData?.data.title}
|
|
description={lotteryData?.data.description}
|
|
image={
|
|
mobile ? lotteryData?.data.image_mobile : lotteryData?.data.image
|
|
}
|
|
smsCode={lotteryData?.data.sms_code}
|
|
startDate={lotteryData?.data.start_time}
|
|
/>
|
|
|
|
{status === "Upcoming" && (
|
|
<div className="container">
|
|
<LotteryCountDown
|
|
lotteryStatus={status}
|
|
endDate={lotteryData.data.end_time}
|
|
startDate={lotteryData.data.start_time}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<LotteryRulesSection data={lotteryData} />
|
|
<div className="flex flex-col gap-10 mt-[40px]">
|
|
<LotteryWinners data={lotteryData} lotteryStatus={status} />
|
|
<div className="w-full">
|
|
<div className="container">
|
|
<Link
|
|
href="/b/auth"
|
|
className="sm:text-textLarge sm:leading-textLarge text-[16px] rounded-full leading-[24px] sm:py-[12px] py-[8px] w-full flex justify-center items-center border-2 border-lightPrimary hover:bg-lightPrimary font-medium text-lightPrimary hover:text-lightOnPrimary disabled:opacity-50 transition-all duration-300"
|
|
>
|
|
Çykmak
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
);
|
|
};
|
|
|
|
export default LotteryMain;
|