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

import search from "@/app/[locale]/(protected)/app/chat/components/search";
import { useTranslations } from "next-intl";
import { useParams, useRouter } from "next/navigation";
import router from "next/router";
import React, { useEffect, useState } from "react";
import { Icon } from "@iconify/react/dist/iconify.js";
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
import Image from "next/image";
import { getHeroData } from "@/service/landing/landing";
import { title } from "process";
import { htmlToString } from "@/utils/globals";
import { Link } from "@/i18n/routing";
import { Button } from "../ui/button";

const ScrollableContent = () => {
  const [contentType, setContentType] = useState("all");
  const [search, setSearch] = useState("");
  const [seeAllValueSatker, setSeeAllValueSatker] = useState(false);
  const [seeAllValuePolda, setSeeAllValuePolda] = useState(false);
  const router = useRouter();
  const params = useParams();
  const locale = params?.locale;
  const t = useTranslations("LandingPage");
  const [content, setContent] = useState<any>();

  useEffect(() => {
    async function fetchCategories() {
      const url = "https://netidhub.com/api/csrf";

      try {
        const response = await fetch(url);

        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json();
        return data;
      } catch (error) {
        console.error("Fetch error: ", error);
      }
    }

    fetchCategories();
    initFetch();
  }, []);

  const initFetch = async () => {
    const response = await getHeroData(locale == "en");
    console.log(response);
    let data = response?.data?.data?.content;

    setContent(data);
  };

  return (
    <>
      <div className="">
        <h1 className="text-2xl md:text-3xl font-bold text-gray-800 dark:text-white">
          <span className="text-[#c03724] dark:text-white">
            {t("exploration")}&nbsp;{t("and")}
          </span>
          <span className="text-[#c03724] dark:text-white">
            &nbsp;{t("download")}&nbsp;{t("coverage")}
          </span>{" "}
        </h1>
        <div className="w-[10%] h-1 bg-[#bb3523] mt-2"></div>
        <div className="w-full h-1 bg-[#bb3523] mx-auto"></div>
        <p className="text-sm md:text-base text-black dark:text-gray-100 mt-4">{t("officialCoverage")}</p>

        <div className="mt-6 flex flex-col md:flex-row justify-center gap-4">
          <div className="flex flex-row items-center w-full rounded-lg gap-2 overflow-hidden">
            <Select value={contentType} onValueChange={setContentType}>
              <SelectTrigger className="w-[180px] h-[55px]">
                <span className="text-black">
                  <svg className="mx-2 dark:" 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>
                </span>
                <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("searchCoverageHere")} className="w-full py-4 px-2 text-sm text-gray-700 dark:text-gray-100 focus:outline-none" onChange={(e) => setSearch(e.target.value)} />
            </div>
          </div>
          <button onClick={() => router.push(`/${contentType}/filter?title=${search}`)} className="flex justify-center items-center px-6 w-full lg:w-[20%] py-4 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>
      <div className="flex flex-col md:flex-row gap-6 py-8">
        {/* Berita Polda */}
        <div className="w-full md:w-1/2 px-4">
          <h2 className="text-lg md:text-xl font-bold text-[#bb3523] mb-2 uppercase">{t("regionNews")}</h2>
          <div className="w-[10%] h-1 bg-[#bb3523]"></div>
          <div className="w-full h-1 bg-[#bb3523] mx-auto mb-4"></div>
          <div className="grid gap-4">
            {(seeAllValuePolda ? content : content?.slice(0, 3))?.map((item: any, index: number) => (
              <div key={index} className={`bg-white rounded-lg shadow-md overflow-hidden ${index === 0 ? "" : "flex"}`}>
                <div className={`relative ${index === 0 ? "w-full h-48" : " w-1/2 h-[150px]"}`}>
                  <Link
                    href={
                      Number(item?.fileTypeId) == 1
                        ? `${locale}/image/detail/${item?.slug}`
                        : Number(item?.fileTypeId) == 2
                        ? `${locale}/video/detail/${item?.slug}`
                        : Number(item?.fileTypeId) == 3
                        ? `${locale}/document/detail/${item?.slug}`
                        : `${locale}/audio/detail/${item?.slug}`
                    }
                  >
                    <Image src={item?.smallThumbnailLink} alt={item?.title} layout="fill" objectFit="cover" />
                    <div className="absolute top-2 right-2 bg-[#c03724] rounded-full p-1 shadow">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                        <g fill="none">
                          <path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
                          <path
                            fill="white"
                            d="M20 6a2 2 0 0 1 2 2v11.333a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2zm-8.268 7.944L7.136 18.54l-.066.06l-.07.054v.68h13v-.68l-.07-.053l-.066-.06l-2.24-2.24l-.353.354l.055.055a1 1 0 0 1-1.32 1.497l-.094-.083zM17 3a2 2 0 0 1 1.995 1.85L19 5H5a1 1 0 0 0-.993.883L4 6v12a2 2 0 0 1-1.995-1.85L2 16V6a3 3 0 0 1 2.824-2.995L5 3zm3 5H7v7.848L10.848 12a1.25 1.25 0 0 1 1.768 0l3.241 3.24l.884-.883a1.25 1.25 0 0 1 1.768 0L20 15.848zm-3.5 1.5a1.5 1.5 0 1 1 0 3a1.5 1.5 0 0 1 0-3"
                          />
                        </g>
                      </svg>
                    </div>
                  </Link>
                </div>
                {/* <Link
                  href={
                    Number(item?.fileTypeId) == 1
                      ? `${locale}/image/detail/${item?.slug}`
                      : Number(item?.fileTypeId) == 2
                      ? `${locale}/video/detail/${item?.slug}`
                      : Number(item?.fileTypeId) == 3
                      ? `${locale}/document/detail/${item?.slug}`
                      : `${locale}/audio/detail/${item?.slug}`
                  }
                > */}
                <div className={`${index === 0 ? "p-4" : "p-3 w-[50%]"}`}>
                  <p className="text-sm text-[#bb3523] font-bold mb-1">{item.categoryName}</p>
                  <h3 className="text-sm font-semibold text-gray-800">{item.title}</h3>
                  <p className="text-xs text-gray-500 mt-1 truncate">{htmlToString(item.description)}</p>
                </div>
              </div>
            ))}
            {/* <button className="w-fit px-2 mt-2 py-2 border flex flex-row gap-2 border-[#bb3523] bg-white text-[#bb3523] rounded-lg font-semibold hover:bg-[#bb3523] hover:border-white hover:text-white transition">
              LEBIH SEDIKIT
              <span className="text-[#bb3523] hover:text-white">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                  <path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="m10 17l5-5m0 0l-5-5" />
                </svg>
              </span>
            </button>{" "} */}
            {/* Tombol See More / See Less */}
                      {content?.length > 3 && (
                        <div className="flex items-center flex-row justify-start mt-6">
                          <Button onClick={() => setSeeAllValuePolda(!seeAllValuePolda)} className="bg-white hover:bg-[#bb3523] text-[#bb3523] hover:text-white border-2 border-[#bb3523]">
                            {seeAllValuePolda ? t("seeLess") : t("seeMore")} <span className="text-[#bb3523] hover:text-white">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                  <path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="m10 17l5-5m0 0l-5-5" />
                </svg>
              </span>
                          </Button>
                        </div>
                      )}
          </div>
        </div>

        {/* Berita SATKER */}
        <div className="w-full md:w-1/2 px-4">
          <h2 className="text-lg md:text-xl font-bold mb-2 text-[#bb3523] uppercase">{t("divisionNews")}</h2>
          <div className="w-[10%] h-1 bg-[#bb3523]"></div>
          <div className="w-full h-1 bg-[#bb3523] mx-auto mb-4"></div>
          <div className="grid gap-4">
            {/* {seeAllValue ? content : content
              ?.filter((item: any) => item.isPublishOnPolda === true)
              .slice(0, 3)
              .map((item: any, index: number) => (
                <div key={index} className={`bg-white rounded-lg shadow-md overflow-hidden ${index === 0 ? "" : "flex"}`}>
                  <div className={`relative ${index === 0 ? "w-full h-48" : " w-1/2 h-[150px]"}`}>
                    <Link
                      href={
                        Number(item?.fileTypeId) == 1
                          ? `${locale}/image/detail/${item?.slug}`
                          : Number(item?.fileTypeId) == 2
                          ? `${locale}/video/detail/${item?.slug}`
                          : Number(item?.fileTypeId) == 3
                          ? `${locale}/document/detail/${item?.slug}`
                          : `${locale}/audio/detail/${item?.slug}`
                      }
                    >
                      <Image src={item.thumbnailLink} alt={item.title} layout="fill" objectFit="cover" />
                      <div className="absolute top-2 right-2 bg-[#c03724] rounded-full p-1 shadow">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                          <g fill="none">
                            <path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
                            <path
                              fill="white"
                              d="M20 6a2 2 0 0 1 2 2v11.333a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2zm-8.268 7.944L7.136 18.54l-.066.06l-.07.054v.68h13v-.68l-.07-.053l-.066-.06l-2.24-2.24l-.353.354l.055.055a1 1 0 0 1-1.32 1.497l-.094-.083zM17 3a2 2 0 0 1 1.995 1.85L19 5H5a1 1 0 0 0-.993.883L4 6v12a2 2 0 0 1-1.995-1.85L2 16V6a3 3 0 0 1 2.824-2.995L5 3zm3 5H7v7.848L10.848 12a1.25 1.25 0 0 1 1.768 0l3.241 3.24l.884-.883a1.25 1.25 0 0 1 1.768 0L20 15.848zm-3.5 1.5a1.5 1.5 0 1 1 0 3a1.5 1.5 0 0 1 0-3"
                            />
                          </g>
                        </svg>
                      </div>
                    </Link>
                  </div>
                  <div className={`${index === 0 ? "p-4" : "p-3 w-[50%]"}`}>
                    <p className="text-sm text-[#bb3523] font-bold mb-1">{item.categoryName}</p>
                    <h3 className="text-sm font-semibold text-gray-800">{item.title}</h3>
                    <p className="text-xs text-gray-500 mt-1 truncate">{htmlToString(item.description)}</p>
                  </div>
                </div>
              ))} */}
            {/* <button className="w-fit px-2 mt-2 py-2 border flex flex-row gap-2 border-[#bb3523] bg-white text-[#bb3523] rounded-lg font-semibold hover:bg-[#bb3523] hover:text-white transition">
              LEBIH SEDIKIT
              <span className="text-[#bb3523] hover:text-white">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                  <path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="m10 17l5-5m0 0l-5-5" />
                </svg>
              </span>
            </button> */}
            {(seeAllValueSatker ? content : content?.slice(0, 3))?.map((item: any, index: number) => (
              <div key={index} className={`bg-white rounded-lg shadow-md overflow-hidden ${index === 0 ? "" : "flex"}`}>
                <div className={`relative ${index === 0 ? "w-full h-48" : " w-1/2 h-[150px]"}`}>
                  <Link
                    href={
                      Number(item?.fileTypeId) == 1
                        ? `${locale}/image/detail/${item?.slug}`
                        : Number(item?.fileTypeId) == 2
                        ? `${locale}/video/detail/${item?.slug}`
                        : Number(item?.fileTypeId) == 3
                        ? `${locale}/document/detail/${item?.slug}`
                        : `${locale}/audio/detail/${item?.slug}`
                    }
                  >
                    <Image src={item?.smallThumbnailLink} alt={item?.title} layout="fill" objectFit="cover" />
                    <div className="absolute top-2 right-2 bg-[#c03724] rounded-full p-1 shadow">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                        <g fill="none">
                          <path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
                          <path
                            fill="white"
                            d="M20 6a2 2 0 0 1 2 2v11.333a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2zm-8.268 7.944L7.136 18.54l-.066.06l-.07.054v.68h13v-.68l-.07-.053l-.066-.06l-2.24-2.24l-.353.354l.055.055a1 1 0 0 1-1.32 1.497l-.094-.083zM17 3a2 2 0 0 1 1.995 1.85L19 5H5a1 1 0 0 0-.993.883L4 6v12a2 2 0 0 1-1.995-1.85L2 16V6a3 3 0 0 1 2.824-2.995L5 3zm3 5H7v7.848L10.848 12a1.25 1.25 0 0 1 1.768 0l3.241 3.24l.884-.883a1.25 1.25 0 0 1 1.768 0L20 15.848zm-3.5 1.5a1.5 1.5 0 1 1 0 3a1.5 1.5 0 0 1 0-3"
                          />
                        </g>
                      </svg>
                    </div>
                  </Link>
                </div>
                {/* <Link
                  href={
                    Number(item?.fileTypeId) == 1
                      ? `${locale}/image/detail/${item?.slug}`
                      : Number(item?.fileTypeId) == 2
                      ? `${locale}/video/detail/${item?.slug}`
                      : Number(item?.fileTypeId) == 3
                      ? `${locale}/document/detail/${item?.slug}`
                      : `${locale}/audio/detail/${item?.slug}`
                  }
                > */}
                <div className={`${index === 0 ? "p-4" : "p-3 w-[50%]"}`}>
                  <p className="text-sm text-[#bb3523] font-bold mb-1">{item.categoryName}</p>
                  <h3 className="text-sm font-semibold text-gray-800">{item.title}</h3>
                  <p className="text-xs text-gray-500 mt-1 truncate">{htmlToString(item.description)}</p>
                </div>
              </div>
            ))}
             {/* Tombol See More / See Less */}
                      {content?.length > 3 && (
                        <div className="flex items-center flex-row justify-start mt-6">
                          <Button onClick={() => setSeeAllValueSatker(!seeAllValueSatker)} className="bg-white hover:bg-[#bb3523] text-[#bb3523] hover:text-white border-2 border-[#bb3523]">
                      
                    
                            {seeAllValueSatker ? t("seeLess") : t("seeMore")} <span className="text-[#bb3523] hover:text-white">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                  <path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="m10 17l5-5m0 0l-5-5" />
                </svg>
              </span>
                          </Button>
                        </div>
                      )}
          </div>
        </div>
      </div>
    </>
  );
};

export default ScrollableContent;