98 lines
3.7 KiB
TypeScript
98 lines
3.7 KiB
TypeScript
import React, { useState } from "react";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "../ui/dropdown-menu";
|
|
import { FiFile, FiImage, FiMusic, FiYoutube } from "react-icons/fi";
|
|
import { Icon } from "@iconify/react/dist/iconify.js";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectGroup,
|
|
SelectItem,
|
|
SelectLabel,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
import { useRouter } from "@/i18n/routing";
|
|
|
|
const SearchSection = () => {
|
|
const [contentType, setContentType] = useState("all");
|
|
const [search, setSearch] = useState("");
|
|
const router = useRouter();
|
|
|
|
return (
|
|
<section className="w-full py-8 px-4 ">
|
|
<div className="max-w-screen-xl mx-auto text-center">
|
|
{/* Heading */}
|
|
<h1 className="text-2xl md:text-3xl font-bold text-gray-800 dark:text-white">
|
|
<span className="text-[#bb3523] dark:text-white">Eksplorasi</span> dan{" "}
|
|
<span className="text-[#bb3523] dark:text-white">Download</span>{" "}
|
|
Liputan Resmi Kami
|
|
</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">
|
|
Liputan resmi yang bersumber dari kegiatan Polri di Mabes dan Polda
|
|
seluruh Indonesia
|
|
</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">
|
|
<Select value={contentType} onValueChange={setContentType}>
|
|
<SelectTrigger className="w-[180px]">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
<SelectItem value="all">Semua Konten</SelectItem>
|
|
<SelectItem value="image">Foto</SelectItem>
|
|
<SelectItem value="video">Audio Visual</SelectItem>
|
|
<SelectItem value="document">Teks</SelectItem>
|
|
<SelectItem value="audio">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="Pencarian"
|
|
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"
|
|
>
|
|
Cari Liputan <Icon icon="ri:arrow-right-s-line" fontSize={20} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default SearchSection;
|