mediahub-fe/components/landing-page/SearchSection.tsx

import React from "react";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "../ui/dropdown-menu";
import { FiFile, FiImage, FiMusic, FiYoutube } from "react-icons/fi";

const SearchSection = () => {
  return (
    <section className="w-full py-8 px-4 ">
      <div className="max-w-screen-lg 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">Eksplorasiii</span>{" "}
          dan <span className="text-[#bb3523] dark:text-white">Download</span>{" "}
          Liputan Resmi Kami
        </h1>
        <div className="w-full 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 items-center justify-center rounded-lg 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>
                  Konten
                  <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" />
                    Audio Visual
                  </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" />
                    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" />
                    Foto
                  </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" />
                    Teks
                  </span>
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>

          {/* Search Input */}
          <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"
            />
          </div>

          {/* Button */}
          <button className="px-6 py-2 bg-[#bb3523] text-white rounded-lg hover:bg-red-700">
            Cari Liputan &gt;
          </button>
        </div>
      </div>
    </section>
  );
};

export default SearchSection;