54 lines
2.8 KiB
TypeScript
54 lines
2.8 KiB
TypeScript
import React from "react";
|
|
import StaggeredDropDown from "./StaggeredDropdown";
|
|
|
|
const SearchSection: React.FC = () => {
|
|
return (
|
|
<section className="w-full py-8 px-4 bg-white">
|
|
<div className="max-w-screen-lg mx-auto text-center">
|
|
{/* Heading */}
|
|
<h1 className="text-2xl md:text-3xl font-bold text-gray-800">
|
|
<span className="text-red-600">Eksplorasi</span> dan <span className="text-red-600">Download</span> Liputan Resmi Kami
|
|
</h1>
|
|
<div className="w-auto h-1 bg-red-600 mx-auto mt-2"></div>
|
|
<p className="text-sm md:text-base text-gray-500 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 items-center border border-gray-300 rounded-lg overflow-hidden">
|
|
<button className="flex items-center px-4 py-2 bg-gray-100 text-gray-600 hover:bg-gray-200">
|
|
<span className="material-icons text-gray-500 mr-2">
|
|
<svg 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="#000000"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
<StaggeredDropDown />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Search Input */}
|
|
<div className="flex items-center flex-1 border border-gray-300 rounded-lg overflow-hidden">
|
|
<span className="material-icons text-black px-4">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
|
|
<path
|
|
fill="black"
|
|
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 focus:outline-none" />
|
|
</div>
|
|
|
|
{/* Button */}
|
|
<button className="px-6 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700">Cari Liputan ></button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default SearchSection;
|