118 lines
3.4 KiB
TypeScript
118 lines
3.4 KiB
TypeScript
// components/landing-page/headers.tsx
|
|
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import Image from "next/image";
|
|
import { Calendar } from "lucide-react";
|
|
import { getListArticle } from "@/service/article";
|
|
import Link from "next/link";
|
|
|
|
type Article = {
|
|
id: number;
|
|
title: string;
|
|
description: string;
|
|
categoryName: string;
|
|
slug: string;
|
|
createdAt: string;
|
|
createdByName: string;
|
|
thumbnailUrl: string;
|
|
categories: { title: string }[];
|
|
files: { fileUrl: string; file_alt: string }[];
|
|
};
|
|
|
|
export default function Header() {
|
|
const [articles, setArticles] = useState<Article[]>([]);
|
|
const [showData, setShowData] = useState("5");
|
|
|
|
useEffect(() => {
|
|
fetchArticles();
|
|
}, []);
|
|
|
|
async function fetchArticles() {
|
|
try {
|
|
const req = {
|
|
limit: showData,
|
|
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 artikel:", error);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<section className="max-w-7xl mx-auto px-4 py-8">
|
|
{/* TITLE */}
|
|
<h2 className="text-xl font-bold mb-6">STOCKS EXCHANGE</h2>
|
|
|
|
{/* GRID */}
|
|
<div className="grid md:grid-cols-2">
|
|
{articles.slice(0, 2).map((article, idx) => {
|
|
const imageUrl =
|
|
article.thumbnailUrl ||
|
|
article.files?.[0]?.fileUrl ||
|
|
"/placeholder.png";
|
|
|
|
const category =
|
|
article.categoryName || article.categories?.[0]?.title || "News";
|
|
|
|
// warna overlay berbeda tiap card biar mirip contoh
|
|
const overlayColors = [
|
|
"bg-purple-900/30", // untuk artikel pertama
|
|
"bg-green-900/30", // untuk artikel kedua
|
|
];
|
|
|
|
return (
|
|
<div
|
|
key={article.id}
|
|
className="relative h-[438px] md:h-[438px] overflow-hidden"
|
|
>
|
|
<Link href={`/details/${article?.slug}`}>
|
|
{/* Background Image */}
|
|
<Image
|
|
src={imageUrl}
|
|
alt={article.title}
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
|
|
{/* Overlay Warna */}
|
|
<div
|
|
className={`absolute inset-0 ${
|
|
overlayColors[idx] || "bg-black/50"
|
|
}`}
|
|
></div>
|
|
|
|
{/* Content */}
|
|
<div className="absolute inset-0 flex flex-col items-center justify-center p-6 text-white text-center">
|
|
<span className="bg-yellow-400 text-black px-2 py-1 text-xs font-bold inline-block mb-3">
|
|
{category.toUpperCase()}
|
|
</span>
|
|
<h3 className="text-lg md:text-2xl font-bold mb-3 leading-snug">
|
|
{article.title}
|
|
</h3>
|
|
<div className="flex items-center gap-2 text-xs md:text-sm text-gray-200">
|
|
<Calendar size={14} />
|
|
{new Date(article.createdAt).toLocaleDateString("en-GB", {
|
|
day: "2-digit",
|
|
month: "long",
|
|
year: "numeric",
|
|
})}
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|