90 lines
2.6 KiB
TypeScript
90 lines
2.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";
|
|
|
|
type Article = {
|
|
id: number;
|
|
title: string;
|
|
createdAt: string;
|
|
createdByName: string;
|
|
customCreatorName: string;
|
|
thumbnailUrl: string;
|
|
categories: { title: string }[];
|
|
};
|
|
|
|
export default function Story() {
|
|
const [articles, setArticles] = useState<Article[]>([]);
|
|
|
|
useEffect(() => {
|
|
fetchArticles();
|
|
}, []);
|
|
|
|
async function fetchArticles() {
|
|
try {
|
|
const req = {
|
|
limit: "4",
|
|
page: 1,
|
|
search: "",
|
|
categorySlug: "",
|
|
sort: "desc",
|
|
isPublish: true,
|
|
sortBy: "created_at",
|
|
};
|
|
const res = await getListArticle(req);
|
|
setArticles(res?.data?.data || []);
|
|
} catch (error) {
|
|
console.error("Gagal memuat story:", error);
|
|
}
|
|
}
|
|
|
|
if (articles.length < 4) return null;
|
|
|
|
return (
|
|
<div className="px-4 mb-8">
|
|
<div className="max-w-7xl mx-auto">
|
|
{/* Title */}
|
|
<div className="mb-4">
|
|
<h2 className="text-lg font-bold">Featured Story</h2>
|
|
<div className="h-[2px] w-24 bg-black mt-1"></div>
|
|
</div>
|
|
|
|
{/* Grid Story */}
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
{articles.map((item) => (
|
|
<div key={item.id} className="relative overflow-hidden h-72">
|
|
<Link className="flex" href={`/detail/${item?.id}`}>
|
|
<Image
|
|
src={item.thumbnailUrl || "/dummy.jpg"}
|
|
alt={item.title}
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
<div className="absolute inset-0 bg-black/40"></div>
|
|
<div className="absolute inset-0 flex flex-col items-center justify-center text-center px-4 text-white">
|
|
<span className="bg-black/70 text-xs px-3 py-1 rounded mb-2">
|
|
{item.categories[0]?.title || "Uncategorized"}
|
|
</span>
|
|
<h3 className="text-sm font-semibold leading-snug line-clamp-3">
|
|
{item.title}
|
|
</h3>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="w-full relative mb-2 h-[120px] overflow-hidden flex items-center border my-8">
|
|
<Image
|
|
src={"/image-kolom.png"}
|
|
alt="Kolom PPS"
|
|
fill
|
|
className="max-w-7xl mx-auto object-cover"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|