feature

components/lottery/LotteryHeader.tsx

@@ -1,5 +1,5 @@
-import Image from 'next/image';
-import InfoDateAllert from '../common/InfoDateAllert';
+import Image from "next/image";
+import InfoDateAllert from "../common/InfoDateAllert";
 
 interface LotteryHeaderProps {
   title: string;
@@ -9,7 +9,13 @@ interface LotteryHeaderProps {
   startDate: string;
 }
 
-const LotteryHeader = ({ title, description, image, smsCode, startDate }: LotteryHeaderProps) => {
+const LotteryHeader = ({
+  title,
+  description,
+  image,
+  smsCode,
+  startDate,
+}: LotteryHeaderProps) => {
   return (
     <section className="container">
       <div className="flex flex-col md:gap-[32px] gap-[24px]">
@@ -17,7 +23,9 @@ const LotteryHeader = ({ title, description, image, smsCode, startDate }: Lotter
           <h1 className="sm:font-display-1-regular text-[32px] leading-[40px] text-center">
             {title}
           </h1>
-          <p className="text-center text-textLarge leading-textLarge">{description}</p>
+          <p className="text-center text-textLarge leading-textLarge">
+            {description}
+          </p>
           <InfoDateAllert date={startDate} text="Senesi:" />
         </div>
         {image && (
@@ -27,7 +35,7 @@ const LotteryHeader = ({ title, description, image, smsCode, startDate }: Lotter
               width={1416}
               height={177}
               alt="banner"
-              className="rounded-[12px] h-[177px] md:object-cover"
+              className="rounded-[12px] h-[177px] object-cover"
             />
           </div>
         )}

components/lottery/LotteryMain.tsx

@@ -8,10 +8,12 @@ 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() {
@@ -45,7 +47,9 @@ const LotteryMain = () => {
           <LotteryHeader
             title={lotteryData?.data.title}
             description={lotteryData?.data.description}
-            image={lotteryData?.data.image}
+            image={
+              mobile ? lotteryData?.data.image_mobile : lotteryData?.data.image
+            }
             smsCode={lotteryData?.data.sms_code}
             startDate={lotteryData?.data.start_time}
           />

components/toss/index.tsx

@@ -6,9 +6,11 @@ import { getTossData } from "@/api/queries";
 import { getLotteryStatus } from "@/lib/actions";
 import LotteryWinners from "../lottery/LotteryWinners";
 import { useEffect, useState } from "react";
+import { useMediaQuery } from "usehooks-ts";
 
 const TossPage = ({ type, id }: { type: "bije" | "cekilis"; id: string }) => {
   const [tossData, setTossData] = useState<any>();
+  const mobile = useMediaQuery("(max-width: 768px)");
 
   useEffect(() => {
     const getData = async () => {
@@ -32,7 +34,9 @@ const TossPage = ({ type, id }: { type: "bije" | "cekilis"; id: string }) => {
               <LotteryHeader
                 title={tossData.data.title}
                 description={tossData.data.description}
-                image={tossData.data.image}
+                image={
+                  mobile ? tossData?.data.image_mobile : tossData?.data.image
+                }
                 smsCode={tossData.data.sms_code}
                 startDate={tossData.data.start_time}
               />