910 lines
30 KiB
TypeScript
910 lines
30 KiB
TypeScript
"use client";
|
||
import Image from "next/image";
|
||
import { CalendarDays, MessageCircle, Timer } from "lucide-react";
|
||
import Link from "next/link";
|
||
import { useEffect, useState } from "react";
|
||
import { getListArticle } from "@/service/article";
|
||
import { getAdvertise } from "@/service/advertisement";
|
||
|
||
const featured = [
|
||
{
|
||
id: 1,
|
||
title: "Tak Perpanjang Kontrak, Megawati Hengkang dari Red Sparks",
|
||
date: "11 APRIL 2025",
|
||
image: "/megawati.png",
|
||
},
|
||
{
|
||
id: 2,
|
||
title: "Polri Dinilai Sukses Kelola Arus Mudik dan Balik Lebaran 2025",
|
||
date: "11 APRIL 2025",
|
||
image: "/mudik.png",
|
||
},
|
||
];
|
||
|
||
const smallNews = [
|
||
{
|
||
id: 3,
|
||
title:
|
||
"Arus Mudik dan Balik Libur Lebaran 2025 Lancar, Kerja Keras Polri Panen Apresiasi",
|
||
date: "8 APRIL 2025",
|
||
image: "/mudik.png",
|
||
},
|
||
{
|
||
id: 4,
|
||
title:
|
||
"1 Juta Penonton dalam Seminggu, Jumbo Pecahkan Rekor Animasi Indonesia",
|
||
date: "8 APRIL 2025",
|
||
image: "/jumbo.png",
|
||
},
|
||
{
|
||
id: 5,
|
||
title:
|
||
"Jalur Fungsional Tol Jakarta-Cikampek II Selatan Siap Layani Pemudik",
|
||
date: "8 APRIL 2025",
|
||
image: "/tol.jpg",
|
||
},
|
||
{
|
||
id: 6,
|
||
title:
|
||
"Arus Balik Diprediksi 5-6 April, Polri Imbau Pemudik Siapkan Perjalanan",
|
||
date: "8 APRIL 2025",
|
||
image: "/mudik.png",
|
||
},
|
||
];
|
||
|
||
const featured1 = [
|
||
{
|
||
id: 1,
|
||
title: "Explore the Beauty of Bali: Beaches, Culture, and More",
|
||
category: "TRAVEL IDEAS",
|
||
date: "August 30, 2025",
|
||
image: "/summer.jpg",
|
||
},
|
||
];
|
||
|
||
const smallNews1 = [
|
||
{
|
||
id: 2,
|
||
title: "Top 5 Destinations for Your Summer Getaway",
|
||
category: "DESTINATION",
|
||
date: "August 28, 2025",
|
||
image: "/blogger.jpg",
|
||
},
|
||
{
|
||
id: 3,
|
||
title: "How to Travel Safely During the Holiday Season",
|
||
category: "NEWS",
|
||
date: "August 25, 2025",
|
||
image: "/trip.jpg",
|
||
},
|
||
];
|
||
|
||
const posts = [
|
||
{
|
||
id: 1,
|
||
title: "Your Guide to Canggu’s Hottest Street: The Essential Batu Bolong",
|
||
author: "Admin",
|
||
date: "27 November 2024",
|
||
comments: 0,
|
||
excerpt:
|
||
"Dropcap the popularization of the “ideal measure” has led to advice such as “Increase font size for large screens and...",
|
||
image: "/guide.jpg",
|
||
},
|
||
{
|
||
id: 2,
|
||
title: "6 Perfect places to watch the sunrise in Bali while you honeymoon",
|
||
author: "Admin",
|
||
date: "26 November 2024",
|
||
comments: 0,
|
||
excerpt:
|
||
"Intro text we refine our methods of responsive web design, we’ve increasingly focused on measure and its relationship to how...",
|
||
image: "/car.jpg",
|
||
},
|
||
];
|
||
|
||
const posts1 = [
|
||
{
|
||
id: 1,
|
||
title: "Great Surf Spots in Bali: From Beginner to Pro Surfers",
|
||
author: "Admin",
|
||
date: "27 November 2024",
|
||
comments: 0,
|
||
excerpt:
|
||
"Intro text we refine our methods of responsive web design, we’ve increasingly focused on measure and its relationship to how...",
|
||
image: "/tea.jpg",
|
||
},
|
||
{
|
||
id: 2,
|
||
title: "Important things you should know for Mount Agung hiking",
|
||
author: "Admin",
|
||
date: "26 November 2024",
|
||
comments: 0,
|
||
excerpt:
|
||
"Dropcap the popularization of the “ideal measure” has led to advice such as “Increase font size for large screens and...",
|
||
image: "/play.png",
|
||
},
|
||
];
|
||
|
||
const popularPosts = [
|
||
{
|
||
id: 1,
|
||
title:
|
||
"Kisah Cinta IU-Park Bo Gum di 1950-an Hadir di When Life Gives You Tangerines, Tayang 7 Maret 2025",
|
||
image: "/park-go.jpg",
|
||
shares: 0,
|
||
},
|
||
{
|
||
id: 2,
|
||
title:
|
||
"Temani Perjalanan Mudik Anda dengan Musik AI dari Qudo Buana Nawakara",
|
||
shares: 0,
|
||
},
|
||
{
|
||
id: 3,
|
||
title: "Bali Nightlife Guide : The most popular clubs in Kuta",
|
||
shares: 0,
|
||
},
|
||
{
|
||
id: 4,
|
||
title:
|
||
"Dirumorkan Hubungan dengan Kim Ji Won, Kim Soo Hyun Langsung Klarifikasi Begini",
|
||
shares: 0,
|
||
},
|
||
{
|
||
id: 5,
|
||
title:
|
||
"Carmen Idol K-Pop Asal Bali yang Resmi Debut dengan Girl Grup Baru SM Entertainment",
|
||
shares: 0,
|
||
},
|
||
];
|
||
|
||
const categories = [
|
||
{ id: 1, name: "DESTINATION", count: 22 },
|
||
{ id: 2, name: "FOOD & DRINK", count: 8 },
|
||
{ id: 3, name: "NEWS", count: 21 },
|
||
{ id: 4, name: "PHOTO", count: 17 },
|
||
{ id: 5, name: "TAK BERKATEGORI", count: 34 },
|
||
{ id: 6, name: "TRAVEL IDEAS", count: 27 },
|
||
{ id: 7, name: "VIDEO", count: 7 },
|
||
];
|
||
|
||
type Article = {
|
||
id: number;
|
||
title: string;
|
||
description: string;
|
||
categoryName: string;
|
||
createdAt: string;
|
||
publishedAt: string;
|
||
createdByName: string;
|
||
slug: string;
|
||
customCreatorName: 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 News() {
|
||
const [page, setPage] = useState(1);
|
||
const [totalPage, setTotalPage] = useState(1);
|
||
const [articles, setArticles] = useState<Article[]>([]);
|
||
const [showData, setShowData] = useState("4"); // 👈 ambil 4 artikel
|
||
const [search, setSearch] = useState("");
|
||
const [selectedCategories, setSelectedCategories] = useState<any>([]);
|
||
const [startDateValue, setStartDateValue] = useState({
|
||
startDate: null,
|
||
endDate: null,
|
||
});
|
||
|
||
const [bannerAd, setBannerAd] = useState<Advertise | null>(null);
|
||
const [bannerImageAd, setBannerImageAd] = 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 || [];
|
||
|
||
// ambil iklan placement jumbotron
|
||
const jumbotron = data.find((ad) => ad.placement === "jumbotron");
|
||
if (jumbotron) setBannerAd(jumbotron);
|
||
|
||
// ambil iklan placement banner
|
||
const banner = data.find((ad) => ad.placement === "banner");
|
||
if (banner) setBannerImageAd(banner);
|
||
} catch (err) {
|
||
console.error("Error fetching advertisement:", err);
|
||
}
|
||
}
|
||
|
||
useEffect(() => {
|
||
initState();
|
||
}, [page, showData, startDateValue, selectedCategories]);
|
||
|
||
async function initState() {
|
||
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 || []);
|
||
setTotalPage(res?.data?.meta?.totalPage || 1);
|
||
} catch (err) {
|
||
console.error("Error fetching articles:", err);
|
||
}
|
||
}
|
||
return (
|
||
<section className="max-w-7xl mx-auto py-12 grid grid-cols-1 lg:grid-cols-3 gap-10">
|
||
{/* Left Column */}
|
||
<div className="lg:col-span-2">
|
||
{/* Section Title */}
|
||
<div className="flex items-center justify-between border-b border-gray-200 pb-2 mb-6">
|
||
<h2 className="text-xl font-semibold relative">
|
||
Travel Ideas
|
||
<span className="absolute bottom-[-2px] left-0 w-16 h-[2px] bg-teal-400"></span>
|
||
</h2>
|
||
<div className="flex gap-4 text-sm text-gray-500 font-medium">
|
||
<Link href="#" className="hover:text-teal-500">
|
||
ALL
|
||
</Link>
|
||
<Link href="#" className="hover:text-teal-500">
|
||
NEWS
|
||
</Link>
|
||
<Link href="#" className="hover:text-teal-500">
|
||
TRAVEL IDEAS
|
||
</Link>
|
||
<Link href="#" className="hover:text-teal-500">
|
||
DESTINATION
|
||
</Link>
|
||
<Link href="#" className="hover:text-teal-500">
|
||
PHOTO
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Featured News */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
|
||
{articles.slice(0, 2).map((item) => (
|
||
<div key={item.id}>
|
||
<Link
|
||
className="relative rounded overflow-hidden group cursor-pointer"
|
||
href={`/details/${item?.slug}`}
|
||
>
|
||
<Image
|
||
src={item.thumbnailUrl || "/placeholder.jpg"}
|
||
alt={item.title}
|
||
width={500}
|
||
height={300}
|
||
className="w-full h-[250px] object-cover group-hover:scale-105 transition-transform duration-500"
|
||
/>
|
||
<div className="absolute inset-0 bg-black/50 flex flex-col justify-end p-4">
|
||
<h3 className="text-white font-bold text-lg leading-snug">
|
||
{item.title}
|
||
</h3>
|
||
<div className="flex items-center text-white text-xs gap-2 mt-2">
|
||
<CalendarDays size={14} />
|
||
<span>
|
||
{new Date(item.publishedAt).toLocaleDateString("id-ID", {
|
||
day: "2-digit",
|
||
month: "long",
|
||
year: "numeric",
|
||
})}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</Link>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Small News */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
{articles.map((item) => (
|
||
<div key={item.id}>
|
||
<Link className="flex gap-4" href={`/details/${item?.slug}`}>
|
||
<Image
|
||
src={item.thumbnailUrl}
|
||
alt={item.title}
|
||
width={120}
|
||
height={80}
|
||
className="rounded object-cover flex-shrink-0"
|
||
/>
|
||
<div>
|
||
<h4 className="text-sm font-semibold text-gray-800 hover:text-teal-500 leading-snug">
|
||
{item.title}
|
||
</h4>
|
||
<div className="flex items-center text-xs text-gray-500 gap-2 mt-1">
|
||
<CalendarDays size={12} />
|
||
<span>
|
||
{" "}
|
||
{new Date(item.publishedAt).toLocaleDateString("id-ID", {
|
||
day: "2-digit",
|
||
month: "long",
|
||
year: "numeric",
|
||
})}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</Link>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div className="relative my-5 max-w-full h-[125px] overflow-hidden flex items-center mx-auto border">
|
||
{bannerImageAd ? (
|
||
<a
|
||
href={bannerImageAd.redirectLink}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="w-full h-full relative"
|
||
>
|
||
<Image
|
||
src={bannerImageAd.contentFileUrl}
|
||
alt={bannerImageAd.title || "Iklan Banner"}
|
||
fill
|
||
className="object-cover"
|
||
/>
|
||
</a>
|
||
) : (
|
||
<Image
|
||
src="/image-kolom.png"
|
||
alt="Banner Default"
|
||
fill
|
||
className="object-cover"
|
||
/>
|
||
)}
|
||
</div>
|
||
|
||
{/* Header */}
|
||
<div className="flex items-center justify-between border-b border-gray-200 pb-2 mb-6">
|
||
<h2 className="text-xl font-semibold relative">
|
||
Travel Destination
|
||
<span className="absolute bottom-[-2px] left-0 w-16 h-[2px] bg-teal-400"></span>
|
||
</h2>
|
||
<div className="flex gap-4 text-sm text-gray-500 font-medium">
|
||
<Link href="#" className="hover:text-teal-500">
|
||
ALL
|
||
</Link>
|
||
<Link href="#" className="hover:text-teal-500">
|
||
NEWS
|
||
</Link>
|
||
<Link href="#" className="hover:text-teal-500">
|
||
TRAVEL IDEAS
|
||
</Link>
|
||
<Link href="#" className="hover:text-teal-500">
|
||
DESTINATION
|
||
</Link>
|
||
<Link href="#" className="hover:text-teal-500">
|
||
VIDEO
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Featured News */}
|
||
<div>
|
||
{/* Featured News Besar */}
|
||
<div className="mb-6">
|
||
<div className="relative rounded overflow-hidden group cursor-pointer">
|
||
{articles.length > 0 && (
|
||
<>
|
||
<Link
|
||
className="flex gap-4"
|
||
href={`/details/${articles[0]?.slug}`}
|
||
>
|
||
<Image
|
||
src={articles[0]?.thumbnailUrl || "/placeholder.jpg"}
|
||
alt={articles[0]?.title || "No title"}
|
||
width={800}
|
||
height={400}
|
||
className="w-full h-[400px] object-cover group-hover:scale-105 transition-transform duration-500"
|
||
/>
|
||
<div className="absolute inset-0 bg-black/40 flex flex-col justify-end p-6">
|
||
<span className="bg-red-500 text-white text-xs px-2 py-1 rounded mb-2 w-fit uppercase">
|
||
{articles[0]?.categories?.[0]?.title ||
|
||
"TAK BERKATEGORI"}
|
||
</span>
|
||
<h3 className="text-white font-bold text-2xl leading-snug">
|
||
{articles[0]?.title}
|
||
</h3>
|
||
<div className="flex items-center text-white text-xs gap-2 mt-2">
|
||
<span className="font-semibold">
|
||
BY {articles[0]?.createdByName || "ADMIN"}
|
||
</span>
|
||
<CalendarDays size={14} />
|
||
<span>
|
||
{new Date(
|
||
articles[0]?.publishedAt || ""
|
||
).toLocaleDateString("id-ID", {
|
||
day: "2-digit",
|
||
month: "long",
|
||
year: "numeric",
|
||
})}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</Link>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Small News */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
{articles.slice(1, 3).map((item) => (
|
||
<div key={item.id}>
|
||
<Link
|
||
className="relative rounded overflow-hidden group cursor-pointer"
|
||
href={`/details/${item?.slug}`}
|
||
>
|
||
<Image
|
||
src={item.thumbnailUrl}
|
||
alt={item.title}
|
||
width={400}
|
||
height={200}
|
||
className="w-full h-[250px] object-cover group-hover:scale-105 transition-transform duration-500"
|
||
/>
|
||
{/* Badge kategori di atas gambar */}
|
||
<div className="absolute top-3 left-3">
|
||
<span className="bg-red-500 text-white text-xs px-2 py-1 rounded w-fit uppercase">
|
||
{item.categories?.[0]?.title}
|
||
</span>
|
||
</div>
|
||
|
||
{/* Content di bawah gambar */}
|
||
<div className="mt-3">
|
||
<h4 className="text-black font-semibold text-base leading-snug">
|
||
{item.title}
|
||
</h4>
|
||
<div className="flex items-center text-xs text-gray-500 gap-2 mt-1">
|
||
<span className="font-semibold text-gray-700">
|
||
BY <span className="text-[#49C5C4]">ADMIN</span>
|
||
</span>
|
||
<Timer className="text-[#49C5C4]" size={12} />
|
||
<span>
|
||
{new Date(item?.publishedAt || "").toLocaleDateString(
|
||
"id-ID",
|
||
{
|
||
day: "2-digit",
|
||
month: "long",
|
||
year: "numeric",
|
||
}
|
||
)}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</Link>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="relative my-5 max-w-full h-[125px] overflow-hidden flex items-center mx-auto border">
|
||
{bannerImageAd ? (
|
||
<a
|
||
href={bannerImageAd.redirectLink}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="w-full h-full relative"
|
||
>
|
||
<Image
|
||
src={bannerImageAd.contentFileUrl}
|
||
alt={bannerImageAd.title || "Iklan Banner"}
|
||
fill
|
||
className="object-cover"
|
||
/>
|
||
</a>
|
||
) : (
|
||
<Image
|
||
src="/image-kolom.png"
|
||
alt="Banner Default"
|
||
fill
|
||
className="object-cover"
|
||
/>
|
||
)}
|
||
</div>
|
||
<div className="flex items-center justify-between border-b border-gray-200 pb-2 mb-6">
|
||
<h2 className="text-xl font-semibold relative">
|
||
Travel Destination
|
||
<span className="absolute bottom-[-2px] left-0 w-16 h-[2px] bg-teal-400"></span>
|
||
</h2>
|
||
<div className="flex gap-4 text-sm text-gray-500 font-medium">
|
||
<Link href="#" className="hover:text-teal-500">
|
||
ALL
|
||
</Link>
|
||
<Link href="#" className="hover:text-teal-500">
|
||
NEWS
|
||
</Link>
|
||
<Link href="#" className="hover:text-teal-500">
|
||
TRAVEL IDEAS
|
||
</Link>
|
||
<Link href="#" className="hover:text-teal-500">
|
||
DESTINATION
|
||
</Link>
|
||
<Link href="#" className="hover:text-teal-500">
|
||
VIDEO
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Featured News */}
|
||
<div>
|
||
{/* Featured News Besar */}
|
||
<div className="space-y-8">
|
||
{articles.slice(2, 4).map((post) => (
|
||
<div
|
||
key={post.id}
|
||
className="flex flex-col md:flex-row border-b border-gray-200 pb-6"
|
||
>
|
||
<Link href={`/details/${post?.slug}`}>
|
||
{/* Left Content */}
|
||
<div className="flex-1 pr-0 md:pr-6">
|
||
<h2 className="text-xl md:text-2xl font-bold mb-2">
|
||
{post.title}
|
||
</h2>
|
||
<div className="flex items-center text-sm text-gray-500 gap-2 mb-3">
|
||
<span>
|
||
BY{" "}
|
||
<span className="text-[#49C5C4] font-semibold uppercase">
|
||
{post.createdByName}
|
||
</span>
|
||
</span>
|
||
<span>•</span>
|
||
<span>
|
||
{new Date(post?.publishedAt || "").toLocaleDateString(
|
||
"id-ID",
|
||
{
|
||
day: "2-digit",
|
||
month: "long",
|
||
year: "numeric",
|
||
}
|
||
)}
|
||
</span>
|
||
<span>•</span>
|
||
<MessageCircle size={14} className="text-[#49C5C4]" />
|
||
<span>{/* {post.comments} */}0</span>
|
||
</div>
|
||
<p className="text-gray-600 mb-4">
|
||
{post.description.split(" ").slice(0, 50).join(" ")}
|
||
{post.description.split(" ").length > 50 && "..."}
|
||
</p>
|
||
<Link href={`/details/${post?.slug}`}>
|
||
<button className="px-4 py-2 border border-gray-300 text-gray-700 text-sm rounded hover:bg-gray-100 transition">
|
||
READ MORE
|
||
</button>
|
||
</Link>
|
||
</div>
|
||
</Link>
|
||
{/* Right Thumbnail */}
|
||
<div className="w-full md:w-[280px] flex-shrink-0 mt-4 md:mt-0">
|
||
<Image
|
||
src={post.thumbnailUrl}
|
||
alt={post.title}
|
||
width={400}
|
||
height={250}
|
||
className="w-full h-[180px] md:h-[150px] object-cover rounded"
|
||
/>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="relative my-5 max-w-full h-[125px] overflow-hidden flex items-center mx-auto border">
|
||
{bannerImageAd ? (
|
||
<a
|
||
href={bannerImageAd.redirectLink}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="w-full h-full relative"
|
||
>
|
||
<Image
|
||
src={bannerImageAd.contentFileUrl}
|
||
alt={bannerImageAd.title || "Iklan Banner"}
|
||
fill
|
||
className="object-cover"
|
||
/>
|
||
</a>
|
||
) : (
|
||
<Image
|
||
src="/image-kolom.png"
|
||
alt="Banner Default"
|
||
fill
|
||
className="object-cover"
|
||
/>
|
||
)}
|
||
</div>
|
||
<div>
|
||
{/* Featured News Besar */}
|
||
<div className="space-y-8">
|
||
{articles.slice(1, 3).map((post) => (
|
||
<div
|
||
key={post.id}
|
||
className="flex flex-col md:flex-row border-b border-gray-200 pb-6"
|
||
>
|
||
{/* Left Content */}
|
||
<div className="flex-1 pr-0 md:pr-6">
|
||
<h2 className="text-xl md:text-2xl font-bold mb-2">
|
||
{post.title}
|
||
</h2>
|
||
<div className="flex items-center text-sm text-gray-500 gap-2 mb-3">
|
||
<span>
|
||
BY{" "}
|
||
<span className="text-[#49C5C4] font-semibold uppercase">
|
||
{post.createdByName}
|
||
</span>
|
||
</span>
|
||
<span>•</span>
|
||
<span>
|
||
{new Date(post?.publishedAt || "").toLocaleDateString(
|
||
"id-ID",
|
||
{
|
||
day: "2-digit",
|
||
month: "long",
|
||
year: "numeric",
|
||
}
|
||
)}
|
||
</span>
|
||
<span>•</span>
|
||
<MessageCircle size={14} className="text-[#49C5C4]" />
|
||
<span>{/* {post.comments} */}0</span>
|
||
</div>
|
||
<p className="text-gray-600 mb-4">
|
||
{post.description.split(" ").slice(0, 50).join(" ")}
|
||
{post.description.split(" ").length > 50 && "..."}
|
||
</p>
|
||
<Link href={`/details/${post?.slug}`}>
|
||
<button className="px-4 py-2 border border-gray-300 text-gray-700 text-sm rounded hover:bg-gray-100 transition">
|
||
READ MORE
|
||
</button>
|
||
</Link>
|
||
</div>
|
||
|
||
{/* Right Thumbnail */}
|
||
<div className="w-full md:w-[280px] flex-shrink-0 mt-4 md:mt-0">
|
||
<Image
|
||
src={post.thumbnailUrl}
|
||
alt={post.title}
|
||
width={400}
|
||
height={250}
|
||
className="w-full h-[180px] md:h-[150px] object-cover rounded"
|
||
/>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="relative my-5 max-w-full h-[125px] overflow-hidden flex items-center mx-auto border">
|
||
{bannerImageAd ? (
|
||
<a
|
||
href={bannerImageAd.redirectLink}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="w-full h-full relative"
|
||
>
|
||
<Image
|
||
src={bannerImageAd.contentFileUrl}
|
||
alt={bannerImageAd.title || "Iklan Banner"}
|
||
fill
|
||
className="object-cover"
|
||
/>
|
||
</a>
|
||
) : (
|
||
<Image
|
||
src="/image-kolom.png"
|
||
alt="Banner Default"
|
||
fill
|
||
className="object-cover"
|
||
/>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Sidebar */}
|
||
<aside className="space-y-6">
|
||
{/* Connect with us */}
|
||
<div>
|
||
<h3 className="font-semibold border-b border-gray-200 pb-2 mb-4">
|
||
Connect with us
|
||
</h3>
|
||
<div className="space-y-3">
|
||
<div className="flex justify-between items-center border px-4 py-3 rounded">
|
||
<span className="font-medium">Bē</span>
|
||
<span>140 Followers</span>
|
||
</div>
|
||
<div className="flex justify-between items-center border px-4 py-3 rounded">
|
||
<span className="text-red-500 font-medium">YouTube</span>
|
||
<span>204k Subscribers</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Advertisement */}
|
||
<div>
|
||
{bannerAd ? (
|
||
<a
|
||
href={bannerAd.redirectLink}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="block w-full"
|
||
>
|
||
<div className="relative w-full h-[350px] flex justify-center">
|
||
<Image
|
||
src={bannerAd.contentFileUrl}
|
||
alt={bannerAd.title || "Iklan Banner"}
|
||
width={1200} // ukuran dasar untuk responsive
|
||
height={350}
|
||
className="object-cover w-full h-full"
|
||
/>
|
||
</div>
|
||
</a>
|
||
) : (
|
||
<Image
|
||
src="/kolom.png"
|
||
alt="Berita Utama"
|
||
width={1200}
|
||
height={188}
|
||
className="object-contain w-full h-[188px]"
|
||
/>
|
||
)}
|
||
</div>
|
||
|
||
{/* Popular (Placeholder) */}
|
||
<div>
|
||
<h3 className="font-semibold border-b border-gray-200 pb-2 mb-4 relative">
|
||
Popular
|
||
<span className="absolute bottom-[-2px] left-0 w-16 h-[2px] bg-teal-400"></span>
|
||
</h3>
|
||
|
||
{popularPosts.map((post, index) =>
|
||
index === 0 ? (
|
||
// Post pertama tampil besar
|
||
<div key={post.id} className="mb-6 relative">
|
||
<Image
|
||
src={post.image || "/images/placeholder.jpg"}
|
||
alt={post.title}
|
||
width={400}
|
||
height={250}
|
||
className="w-full h-[246px] object-cover rounded"
|
||
/>
|
||
<h2 className="mt-3 text-base font-semibold">{post.title}</h2>
|
||
<div className="flex items-center text-xs text-gray-500 mt-1">
|
||
<span>{post.shares} SHARES</span>
|
||
</div>
|
||
<span className="absolute bottom-2 right-2 text-3xl font-bold text-gray-200">
|
||
{String(index + 1).padStart(2, "0")}
|
||
</span>
|
||
</div>
|
||
) : (
|
||
// Post berikutnya tampil list
|
||
<div
|
||
key={post.id}
|
||
className="flex items-start gap-3 border-t border-gray-200 py-3"
|
||
>
|
||
<span className="text-lg font-bold text-gray-400">
|
||
{String(index + 1).padStart(2, "0")}
|
||
</span>
|
||
<div>
|
||
<h3 className="text-sm font-medium leading-snug">
|
||
{post.title}
|
||
</h3>
|
||
<span className="text-xs text-gray-500">
|
||
{post.shares} SHARES
|
||
</span>
|
||
</div>
|
||
</div>
|
||
)
|
||
)}
|
||
</div>
|
||
<h3 className="font-semibold border-b border-gray-200 pb-2 mb-4 mt-10 relative">
|
||
Categories
|
||
<span className="absolute bottom-[-2px] left-0 w-16 h-[2px] bg-teal-400"></span>
|
||
</h3>
|
||
|
||
<ul className="space-y-2">
|
||
{categories.map((cat) => (
|
||
<li
|
||
key={cat.id}
|
||
className="flex justify-between items-center border-b border-gray-100 pb-2"
|
||
>
|
||
<span className="text-sm hover:text-teal-600 cursor-pointer font-medium">
|
||
{cat.name}
|
||
</span>
|
||
<span className="text-sm text-gray-500">({cat.count})</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
<h3 className="font-semibold border-b border-gray-200 pb-2 mb-4 mt-10 relative">
|
||
Instagram
|
||
<span className="absolute bottom-[-2px] left-0 w-16 h-[2px] bg-teal-400"></span>
|
||
</h3>
|
||
{/* <div className="relative w-[1111px] max-w-full h-[300px] overflow-hidden flex items-center mx-auto border my-6 rounded">
|
||
{bannerAd ? (
|
||
<a
|
||
href={bannerAd.redirectLink}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="block w-full"
|
||
>
|
||
<div className="relative w-full h-[350px] flex justify-center">
|
||
<Image
|
||
src={bannerAd.contentFileUrl}
|
||
alt={bannerAd.title || "Iklan Banner"}
|
||
width={1200} // ukuran dasar untuk responsive
|
||
height={350}
|
||
className="object-cover w-full h-full"
|
||
/>
|
||
</div>
|
||
</a>
|
||
) : (
|
||
<Image
|
||
src="/kolom.png"
|
||
alt="Berita Utama"
|
||
width={1200}
|
||
height={188}
|
||
className="object-contain w-full h-[188px]"
|
||
/>
|
||
)}
|
||
</div> */}
|
||
<div className="relative w-[1111px] max-w-full h-[300px] overflow-hidden flex items-center mx-auto border my-6 rounded">
|
||
{bannerAd ? (
|
||
<a
|
||
href={bannerAd.redirectLink}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="block w-full"
|
||
>
|
||
<div className="relative w-full h-[350px] flex justify-center">
|
||
<Image
|
||
src={bannerAd.contentFileUrl}
|
||
alt={bannerAd.title || "Iklan Banner"}
|
||
width={1200} // ukuran dasar untuk responsive
|
||
height={350}
|
||
className="object-cover w-full h-full"
|
||
/>
|
||
</div>
|
||
</a>
|
||
) : (
|
||
<Image
|
||
src="/kolom.png"
|
||
alt="Berita Utama"
|
||
width={1200}
|
||
height={188}
|
||
className="object-contain w-full h-[188px]"
|
||
/>
|
||
)}
|
||
</div>
|
||
</aside>
|
||
</section>
|
||
);
|
||
}
|