new-medol
/
web-isu-kini
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
web-isu-kini/components/details/details-content.tsx

672 lines
24 KiB
TypeScript
Raw Normal View History

Initial commit
2025-09-23 03:32:23 +00:00
"use client";
import Image from "next/image";
import { useEffect, useState } from "react";
import Link from "next/link";
import { getArticleById, getListArticle } from "@/service/article";
import { close, loading } from "@/config/swal";
import { useParams } from "next/navigation";
import Author from "../landing-page/author";
type TabKey = "trending" | "comments" | "latest";
type Article = {
id: number;
title: string;
description: string;
categoryName: string;
createdAt: string;
createdByName: string;
thumbnailUrl: string;
categories: {
title: string;
}[];
files: {
update
2025-09-23 09:11:40 +00:00
fileUrl: string;
Initial commit
2025-09-23 03:32:23 +00:00
file_alt: string;
}[];
};
interface CategoryType {
id: number;
label: string;
value: number;
}
export default function DetailContent() {
const params = useParams();
const id = params?.id;
const [page, setPage] = useState(1);
const [totalPage, setTotalPage] = useState(1);
const [articles, setArticles] = useState<Article[]>([]);
const [articleDetail, setArticleDetail] = useState<any>(null);
const [showData, setShowData] = useState("5");
const [search, setSearch] = useState("-");
const [listCategory, setListCategory] = useState<CategoryType[]>([]);
const [selectedCategories, setSelectedCategories] = useState<any>("-");
const [startDateValue, setStartDateValue] = useState({
startDate: null,
endDate: null,
});
const [detailfiles, setDetailFiles] = useState<any>([]);
const [mainImage, setMainImage] = useState(0);
const [thumbnail, setThumbnail] = useState("-");
const [diseId, setDiseId] = useState(0);
const [thumbnailImg, setThumbnailImg] = useState<File[]>([]);
const [selectedMainImage, setSelectedMainImage] = useState<number | null>(
null
);
const [tabArticles, setTabArticles] = useState<Article[]>([]);
const [activeTab, setActiveTab] = useState<TabKey>("trending");
const tabs: { id: TabKey; label: string }[] = [
{ id: "trending", label: "Trending" },
{ id: "comments", label: "Comments" },
{ id: "latest", label: "Latest" },
];
useEffect(() => {
fetchTabArticles();
}, [activeTab]);
async function fetchTabArticles() {
const req: any = {
limit: showData,
page,
search,
categorySlug: Array.from(selectedCategories).join(","),
sort: "desc",
sortBy: "created_at",
};
// Sesuaikan sortBy berdasarkan tab
if (activeTab === "trending") {
req.sortBy = "view_count";
} else if (activeTab === "comments") {
req.sortBy = "comment_count";
} else {
req.sortBy = "created_at";
}
// Hanya kirimkan search jika valid
if (search && search !== "-" && search !== "") {
req.search = search;
}
if (selectedCategories && selectedCategories !== "-") {
req.categorySlug = selectedCategories;
}
try {
const res = await getListArticle(req);
setTabArticles(res?.data?.data || []);
} catch (error) {
console.error("Failed fetching tab articles:", error);
setTabArticles([]); // Optional fallback
}
}
const content: Record<
TabKey,
{ image: string; title: string; date: string }[]
> = {
trending: [
{
image: "/thumb1.png",
title:
"#StopBullyDiSekolah: Peran Positif Media Sosial dalam Mengatasi Bullying",
date: "22 FEBRUARI 2024",
},
{
image: "/thumb2.png",
title:
"Polri Gelar Lomba Orasi Unjuk Rasa dalam Rangka Hari HAM Sedunia Berhadiah Total Lebih dari Rp 150 juta!",
date: "29 NOVEMBER 2021",
},
{
image: "/thumb3.png",
title: "Tingkatkan Ibadah Sambut #RamadhanPenuhDamai",
date: "7 MARET 2024",
},
{
image: "/thumb4.png",
title:
"Exploring the Charm of Papua’s Traditional Clothing: A Captivating and Meaningful Cultural Heritage",
date: "1 AGUSTUS 2024",
},
],
comments: [
{
image: "/thumb-comment.png",
title: "Pengunjung Komentar Positif tentang Fitur Baru",
date: "3 JUNI 2024",
},
],
latest: [
{
image: "/thumb-latest.png",
title: "Update Terbaru dari Redaksi Hari Ini",
date: "2 JULI 2025",
},
],
};
useEffect(() => {
initState();
}, [page, showData, startDateValue, selectedCategories]);
async function initState() {
// loading();
const req = {
limit: showData,
page,
search,
categorySlug: Array.from(selectedCategories).join(","),
sort: "desc",
sortBy: "created_at",
};
try {
const res = await getListArticle(req);
setArticles(res?.data?.data || []);
setTotalPage(res?.data?.meta?.totalPage || 1);
} finally {
// close();
}
}
useEffect(() => {
initStateData();
}, [listCategory]);
async function initStateData() {
loading();
const res = await getArticleById(id);
const data = res.data?.data;
setThumbnail(data?.thumbnailUrl);
setDiseId(data?.aiArticleId);
setDetailFiles(data?.files);
setArticleDetail(data); // <-- Add this
close();
}
return (
<>
<div className="flex items-center bg-[#F2F4F3] w-full overflow-hidden mb-4 py-6 px-8">
<Image
src={"/mikul.png"}
alt="Background"
width={272}
height={90}
className="w-full md:w-[272px] h-[90px] object-cover border"
priority
/>
</div>
<div className="bg-white grid grid-cols-1 md:grid-cols-3 gap-6 px-8 py-8">
<div className="md:col-span-2">
<p className="text-sm text-gray-500 mb-2">Home {">"}Detail</p>
<h1 className="text-3xl md:text-4xl font-bold text-[#1a1a1a] leading-tight mb-4">
{articleDetail?.title}
</h1>
<div className="flex items-center space-x-2 text-sm text-gray-500 mb-4">
<div className="text-[#31942E]">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<g
fill="none"
// fill-rule="evenodd"
>
<path d="m12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01z" />
<path
fill="currentColor"
d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10s10-4.477 10-10S17.523 2 12 2M8.5 9.5a3.5 3.5 0 1 1 7 0a3.5 3.5 0 0 1-7 0m9.758 7.484A7.99 7.99 0 0 1 12 20a7.99 7.99 0 0 1-6.258-3.016C7.363 15.821 9.575 15 12 15s4.637.821 6.258 1.984"
/>
</g>
</svg>
</div>
<span className="text-[#31942E] font-medium">
{articleDetail?.createdByName}
</span>
<span>•</span>
<span>
<span>
{new Date(articleDetail?.createdAt).toLocaleDateString(
"id-ID",
{
day: "numeric",
month: "long",
year: "numeric",
}
)}
</span>
</span>
<span>•</span>
<span>{articleDetail?.categories?.[0]?.title}</span>
</div>
<div className="w-full h-auto mb-6">
update
2025-09-23 09:11:40 +00:00
{articleDetail?.files?.[0]?.fileUrl ? (
Initial commit
2025-09-23 03:32:23 +00:00
<Image
update
2025-09-23 09:11:40 +00:00
src={articleDetail.files[0].fileUrl}
Initial commit
2025-09-23 03:32:23 +00:00
alt="Berita"
width={800}
height={400}
className="rounded-lg w-full object-cover"
/>
) : (
<div className="w-full h-[400px] bg-gray-100 flex items-center justify-center rounded-lg">
<p className="text-gray-400 text-sm">Gambar tidak tersedia</p>
</div>
)}
<p className="text-sm text-gray-500 mt-2 text-end">
{articleDetail?.slug}
</p>
</div>
<div className="flex relative">
<div className=" flex flex-col w-fit rounded overflow-hidden mr-5">
<Link
href="#"
aria-label="Facebook"
className="bg-[#3b5998] p-4 flex justify-center items-center"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
fill="white"
viewBox="0 0 24 24"
>
<path d="M14 13.5h2.5l1-4H14v-2c0-1.03 0-2 2-2h1.5V2.14c-.326-.043-1.557-.14-2.857-.14C11.928 2 10 3.657 10 6.7v2.8H7v4h3V22h4z" />
</svg>
</Link>
<Link
href="#"
aria-label="Twitter"
className="bg-[#55acee] p-4 flex justify-center items-center"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
fill="white"
viewBox="0 0 24 24"
>
<path d="M7.91 20.889c8.302 0 12.845-6.885 12.845-12.845c0-.193 0-.387-.009-.58A9.2 9.2 0 0 0 23 5.121a9.2 9.2 0 0 1-2.597.713a4.54 4.54 0 0 0 1.99-2.5a9 9 0 0 1-2.87 1.091A4.5 4.5 0 0 0 16.23 3a4.52 4.52 0 0 0-4.516 4.516c0 .352.044.696.114 1.03a12.82 12.82 0 0 1-9.305-4.718a4.526 4.526 0 0 0 1.4 6.03a4.6 4.6 0 0 1-2.043-.563v.061a4.524 4.524 0 0 0 3.62 4.428a4.4 4.4 0 0 1-1.189.159q-.435 0-.845-.08a4.51 4.51 0 0 0 4.217 3.135a9.05 9.05 0 0 1-5.608 1.936A9 9 0 0 1 1 18.873a12.84 12.84 0 0 0 6.91 2.016" />
</svg>
</Link>
<Link
href="#"
aria-label="Google"
className="bg-[#fce9e7] p-4 flex justify-center items-center text-white"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
fill="currentColor"
viewBox="0 0 24 24"
>
<path d="M7.796 14.333v-2.618h7.211c.066.382.12.763.12 1.265c0 4.364-2.923 7.462-7.33 7.462A7.63 7.63 0 0 1 .16 12.806a7.63 7.63 0 0 1 7.636-7.637c2.062 0 3.786.753 5.117 1.997L10.84 9.162c-.567-.546-1.56-1.178-3.044-1.178c-2.607 0-4.734 2.16-4.734 4.822s2.127 4.821 4.734 4.821c3.022 0 4.157-2.17 4.331-3.294zm13.27-2.6H23.2v2.134h-2.133V16h-2.134v-2.133H16.8v-2.134h2.133V9.6h2.134z" />
</svg>
</Link>
<Link
href="#"
aria-label="Share"
className="bg-[#cccccc] p-4 flex justify-center items-center text-white"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
fill="currentColor"
viewBox="0 0 24 24"
>
<path d="m21 12l-7-7v4C7 10 4 15 3 20c2.5-3.5 6-5.1 11-5.1V19z" />
</svg>
</Link>
</div>
<div className="flex-1 overflow-y-auto">
<p className="text-gray-700 leading-relaxed text-justify">
<span className="text-black font-bold text-md">
Mikulnews.com -
</span>
{articleDetail?.description}
</p>
<Author />
<div className="flex flex-row gap-2 items-center">
<span className="font-semibold text-sm text-gray-700">
Tags:
</span>
<div className="flex flex-wrap gap-2 mt-1">
{articleDetail?.tags ? (
<span className="bg-gray-100 text-gray-700 text-sm px-2 py-1 rounded">
{articleDetail.tags}
</span>
) : (
<span className="text-sm text-gray-500">Tidak ada tag</span>
)}
</div>
</div>
</div>
</div>
<div className="relative mb-2 h-[120px] overflow-hidden flex items-center border my-8">
<Image
src={"/image-kolom.png"}
alt="Berita Utama"
fill
className="object-contain"
/>
</div>
<div className="mt-10">
<div className="flex items-center space-x-4 p-4 border rounded-lg mb-6">
<Image
src={"/author.png"}
alt="Author"
width={60}
height={60}
className="rounded-full"
/>
<div>
<p className="text-green-600 font-bold text-lg">
christine natalia
</p>
</div>
</div>
<h2 className="text-2xl font-bold mb-2">Tinggalkan Balasan</h2>
<p className="text-gray-600 mb-4 text-sm">
Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib
ditandai <span className="text-green-600">*</span>
</p>
<form className="space-y-6 mt-6">
<div>
<label
htmlFor="komentar"
className="block text-sm font-medium mb-1"
>
Komentar <span className="text-green-600">*</span>
</label>
<textarea
id="komentar"
className="w-full border border-gray-300 rounded-md p-3 h-40 focus:outline-none focus:ring-2 focus:ring-green-600"
required
/>
</div>
<div>
<label
htmlFor="nama"
className="block text-sm font-medium mb-1"
>
Nama <span className="text-green-600">*</span>
</label>
<input
type="text"
id="nama"
className="w-full border border-gray-300 rounded-md p-2"
required
/>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label
htmlFor="email"
className="block text-sm font-medium mb-1"
>
Email <span className="text-green-600">*</span>
</label>
<input
type="email"
id="email"
className="w-full border border-gray-300 rounded-md p-2"
required
/>
</div>
<div>
<label
htmlFor="website"
className="block text-sm font-medium mb-1"
>
Situs Web
</label>
<input
type="url"
id="website"
className="w-full border border-gray-300 rounded-md p-2"
/>
</div>
</div>
<div className="flex items-start space-x-2 mt-2">
<input type="checkbox" id="saveInfo" className="mt-1" />
<label htmlFor="saveInfo" className="text-sm text-gray-700">
Simpan nama, email, dan situs web saya pada peramban ini untuk
komentar saya berikutnya.
</label>
</div>
<p className="text-red-600 text-sm">
The reCAPTCHA verification period has expired. Please reload the
page.
</p>
<button
type="submit"
className="bg-green-600 hover:bg-green-700 text-white font-semibold px-6 py-2 rounded-md transition mt-2"
>
KIRIM KOMENTAR
</button>
</form>
</div>
</div>
<div className="md:col-span-1 space-y-6">
<div className="sticky top-0 space-y-6">
<div className="bg-white shadow p-4 rounded-lg">
<Image
src={"/kolom.png"}
alt="Iklan"
width={345}
height={345}
className="rounded"
/>
<button className="mt-4 w-full bg-black text-white py-2 rounded hover:opacity-90">
Learn More
</button>
</div>
<div className="bg-white shadow p-4 rounded-lg">
<h2 className="text-lg font-semibold mb-2">Connect with us</h2>
<div className="flex space-x-2">
<div className="bg-[#0057ff] text-white px-3 py-2 rounded">
<p className="text-sm font-bold">Bē</p>
<p className="text-xs">139 Followers</p>
</div>
<div className="bg-[#ff0000] text-white px-3 py-2 rounded">
<p className="text-sm font-bold">YouTube</p>
<p className="text-xs">205k Subscribers</p>
</div>
<div className="bg-[#f9a825] text-white px-3 py-2 rounded">
<p className="text-sm font-bold">RSS</p>
<p className="text-xs">23.9k Followers</p>
</div>
</div>
</div>
<div className="bg-white shadow p-4 rounded-lg">
<div className="flex space-x-4 border-b mb-4">
{tabs.map((tab) => (
<button
key={tab.id}
onClick={() => setActiveTab(tab.id)}
className={`pb-2 text-sm font-medium ${
activeTab === tab.id
? "border-b-2 border-green-600 text-green-600"
: "text-gray-600"
}`}
>
{tab.label}
</button>
))}
</div>
<div className="space-y-4">
{tabArticles.map((item, idx) => (
<div key={idx} className="flex space-x-3">
<Image
src={item.thumbnailUrl || "/default-thumb.png"}
alt={item.title}
width={70}
height={70}
className="rounded w-[70px] h-[70px] object-cover"
/>
<div>
<p className="text-sm font-semibold leading-snug">
{item.title}
</p>
<p className="text-xs text-gray-500 mt-1">
{new Date(item.createdAt).toLocaleDateString("id-ID", {
day: "2-digit",
month: "long",
year: "numeric",
})}
</p>
</div>
</div>
))}
</div>
{tabArticles.length === 0 ? (
<p className="text-sm text-gray-500">
Artikel tidak ditemukan.
</p>
) : (
tabArticles.map((item, idx) => (
<div key={idx} className="flex space-x-3">
<Image
src={item.thumbnailUrl || "/default-thumb.png"}
alt={item.title}
width={70}
height={70}
className="rounded w-[70px] h-[70px] object-cover"
/>
<div>
<p className="text-sm font-semibold leading-snug">
{item.title}
</p>
<p className="text-xs text-gray-500 mt-1">
{new Date(item.createdAt).toLocaleDateString("id-ID", {
day: "2-digit",
month: "long",
year: "numeric",
})}
</p>
</div>
</div>
))
)}
</div>
<div className="mt-6">
<h3 className="text-base font-semibold mb-2 text-gray-800 border-b pb-1 border-green-600 inline-block">
Recommended
</h3>
<div className="space-y-4">
<div className="relative">
<Image
src={"/gaza.png"}
alt="Recommended Article"
width={400}
height={200}
className="rounded-lg w-full h-auto object-cover"
/>
<div className="absolute bottom-0 left-0 right-0 bg-black bg-opacity-60 text-white p-3 rounded-b-lg">
<p className="text-sm font-semibold leading-tight">
Bom Bunuh Diri Guncang Gereja di Damaskus, 20 Orang Tewas
dan Puluhan Terluka
</p>
<p className="text-xs text-gray-300 mt-1">
📅 23 JUNI 2025
</p>
</div>
</div>
<div className="space-y-3">
<div className="flex space-x-3">
<Image
src={"/perang.png"}
alt="OPM Serang Gereja"
width={80}
height={60}
className="rounded object-cover w-[80px] h-[60px]"
/>
<div>
<p className="text-sm font-semibold leading-snug">
OPM Mulai Kehilangan Simpati dari Masyarakat Papua Usai
Serang Gereja
</p>
<p className="text-xs text-gray-500 mt-1">
📅 15 JUNI 2025
</p>
</div>
</div>
<div className="flex space-x-3">
<Image
src={"/jateng.png"}
alt="Denda Merokok"
width={80}
height={60}
className="rounded object-cover w-[80px] h-[60px]"
/>
<div>
<p className="text-sm font-semibold leading-snug">
Jakarta Terapkan Denda Rp 250.000 bagi Warga yang
Merokok Sembarangan
</p>
<p className="text-xs text-gray-500 mt-1">
📅 13 JUNI 2025
</p>
</div>
</div>
<div className="flex space-x-3">
<Image
src={"/investasi.jpg"}
alt="Pengguna Internet"
width={80}
height={60}
className="rounded object-cover w-[80px] h-[60px]"
/>
<div>
<p className="text-sm font-semibold leading-snug">
Warga Indonesia Jadi Pengguna Internet via Ponsel
Terbanyak di Dunia
</p>
<p className="text-xs text-gray-500 mt-1">
📅 26 MEI 2025
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</>
);
}