108 lines
3.1 KiB
TypeScript
108 lines
3.1 KiB
TypeScript
import {
|
|
Select,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
SelectContent,
|
|
SelectGroup,
|
|
SelectItem,
|
|
} from "@radix-ui/react-select";
|
|
import { Icon } from "lucide-react";
|
|
import { useTranslations } from "next-intl";
|
|
import { useRouter } from "next/navigation";
|
|
import router from "next/router";
|
|
import React, { useEffect, useState } from "react";
|
|
import ScrollableContent from "./search-section-new";
|
|
import NewContent from "./new-content";
|
|
import ContentCategory from "./content-category";
|
|
import AreaCoverageWorkUnits from "./area-coverage-and-work-units";
|
|
import EventCalender from "./event-calender";
|
|
import UserSurveyBox from "./survey-box";
|
|
import ScrollableContentPolda from "./scrollable-content-polda";
|
|
import AdvertisementPlacements from "./advertisement-placements";
|
|
import { useTheme } from "next-themes";
|
|
import { listDataAdvertisements } from "@/service/broadcast/broadcast";
|
|
|
|
interface Advertisement {
|
|
id: string;
|
|
placements: string;
|
|
imageUrl: string;
|
|
[key: string]: any;
|
|
}
|
|
|
|
const SearchSectionPolda = () => {
|
|
const [contentType, setContentType] = useState("all");
|
|
const [search, setSearch] = useState("");
|
|
const router = useRouter();
|
|
const t = useTranslations("LandingPage");
|
|
const { theme } = useTheme();
|
|
const [ads, setAds] = useState<Advertisement[]>([]);
|
|
const [loading, setLoading] = useState<boolean>(false);
|
|
|
|
const fetchData = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const res = await listDataAdvertisements(0, "4", "");
|
|
const data = res?.data?.data;
|
|
const contentData = data?.content;
|
|
setAds(contentData);
|
|
// if (props.placement == "left") {
|
|
// setAds(contentData.slice(0, 2));
|
|
// } else {
|
|
// setAds(contentData.slice(2));
|
|
// }
|
|
} catch (error) {
|
|
console.error("Error fetching advertisements:", error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchData();
|
|
}, []);
|
|
|
|
// Determine background image based on theme
|
|
const getBackgroundImage = () => {
|
|
if (theme === "dark") {
|
|
return "url('/assets/background-dark.jpg')";
|
|
} else {
|
|
return "url('/assets/background-white.jpg')";
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className="flex w-full min-h-screen bg-center bg-cover bg-no-repeat"
|
|
style={{ backgroundImage: getBackgroundImage() }}
|
|
>
|
|
<div className="hidden xl:block w-[15%] pr-4 py-5 sticky top-[150px] space-y-4 self-start">
|
|
<AdvertisementPlacements
|
|
placement="left"
|
|
data={ads}
|
|
loading={loading}
|
|
/>
|
|
</div>
|
|
|
|
<div className="w-full xl:w-[70%] px-4 py-8 bg-white dark:bg-black">
|
|
<ScrollableContentPolda />
|
|
<NewContent group="polda" type="latest" />
|
|
<NewContent group="polda" type="popular" />
|
|
<ContentCategory group="polda" type="popular" />
|
|
{/* <AreaCoverageWorkUnits /> */}
|
|
<EventCalender />
|
|
<UserSurveyBox />
|
|
</div>
|
|
|
|
<div className="hidden xl:block w-[15%] pl-4 py-5 sticky top-[150px] space-y-4 self-start">
|
|
<AdvertisementPlacements
|
|
placement="right"
|
|
data={ads}
|
|
loading={loading}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SearchSectionPolda;
|