269 lines
8.6 KiB
TypeScript
269 lines
8.6 KiB
TypeScript
"use client";
|
||
|
||
import { useEffect, useState } from "react";
|
||
import Image from "next/image";
|
||
import { getListArticle } from "@/service/article";
|
||
import Link from "next/link";
|
||
import { getAdvertise } from "@/service/advertisement";
|
||
|
||
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;
|
||
}[];
|
||
};
|
||
|
||
type Advertise = {
|
||
id: number;
|
||
title: string;
|
||
description: string;
|
||
placement: string;
|
||
contentFileUrl: string;
|
||
redirectLink: 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");
|
||
const [bannerAd, setBannerAd] = useState<Advertise | null>(null);
|
||
|
||
useEffect(() => {
|
||
initStateAdver();
|
||
}, []);
|
||
|
||
async function initStateAdver() {
|
||
const req = {
|
||
limit: 100,
|
||
page: 1,
|
||
sort: "desc",
|
||
sortBy: "created_at",
|
||
isPublish: true,
|
||
};
|
||
|
||
try {
|
||
const res = await getAdvertise(req);
|
||
const data: Advertise[] = res?.data?.data || [1];
|
||
|
||
// filter iklan dengan placement = "banner"
|
||
const banner = data.find((ad) => ad.placement === "banner");
|
||
|
||
if (banner) {
|
||
setBannerAd(banner);
|
||
}
|
||
} catch (err) {
|
||
console.error("Error fetching advertisement:", err);
|
||
}
|
||
}
|
||
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-[400px] overflow-hidden flex items-center mx-auto border">
|
||
{bannerAd ? (
|
||
<a
|
||
href={bannerAd.redirectLink}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="block w-full"
|
||
>
|
||
<div className="relative w-full h-[400px] flex justify-center">
|
||
<Image
|
||
src={bannerAd.contentFileUrl}
|
||
alt={bannerAd.title || "Iklan Banner"}
|
||
width={1200} // ukuran dasar untuk responsive
|
||
height={400}
|
||
className="object-cover w-full h-full"
|
||
/>
|
||
</div>
|
||
</a>
|
||
) : (
|
||
<Image
|
||
src="/image-kolom.png"
|
||
alt="Berita Utama"
|
||
width={1200}
|
||
height={188}
|
||
className="object-contain w-full h-[188px]"
|
||
/>
|
||
)}
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|