548 lines
21 KiB
TypeScript
548 lines
21 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { getListArticle } from "@/service/article";
|
|
import { CommentIcon } from "../icons/sidebar-icon";
|
|
import { Button } from "../ui/button";
|
|
import { MessageCircle } from "lucide-react";
|
|
|
|
type Article = {
|
|
id: number;
|
|
title: string;
|
|
description: string;
|
|
categoryName: string;
|
|
createdAt: string;
|
|
createdByName: string;
|
|
thumbnailUrl: string;
|
|
categories: { title: string }[];
|
|
};
|
|
|
|
export default function Lifestyle() {
|
|
const [page, setPage] = useState(1);
|
|
const [totalPage, setTotalPage] = useState(1);
|
|
const [articles, setArticles] = useState<Article[]>([]);
|
|
const [showData, setShowData] = useState("5");
|
|
const [visibleCount, setVisibleCount] = useState(4);
|
|
const [search, setSearch] = useState("");
|
|
const [selectedCategories, setSelectedCategories] = useState<any>("");
|
|
const [startDateValue, setStartDateValue] = useState({
|
|
startDate: null,
|
|
endDate: null,
|
|
});
|
|
|
|
useEffect(() => {
|
|
fetchArticles();
|
|
}, [page, showData, startDateValue, selectedCategories]);
|
|
|
|
async function fetchArticles() {
|
|
const req = {
|
|
limit: showData,
|
|
page,
|
|
search,
|
|
categorySlug: Array.from(selectedCategories).join(","),
|
|
sort: "desc",
|
|
isPublish: true,
|
|
sortBy: "created_at",
|
|
};
|
|
try {
|
|
const res = await getListArticle(req);
|
|
setArticles(res?.data?.data || []);
|
|
} catch (err) {
|
|
console.error(err);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<section className=" py-10 ">
|
|
<div className="w-full py-8 bg-white shadow border">
|
|
<div className="mx-auto max-w-7xl grid grid-cols-1 lg:grid-cols-3 gap-8 ">
|
|
<div className="lg:col-span-2">
|
|
<div className="flex flex-col items-start gap-3 mb-6">
|
|
<h2 className="text-xl font-bold text-gray-900 uppercase">
|
|
LIFESTYLE
|
|
</h2>
|
|
<span className="w-10 h-[3px] bg-yellow-500 inline-block"></span>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{articles.slice(0, visibleCount).map((item) => (
|
|
<Link
|
|
key={item.id}
|
|
href={`/detail/${item.id}`}
|
|
className="group block rounded-lg overflow-hidden"
|
|
>
|
|
<Image
|
|
src={item.thumbnailUrl || "/placeholder.png"}
|
|
alt={item.title}
|
|
width={500}
|
|
height={300}
|
|
className="w-full h-[280px] object-cover rounded-lg"
|
|
/>
|
|
<h3 className="mt-3 font-bold text-lg group-hover:text-yellow-600 transition">
|
|
{item.title}
|
|
</h3>
|
|
<div className="flex items-center gap-2 mt-2 text-sm text-gray-600">
|
|
<span className="font-semibold">{item.createdByName}</span>
|
|
<span>•</span>
|
|
<span>
|
|
{new Date(item.createdAt).toLocaleDateString("id-ID", {
|
|
day: "numeric",
|
|
month: "long",
|
|
year: "numeric",
|
|
})}
|
|
</span>
|
|
<span className="flex items-center gap-1 text-yellow-600">
|
|
<MessageCircle size={16} /> 0 comments
|
|
</span>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
{visibleCount < articles.length && (
|
|
<div className="flex justify-center mt-8">
|
|
<Button
|
|
onClick={() => setVisibleCount((prev) => prev + 4)}
|
|
variant="ghost"
|
|
className="text-xs font-semibold text-gray-700 hover:text-yellow-600 flex items-center gap-1"
|
|
>
|
|
LOAD MORE
|
|
<span className="text-yellow-500">↓</span>
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-6 mt-16">
|
|
<div className="border rounded-lg p-5 bg-white shadow-sm">
|
|
<h4 className="font-bold text-gray-900 mb-3">
|
|
Subscribe us to get the latest news!
|
|
</h4>
|
|
<form className="space-y-3">
|
|
<label className="block text-sm font-medium text-gray-700">
|
|
Email address:
|
|
</label>
|
|
<input
|
|
type="email"
|
|
placeholder="Your email address"
|
|
className="w-full border border-gray-300 rounded-md p-2 text-sm focus:outline-none focus:ring-2 focus:ring-yellow-500"
|
|
/>
|
|
<button
|
|
type="submit"
|
|
className="w-full bg-yellow-500 hover:bg-yellow-600 text-white font-semibold py-2 rounded-md transition"
|
|
>
|
|
SIGN UP
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div className="relative w-[1111px] max-w-full h-[300px] overflow-hidden flex items-center mx-auto border my-6 rounded">
|
|
<Image
|
|
src="/kolom.png"
|
|
alt="Berita Utama"
|
|
fill
|
|
className="object-contain rounded"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="w-full py-8 bg-[#F1F3F8] shadow border">
|
|
<div className="mx-auto max-w-7xl grid grid-cols-1 lg:grid-cols-3 gap-8 ">
|
|
<div className="lg:col-span-2">
|
|
<div className="flex flex-col items-start gap-3 mb-6">
|
|
<h2 className="text-xl font-bold text-gray-900 uppercase">
|
|
BUSINESS
|
|
</h2>
|
|
<span className="w-10 h-[3px] bg-yellow-500 inline-block"></span>
|
|
</div>
|
|
|
|
{/* Grid artikel */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{/* {articles.slice(0, visibleCount).map((item) => (
|
|
<Link
|
|
key={item.id}
|
|
href={`/detail/${item.id}`}
|
|
className="group block rounded-lg overflow-hidden"
|
|
>
|
|
<Image
|
|
src={item.thumbnailUrl || "/placeholder.png"}
|
|
alt={item.title}
|
|
width={500}
|
|
height={300}
|
|
className="w-full h-[280px] object-cover rounded-lg"
|
|
/>
|
|
<h3 className="mt-3 font-bold text-lg group-hover:text-yellow-600 transition">
|
|
{item.title}
|
|
</h3>
|
|
<div className="flex items-center gap-2 mt-2 text-sm text-gray-600">
|
|
<span className="font-semibold">{item.createdByName}</span>
|
|
<span>•</span>
|
|
<span>
|
|
{new Date(item.createdAt).toLocaleDateString("id-ID", {
|
|
day: "numeric",
|
|
month: "long",
|
|
year: "numeric",
|
|
})}
|
|
</span>
|
|
<span className="flex items-center gap-1 text-yellow-600">
|
|
<MessageCircle size={16} /> 0 comments
|
|
</span>
|
|
</div>
|
|
</Link>
|
|
))} */}
|
|
</div>
|
|
|
|
{/* Load More button */}
|
|
{/* {visibleCount < articles.length && (
|
|
<div className="flex justify-center mt-8">
|
|
<Button
|
|
onClick={() => setVisibleCount((prev) => prev + 4)}
|
|
className="bg-yellow-500 hover:bg-yellow-600 text-white font-semibold px-6 py-2 rounded-md"
|
|
>
|
|
Load More
|
|
</Button>
|
|
</div>
|
|
)} */}
|
|
</div>
|
|
|
|
{/* Sidebar */}
|
|
{/* <div className="space-y-6 mt-16">
|
|
|
|
<div className="border rounded-lg p-5 bg-white shadow-sm">
|
|
<h4 className="font-bold text-gray-900 mb-3">
|
|
Subscribe us to get the latest news!
|
|
</h4>
|
|
<form className="space-y-3">
|
|
<label className="block text-sm font-medium text-gray-700">
|
|
Email address:
|
|
</label>
|
|
<input
|
|
type="email"
|
|
placeholder="Your email address"
|
|
className="w-full border border-gray-300 rounded-md p-2 text-sm focus:outline-none focus:ring-2 focus:ring-yellow-500"
|
|
/>
|
|
<button
|
|
type="submit"
|
|
className="w-full bg-yellow-500 hover:bg-yellow-600 text-white font-semibold py-2 rounded-md transition"
|
|
>
|
|
SIGN UP
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
|
|
<div className="relative w-[1111px] max-w-full h-[300px] overflow-hidden flex items-center mx-auto border my-6 rounded">
|
|
<Image
|
|
src="/kolom.png"
|
|
alt="Berita Utama"
|
|
fill
|
|
className="object-contain rounded"
|
|
/>
|
|
</div>
|
|
</div> */}
|
|
</div>
|
|
</div>
|
|
<div className="w-full py-10 bg-white">
|
|
<div className="mx-auto max-w-7xl grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
<div className="lg:col-span-2">
|
|
<div className="flex flex-col items-start gap-2 mb-6">
|
|
<h2 className="text-2xl font-bold text-gray-900 uppercase">
|
|
SPORTS
|
|
</h2>
|
|
<span className="w-10 h-[3px] bg-yellow-500 inline-block"></span>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{articles.slice(0, visibleCount).map((item) => (
|
|
<Link
|
|
key={item.id}
|
|
href={`/detail/${item.id}`}
|
|
className="group block rounded-lg overflow-hidden"
|
|
>
|
|
<Image
|
|
src={item.thumbnailUrl || "/placeholder.png"}
|
|
alt={item.title}
|
|
width={500}
|
|
height={300}
|
|
className="w-full h-[200px] object-cover rounded-lg"
|
|
/>
|
|
<h3 className="mt-3 font-bold text-lg group-hover:text-yellow-600 transition">
|
|
{item.title}
|
|
</h3>
|
|
<div className="flex items-center gap-2 mt-2 text-xs text-gray-600 flex-wrap">
|
|
<span className="font-semibold">{item.createdByName}</span>
|
|
<span>-</span>
|
|
<span>
|
|
{new Date(item.createdAt).toLocaleDateString("id-ID", {
|
|
day: "numeric",
|
|
month: "long",
|
|
year: "numeric",
|
|
})}
|
|
</span>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
{visibleCount < articles.length && (
|
|
<div className="flex justify-center mt-10">
|
|
<Button
|
|
onClick={() => setVisibleCount((prev) => prev + 4)}
|
|
variant="ghost"
|
|
className="text-xs font-semibold text-gray-700 hover:text-yellow-600 flex items-center gap-1"
|
|
>
|
|
LOAD MORE
|
|
<span className="text-yellow-500">↓</span>
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-8">
|
|
<div className="relative w-full h-[200px] overflow-hidden flex items-center justify-center border rounded-lg">
|
|
<Image
|
|
src="/kolom.png"
|
|
alt="Kolom Iklan"
|
|
fill
|
|
className="object-contain rounded"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 className="font-bold text-gray-900 mb-4">Join Us!</h4>
|
|
<ul className="space-y-3 text-sm">
|
|
<li className="flex items-center gap-2">
|
|
<span className="w-7 h-7 flex items-center justify-center bg-blue-600 text-white rounded-full text-xs">
|
|
F
|
|
</span>
|
|
Facebook
|
|
</li>
|
|
<li className="flex items-center gap-2">
|
|
<span className="w-7 h-7 flex items-center justify-center bg-black text-white rounded-full text-xs">
|
|
X
|
|
</span>
|
|
Twitter
|
|
</li>
|
|
<li className="flex items-center gap-2">
|
|
<span className="w-7 h-7 flex items-center justify-center bg-pink-500 text-white rounded-full text-xs">
|
|
IG
|
|
</span>
|
|
Instagram
|
|
</li>
|
|
<li className="flex items-center gap-2">
|
|
<span className="w-7 h-7 flex items-center justify-center bg-red-600 text-white rounded-full text-xs">
|
|
▶
|
|
</span>
|
|
Youtube
|
|
</li>
|
|
<li className="flex items-center gap-2">
|
|
<span className="w-7 h-7 flex items-center justify-center bg-red-400 text-white rounded-full text-xs">
|
|
P
|
|
</span>
|
|
Pinterest
|
|
</li>
|
|
<li className="flex items-center gap-2">
|
|
<span className="w-7 h-7 flex items-center justify-center bg-pink-400 text-white rounded-full text-xs">
|
|
D
|
|
</span>
|
|
Dribbble
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="w-full py-10 bg-[#F1F3F8] border-t">
|
|
<div className="mx-auto max-w-7xl">
|
|
<div className="flex flex-col items-start gap-2 mb-6">
|
|
<h2 className="text-2xl font-bold text-gray-900 uppercase">
|
|
TECHNOLOGY
|
|
</h2>
|
|
<span className="w-10 h-[3px] bg-yellow-500 inline-block"></span>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{articles.slice(0, visibleCount).map((item) => (
|
|
<Link
|
|
key={item.id}
|
|
href={`/detail/${item.id}`}
|
|
className="group block rounded-lg overflow-hidden"
|
|
>
|
|
<Image
|
|
src={item.thumbnailUrl || "/placeholder.png"}
|
|
alt={item.title}
|
|
width={500}
|
|
height={300}
|
|
className="w-full h-[280px] object-cover rounded-lg"
|
|
/>
|
|
<h3 className="mt-3 font-bold text-lg group-hover:text-yellow-600 transition">
|
|
{item.title}
|
|
</h3>
|
|
<div className="flex items-center gap-2 mt-2 text-xs text-gray-600 flex-wrap">
|
|
<span className="font-semibold">{item.createdByName}</span>
|
|
<span>-</span>
|
|
<span>
|
|
{new Date(item.createdAt).toLocaleDateString("id-ID", {
|
|
day: "numeric",
|
|
month: "long",
|
|
year: "numeric",
|
|
})}
|
|
</span>
|
|
<span className="flex items-center gap-1 text-gray-500">
|
|
<MessageCircle size={14} className="text-yellow-500" /> 0
|
|
comments
|
|
</span>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
<div className="relative my-5 max-w-full h-[125px] overflow-hidden flex items-center mx-auto border">
|
|
<Image
|
|
src="/image-kolom.png"
|
|
alt="Berita Utama"
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
|
|
{visibleCount < articles.length && (
|
|
<div className="flex justify-center mt-10">
|
|
<button
|
|
onClick={() => setVisibleCount((prev) => prev + 3)}
|
|
className="text-xs font-semibold text-gray-700 hover:text-yellow-600 flex items-center gap-1"
|
|
>
|
|
LOAD MORE <span className="text-yellow-500">↓</span>
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="w-full py-10 bg-white border-t">
|
|
<div className="mx-auto max-w-7xl grid grid-cols-1 lg:grid-cols-3 gap-10">
|
|
<div className="lg:col-span-2">
|
|
<div className="flex flex-col items-start gap-2 mb-6">
|
|
<h2 className="text-2xl font-bold text-gray-900 uppercase">
|
|
FASHION
|
|
</h2>
|
|
<span className="w-10 h-[3px] bg-yellow-500 inline-block"></span>
|
|
</div>
|
|
|
|
<div className="space-y-8">
|
|
{articles.slice(0, visibleCount).map((item) => (
|
|
<Link
|
|
key={item.id}
|
|
href={`/detail/${item.id}`}
|
|
className="flex flex-col md:flex-row gap-5 group"
|
|
>
|
|
<Image
|
|
src={item.thumbnailUrl || "/placeholder.png"}
|
|
alt={item.title}
|
|
width={300}
|
|
height={200}
|
|
className="w-full md:w-[250px] h-[180px] object-cover rounded-lg"
|
|
/>
|
|
<div className="flex-1">
|
|
<h3 className="font-bold text-xl text-gray-900 group-hover:text-yellow-600 transition">
|
|
{item.title}
|
|
</h3>
|
|
<p className="text-gray-600 text-sm mt-2 line-clamp-2">
|
|
{item.description}
|
|
</p>
|
|
<div className="flex items-center gap-2 mt-3 text-sm text-gray-600">
|
|
<span className="font-semibold">
|
|
{item.createdByName}
|
|
</span>
|
|
<span>-</span>
|
|
<span>
|
|
{new Date(item.createdAt).toLocaleDateString("id-ID", {
|
|
day: "numeric",
|
|
month: "long",
|
|
year: "numeric",
|
|
})}
|
|
</span>
|
|
<span className="flex items-center gap-1 text-yellow-600">
|
|
<MessageCircle size={16} /> 0 comments
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
<div className="relative my-5 max-w-full h-[125px] overflow-hidden flex items-center mx-auto border">
|
|
<Image
|
|
src="/image-kolom.png"
|
|
alt="Berita Utama"
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
|
|
{visibleCount < articles.length && (
|
|
<div className="flex justify-center mt-6">
|
|
<button
|
|
onClick={() => setVisibleCount((prev) => prev + 3)}
|
|
className="text-sm font-semibold text-gray-700 hover:text-yellow-600 flex items-center gap-1"
|
|
>
|
|
LOAD MORE <span className="text-yellow-500">↓</span>
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<div className="flex flex-col items-start gap-2 mb-6">
|
|
<h2 className="text-lg font-bold text-gray-900 ">Recent Post</h2>
|
|
<span className="w-10 h-[3px] bg-yellow-500 inline-block"></span>
|
|
</div>
|
|
<div className="space-y-5">
|
|
{articles.map((post, idx) => (
|
|
<Link
|
|
key={post.id}
|
|
href={`/detail/${post.id}`}
|
|
className="flex items-start gap-3 group"
|
|
>
|
|
{/* Thumbnail */}
|
|
<Image
|
|
src={post.thumbnailUrl || "/placeholder.png"}
|
|
alt={post.title}
|
|
width={80}
|
|
height={80}
|
|
className="w-[70px] h-[70px] object-cover rounded"
|
|
/>
|
|
|
|
{/* Konten */}
|
|
<div className="flex-1">
|
|
<p className="text-[10px] uppercase text-yellow-600 font-bold">
|
|
{post.categoryName}
|
|
</p>
|
|
<h4 className="font-semibold text-sm text-gray-900 group-hover:text-yellow-600">
|
|
{post.title}
|
|
</h4>
|
|
<span className="text-xs text-gray-500">
|
|
{new Date(post.createdAt).toLocaleDateString("id-ID", {
|
|
day: "numeric",
|
|
month: "long",
|
|
year: "numeric",
|
|
})}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Nomor urut */}
|
|
<span className="text-2xl font-bold text-yellow-500 w-8 flex-shrink-0">
|
|
{String(idx + 1).padStart(2, "0")}
|
|
</span>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|