web-isu-kini/components/landing-page/opini.tsx

"use client";

import { useEffect, useState } from "react";
import Image from "next/image";
import { getListArticle } from "@/service/article";
import Link from "next/link";

type Article = {
  id: number;
  title: string;
  description: string;
  categoryName: string;
  createdAt: string;
  createdByName: string;
  thumbnailUrl: string;
  categories: {
    title: string;
  }[];
  files: {
    fileUrl: string;
    file_alt: string;
  }[];
};

export default function Opini() {
  const [opini, setOpini] = useState<Article[]>([]);
  const [jagaNegeri, setJagaNegeri] = useState<Article[]>([]);
  const [showDataOpini, setShowDataOpini] = useState("4");
  const [showData, setShowData] = useState("3");

  useEffect(() => {
    fetchOpini();
    fetchJagaNegeri();
  }, []);

  async function fetchOpini() {
    try {
      const res = await getListArticle({
        limit: showDataOpini,
        search: "",
        page: 1,
        categorySlug: "",
        sort: "desc",
        isPublish: true,
        sortBy: "created_at",
      });
      setOpini(res?.data?.data || []);
    } catch (err) {
      console.error("Gagal load Opini:", err);
    }
  }

  async function fetchJagaNegeri() {
    try {
      const res = await getListArticle({
        limit: showData,
        search: "",
        page: 1,
        categorySlug: "",
        sort: "desc",
        isPublish: true,
        sortBy: "created_at",
      });
      setJagaNegeri(res?.data?.data || []);
    } catch (err) {
      console.error("Gagal load Jaga Negeri:", err);
    }
  }

  return (
    <section className="w-full px-4 md:px-12 pt-8">
      <div className="max-w-screen-xl mx-auto flex flex-col md:flex-row gap-8 justify-between">
        {/* OPINI */}
        <div className="w-full md:w-4/12">
          <h2 className="text-xl font-semibold pb-2 flex items-center justify-between">
            OPINI
            <div className="flex-grow border-t-3 border-gray-300 rounded-md mx-3 mt-1"></div>
            <span className="text-gray-400 text-sm">‹ ›</span>
          </h2>

          <div className="mt-6 space-y-6">
            {opini.map((item) => (
              <div
                key={item.id}
                className="flex items-start gap-4 border-b pb-4"
              >
                <Link className="flex gap-4" href={`/detail/${item?.id}`}>
                  <Image
                    src={item.thumbnailUrl || "/dummy.jpg"}
                    alt={item.title}
                    width={109}
                    height={70}
                    className="w-[109px] h-16 object-cover"
                  />
                  <div>
                    <p className="text-sm font-medium font-serif">
                      {item.title}
                    </p>
                    <p className="text-xs text-gray-500 mt-1 flex items-center gap-1">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                      >
                        <g fill="none">
                          <path d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2z" />
                          <path
                            fill="currentColor"
                            d="M12 4a8 8 0 100 16 8 8 0 000-16zm1 4v4.586l2.707 2.707-1.414 1.414L11 13.414V8h2z"
                          />
                        </g>
                      </svg>
                      {new Date(item.createdAt).toLocaleDateString("id-ID", {
                        day: "numeric",
                        month: "long",
                        year: "numeric",
                      })}
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        className="h-4 w-4"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke="currentColor"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          strokeWidth={2}
                          d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
                        />
                      </svg>
                      0
                    </p>
                  </div>
                </Link>
              </div>
            ))}
          </div>
        </div>

        {/* JAGA NEGERI */}
        <div className="w-full md:w-7/12">
          <h2 className="text-xl font-semibold border-b pb-2 flex items-center justify-between">
            JAGA NEGERI
            <div className="flex-grow border-t-3 border-gray-300 rounded-md mx-3 mt-1"></div>
            <span className="text-gray-400 text-sm">‹ ›</span>
          </h2>

          {jagaNegeri.length > 0 && (
            <div className="mt-6 flex flex-col md:flex-row gap-6">
              <Link className="flex" href={`/detail/${jagaNegeri[0]?.id}`}>
                <div className="w-full md:w-[455px]">
                  <Image
                    src={jagaNegeri[0].thumbnailUrl || "/dummy.jpg"}
                    alt={jagaNegeri[0].title}
                    width={700}
                    height={400}
                    className="w-full h-[330px] object-cover"
                  />
                  <p className="text-lg mt-4 font-serif">
                    {jagaNegeri[0].title}
                  </p>
                  <p className="text-xs text-gray-500 mt-1 flex items-center gap-2">
                    {new Date(jagaNegeri[0].createdAt).toLocaleDateString(
                      "id-ID",
                      {
                        day: "numeric",
                        month: "long",
                        year: "numeric",
                      }
                    )}
                  </p>
                </div>
              </Link>

              <div className="w-full md:w-4/12 flex flex-col gap-4">
                {jagaNegeri.slice(1).map((item) => (
                  <div key={item.id} className="flex flex-col gap-3">
                    <Link className=" gap-3" href={`/detail/${item?.id}`}>
                      <Image
                        src={item.thumbnailUrl || "/dummy.jpg"}
                        alt={item.title}
                        width={100}
                        height={70}
                        className="w-full md:w-[227px] h-auto md:h-[151px] object-cover"
                      />
                      <p className="text-sm font-serif font-medium leading-snug">
                        {item.title}
                      </p>
                    </Link>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
      </div>

      <div className="relative my-5 max-w-screen-xl h-[125px] overflow-hidden flex items-center mx-auto border">
        <Image
          src="/image-kolom.png"
          alt="Berita Utama"
          fill
          className="object-cover"
        />
      </div>
    </section>
  );
}