fix: sidebarLeft Fixing
This commit is contained in:
parent
caa0c60a8a
commit
f6abd4ebc4
|
|
@ -0,0 +1,143 @@
|
|||
import { useParams, usePathname, useRouter } from "next/navigation";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Icon } from "@iconify/react/dist/iconify.js";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
|
||||
const WelcomePoldaKaltara = () => {
|
||||
const router = useRouter();
|
||||
const asPath: any = usePathname();
|
||||
const params = useParams();
|
||||
const poldaName: any = params?.polda_name;
|
||||
const [categorySelect, setCategorySelect] = useState("0");
|
||||
const t = useTranslations("LandingPage");
|
||||
const [contentType, setContentType] = useState("all");
|
||||
const [search, setSearch] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
function initState() {
|
||||
console.log(categorySelect);
|
||||
}
|
||||
|
||||
initState();
|
||||
}, [categorySelect]);
|
||||
|
||||
return (
|
||||
<section className="w-full py-8 px-4">
|
||||
<div className="">
|
||||
{/* Heading */}
|
||||
<h1 className="text-2xl md:text-3xl font-bold text-gray-800 dark:text-white">
|
||||
<span className="text-[#bb3523] dark:text-white">{t("welcome")} Di Polda</span> <span className="capitalize text-[#bb3523] dark:text-white">{poldaName.replace("-", " ")}</span>
|
||||
</h1>
|
||||
<div className="w-[80%] h-1 bg-[#bb3523] mx-auto mt-2"></div>
|
||||
<p className="text-sm md:text-base text-gray-500 dark:text-gray-100 mt-4">
|
||||
{t("polda")} <span className="capitalize">{poldaName.replace("-", " ")}</span>
|
||||
</p>
|
||||
|
||||
{/* Search Form */}
|
||||
{/* <div className="mt-6 flex flex-col md:flex-row justify-center gap-4"> */}
|
||||
{/* Dropdown */}
|
||||
{/* <div className="flex flex-row items-center w-full rounded-lg gap-2 overflow-hidden">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<a className="text-black dark:text-white flex flex-row justify-center items-center ml-5 cursor-pointer">
|
||||
<svg className="mx-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M20 7.5H5C4.6023 7.5004 4.221 7.65856 3.93978 7.93978C3.65856 8.221 3.5004 8.6023 3.5 9V19.5C3.5004 19.8977 3.65856 20.279 3.93978 20.5602C4.221 20.8414 4.6023 20.9996 5 21H20C20.3977 20.9996 20.779 20.8414 21.0602 20.5602C21.3414 20.279 21.4996 19.8977 21.5 19.5V9C21.4996 8.6023 21.3414 8.221 21.0602 7.93978C20.779 7.65856 20.3977 7.5004 20 7.5ZM10.25 17.25V11.25L15.5 14.25L10.25 17.25ZM5 4.5H20V6H5V4.5ZM6.5 1.5H18.5V3H6.5V1.5Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
{t("content")}
|
||||
<svg className="flex items-center justify-center" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
|
||||
<path fill="currentColor" fill-rule="evenodd" d="m6 7l6 6l6-6l2 2l-8 8l-8-8z" />
|
||||
</svg>
|
||||
</a>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="p-0 rounded-md overflow-hidden">
|
||||
<DropdownMenuItem className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group">
|
||||
<span className="text-default-700c flex flex-row justify-center items-center group-hover:text-primary-foreground">
|
||||
<FiYoutube className="mr-2" />
|
||||
{t("video")}
|
||||
</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group">
|
||||
<span className="text-default-700 flex flex-row justify-center items-center group-hover:text-primary-foreground">
|
||||
<FiMusic className="mr-2" />
|
||||
{t("audio")}
|
||||
</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group">
|
||||
<span className="text-default-700 flex flex-row justify-center items-center group-hover:text-primary-foreground">
|
||||
<FiImage className="mr-2" />
|
||||
{t("image")}
|
||||
</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group">
|
||||
<span className="text-default-700 flex flex-row justify-center items-center group-hover:text-primary-foreground">
|
||||
<FiFile className="mr-2" />
|
||||
{t("text")}
|
||||
</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<div className="flex items-center flex-1 border border-gray-300 rounded-lg overflow-hidden">
|
||||
<span className="material-icons text-black dark:text-white px-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="m19.6 21l-6.3-6.3q-.75.6-1.725.95T9.5 16q-2.725 0-4.612-1.888T3 9.5t1.888-4.612T9.5 3t4.613 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l6.3 6.3zM9.5 14q1.875 0 3.188-1.312T14 9.5t-1.312-3.187T9.5 5T6.313 6.313T5 9.5t1.313 3.188T9.5 14"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<Input type="text" placeholder={t("search")} className="w-full py-2 px-2 text-sm text-gray-700 dark:text-gray-100 focus:outline-none" />
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
{/* Button */}
|
||||
{/* <button className="flex justify-center items-center px-6 w-full lg:w-[20%] py-2 bg-[#bb3523] gap-2 text-white rounded-lg hover:bg-red-700">
|
||||
{t("searchCoverage")} <Icon icon="ri:arrow-right-s-line" fontSize={20} />
|
||||
</button> */}
|
||||
{/* </div> */}
|
||||
|
||||
<div className="mt-6 flex flex-col md:flex-row justify-center gap-4">
|
||||
{/* Dropdown */}
|
||||
<div className="flex flex-row items-center w-full rounded-lg gap-2 overflow-hidden">
|
||||
<Select value={contentType} onValueChange={setContentType}>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem value="all">{t("allContent")}</SelectItem>
|
||||
<SelectItem value="image">{t("image")}</SelectItem>
|
||||
<SelectItem value="video">{t("video")}</SelectItem>
|
||||
<SelectItem value="document">{t("text")}</SelectItem>
|
||||
<SelectItem value="audio">{t("audio")}</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<div className="flex items-center flex-1 border border-gray-300 rounded-lg overflow-hidden">
|
||||
<span className="material-icons text-black dark:text-white px-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="m19.6 21l-6.3-6.3q-.75.6-1.725.95T9.5 16q-2.725 0-4.612-1.888T3 9.5t1.888-4.612T9.5 3t4.613 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l6.3 6.3zM9.5 14q1.875 0 3.188-1.312T14 9.5t-1.312-3.187T9.5 5T6.313 6.313T5 9.5t1.313 3.188T9.5 14"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<input type="text" placeholder={t("search")} className="w-full py-2 px-2 text-sm text-gray-700 dark:text-gray-100 focus:outline-none" onChange={(e) => setSearch(e.target.value)} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Search Input */}
|
||||
<button onClick={() => router.push(`/${contentType}/filter?title=${search}`)} className="flex justify-center items-center px-6 w-full lg:w-[20%] py-2 bg-[#bb3523] gap-2 text-white rounded-lg hover:bg-red-700">
|
||||
{t("searchCoverage")}
|
||||
<Icon icon="ri:arrow-right-s-line" fontSize={20} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default WelcomePoldaKaltara;
|
||||
|
|
@ -18,15 +18,13 @@ 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 LeftBanner from "./left-banner";
|
||||
|
||||
// const LeftBanner = () => (
|
||||
// <div className="sticky top-0 space-y-4 ml-14">
|
||||
// <img src="/images/all-img/kiri1.png" alt="Banner Kiri 1" width={180} />
|
||||
// <img src="/images/all-img/kiri2.png" alt="Banner Kiri 2" width={180} />
|
||||
// </div>
|
||||
// );
|
||||
const LeftBanner = () => (
|
||||
<div className="sticky top-0 space-y-4 ml-14">
|
||||
<img src="/images/all-img/kiri1.png" alt="Banner Kiri 1" width={180} />
|
||||
<img src="/images/all-img/kiri2.png" alt="Banner Kiri 2" width={180} />
|
||||
</div>
|
||||
);
|
||||
|
||||
const RightBanner = () => (
|
||||
<div className="sticky top-0 space-y-4">
|
||||
|
|
|
|||
Loading…
Reference in New Issue