mediahub-fe/components/landing-page/search-section.tsx

66 lines
2.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, { useState } from "react";
import { useTheme } from "next-themes";
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 AdvertisementPlacements from "./advertisement-placements";
const SearchSection = () => {
const [contentType, setContentType] = useState("all");
const [search, setSearch] = useState("");
const router = useRouter();
const t = useTranslations("LandingPage");
const { theme } = useTheme();
// 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-[130px] space-y-4 self-start">
<AdvertisementPlacements placement="left"/>
</div>
<div className="w-full xl:w-[70%] px-4 py-8 bg-white">
<ScrollableContent />
<NewContent group="mabes" type="latest" />
<NewContent group="mabes" type="popular" />
<ContentCategory group="mabes" type="popular" />
<AreaCoverageWorkUnits />
<EventCalender />
<UserSurveyBox />
</div>
<div className="hidden xl:block w-[15%] pl-4 py-5 sticky top-[130px] space-y-4 self-start">
<AdvertisementPlacements placement="right" />
</div>
</div>
);
};
export default SearchSection;