update
This commit is contained in:
parent
437eded657
commit
41812a6696
|
|
@ -12,14 +12,7 @@ export default function Home() {
|
|||
<div className="flex-1 bg-gray-300 mt-10">
|
||||
<Header />
|
||||
<BreakingNews />
|
||||
<div className="max-w-7xl mx-auto px-4 relative mb-2 h-[120px] overflow-hidden flex items-center border my-8">
|
||||
<Image
|
||||
src={"/image-kolom.png"}
|
||||
alt="Berita Utama"
|
||||
fill
|
||||
className="w-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<News />
|
||||
</div>
|
||||
<Footer />
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import { getArticleById, getListArticle } from "@/service/article";
|
|||
import { close, loading } from "@/config/swal";
|
||||
import { useParams } from "next/navigation";
|
||||
import { Link2, MailIcon } from "lucide-react";
|
||||
import { getAdvertise } from "@/service/advertisement";
|
||||
|
||||
type TabKey = "trending" | "comments" | "latest";
|
||||
|
||||
|
|
@ -32,6 +33,15 @@ interface CategoryType {
|
|||
value: number;
|
||||
}
|
||||
|
||||
type Advertise = {
|
||||
id: number;
|
||||
title: string;
|
||||
description: string;
|
||||
placement: string;
|
||||
contentFileUrl: string;
|
||||
redirectLink: string;
|
||||
};
|
||||
|
||||
export default function DetailContent() {
|
||||
const params = useParams();
|
||||
const id = params?.id;
|
||||
|
|
@ -68,6 +78,36 @@ export default function DetailContent() {
|
|||
{ id: "latest", label: "Latest" },
|
||||
];
|
||||
|
||||
const [bannerAd, setBannerAd] = 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 || [1];
|
||||
|
||||
// filter iklan dengan placement = "banner"
|
||||
const banner = data.find((ad) => ad.placement === "jumbotron");
|
||||
|
||||
if (banner) {
|
||||
setBannerAd(banner);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Error fetching advertisement:", err);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
fetchTabArticles();
|
||||
}, [activeTab]);
|
||||
|
|
@ -519,13 +559,32 @@ export default function DetailContent() {
|
|||
<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"
|
||||
/>
|
||||
{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]"
|
||||
/>
|
||||
)}
|
||||
<button className="mt-4 w-full bg-black text-white py-2 rounded hover:opacity-90">
|
||||
Learn More
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import { CloudUploadIcon, TimesIcon } from "@/components/icons";
|
|||
import Image from "next/image";
|
||||
import ReactSelect from "react-select";
|
||||
import makeAnimated from "react-select/animated";
|
||||
import { htmlToString } from "@/utils/global";
|
||||
import { convertDateFormatNoTime, htmlToString } from "@/utils/global";
|
||||
import { close, error, loading, successToast } from "@/config/swal";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
|
|
@ -44,6 +44,13 @@ import GenerateSingleArticleForm from "./generate-ai-single-form";
|
|||
import GenerateContentRewriteForm from "./generate-ai-content-rewrite-form";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
import { Calendar } from "@/components/ui/calendar";
|
||||
import DatePicker from "react-datepicker";
|
||||
|
||||
const CustomEditor = dynamic(
|
||||
() => {
|
||||
|
|
@ -121,8 +128,8 @@ export default function CreateArticleForm() {
|
|||
"publish"
|
||||
);
|
||||
const [isScheduled, setIsScheduled] = useState(false);
|
||||
|
||||
const [startDateValue, setStartDateValue] = useState<any>(null);
|
||||
const [startDateValue, setStartDateValue] = useState<Date | undefined>();
|
||||
const [startTimeValue, setStartTimeValue] = useState<string>("");
|
||||
|
||||
const { getRootProps, getInputProps } = useDropzone({
|
||||
onDrop: (acceptedFiles) => {
|
||||
|
|
@ -332,12 +339,34 @@ export default function CreateArticleForm() {
|
|||
}
|
||||
}
|
||||
|
||||
if (status === "scheduled") {
|
||||
if (status === "scheduled" && startDateValue) {
|
||||
// ambil waktu, default 00:00 jika belum diisi
|
||||
const [hours, minutes] = startTimeValue
|
||||
? startTimeValue.split(":").map(Number)
|
||||
: [0, 0];
|
||||
|
||||
// gabungkan tanggal + waktu
|
||||
const combinedDate = new Date(startDateValue);
|
||||
combinedDate.setHours(hours, minutes, 0, 0);
|
||||
|
||||
// format: 2025-10-08 14:30:00
|
||||
const formattedDateTime = `${combinedDate.getFullYear()}-${String(
|
||||
combinedDate.getMonth() + 1
|
||||
).padStart(2, "0")}-${String(combinedDate.getDate()).padStart(
|
||||
2,
|
||||
"0"
|
||||
)} ${String(combinedDate.getHours()).padStart(2, "0")}:${String(
|
||||
combinedDate.getMinutes()
|
||||
).padStart(2, "0")}:00`;
|
||||
|
||||
const request = {
|
||||
id: articleId,
|
||||
date: `${startDateValue?.year}-${startDateValue?.month}-${startDateValue?.day}`,
|
||||
date: formattedDateTime,
|
||||
};
|
||||
|
||||
console.log("📤 Sending schedule request:", request);
|
||||
const res = await createArticleSchedule(request);
|
||||
console.log("✅ Schedule response:", res);
|
||||
}
|
||||
|
||||
close();
|
||||
|
|
@ -812,32 +841,49 @@ export default function CreateArticleForm() {
|
|||
</label>
|
||||
</div>
|
||||
|
||||
{/* {isScheduled && (
|
||||
<div className="flex flex-col lg:flex-row gap-3">
|
||||
<div className="w-full lg:w-[140px] flex flex-col gal-2 ">
|
||||
{isScheduled && (
|
||||
<div className="flex flex-col lg:flex-row gap-3 mt-2">
|
||||
{/* Pilih tanggal */}
|
||||
<div className="w-full lg:w-[140px] flex flex-col gap-2">
|
||||
<p className="text-sm">Tanggal</p>
|
||||
<Popover>
|
||||
<PopoverTrigger>
|
||||
<Button
|
||||
type="button"
|
||||
className="w-full !h-[30px] lg:h-[40px] border-1 rounded-lg text-black"
|
||||
className="w-full !h-[37px] lg:h-[37px] border-1 rounded-lg text-black"
|
||||
variant="outline"
|
||||
>
|
||||
{startDateValue
|
||||
? convertDateFormatNoTime(startDateValue)
|
||||
? startDateValue.toISOString().split("T")[0]
|
||||
: "-"}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="bg-transparent p-0">
|
||||
<Calendar
|
||||
<DatePicker
|
||||
selected={startDateValue}
|
||||
onSelect={setStartDateValue}
|
||||
onChange={(date) =>
|
||||
setStartDateValue(date ?? undefined)
|
||||
}
|
||||
dateFormat="yyyy-MM-dd"
|
||||
className="w-full border rounded-lg px-2 py-1 text-black cursor-pointer h-[150px]"
|
||||
placeholderText="Pilih tanggal"
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
{/* Pilih waktu */}
|
||||
<div className="w-full lg:w-[140px] flex flex-col gap-2">
|
||||
<p className="text-sm">Waktu</p>
|
||||
<input
|
||||
type="time"
|
||||
value={startTimeValue}
|
||||
onChange={(e) => setStartTimeValue(e.target.value)}
|
||||
className="w-full border rounded-lg px-2 py-[6px] text-black"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)} */}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import { Calendar, Eye, MessageSquare } from "lucide-react";
|
|||
import { useEffect, useState } from "react";
|
||||
import { getListArticle } from "@/service/article";
|
||||
import Link from "next/link";
|
||||
import { getAdvertise } from "@/service/advertisement";
|
||||
|
||||
type Article = {
|
||||
id: number;
|
||||
|
|
@ -19,10 +20,49 @@ type Article = {
|
|||
files: { fileUrl: string; file_alt: string }[];
|
||||
};
|
||||
|
||||
type Advertise = {
|
||||
id: number;
|
||||
title: string;
|
||||
description: string;
|
||||
placement: string;
|
||||
contentFileUrl: string;
|
||||
redirectLink: string;
|
||||
};
|
||||
|
||||
export default function Header() {
|
||||
const [articles, setArticles] = useState<Article[]>([]);
|
||||
const [showData, setShowData] = useState("5");
|
||||
|
||||
const [bannerAd, setBannerAd] = 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 || [1];
|
||||
|
||||
// filter iklan dengan placement = "banner"
|
||||
const banner = data.find((ad) => ad.placement === "jumbotron");
|
||||
|
||||
if (banner) {
|
||||
setBannerAd(banner);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Error fetching advertisement:", err);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
fetchArticles();
|
||||
}, [showData]);
|
||||
|
|
@ -160,12 +200,32 @@ export default function Header() {
|
|||
|
||||
{/* Kolom PPS */}
|
||||
<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"
|
||||
/>
|
||||
{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>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import Image from "next/image";
|
|||
import { getListArticle } from "@/service/article";
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { getAdvertise } from "@/service/advertisement";
|
||||
|
||||
type Article = {
|
||||
id: number;
|
||||
|
|
@ -17,12 +18,49 @@ type Article = {
|
|||
files: { fileUrl: string; file_alt: string }[];
|
||||
};
|
||||
|
||||
type Advertise = {
|
||||
id: number;
|
||||
title: string;
|
||||
description: string;
|
||||
placement: string;
|
||||
contentFileUrl: string;
|
||||
redirectLink: string;
|
||||
};
|
||||
|
||||
export default function LatestNews() {
|
||||
const [articles, setArticles] = useState<Article[]>([]);
|
||||
const [showData, setShowData] = useState("5");
|
||||
const pathname = usePathname();
|
||||
const currentSlug = pathname.split("/")[2] || "";
|
||||
const [bannerAd, setBannerAd] = 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 || [1];
|
||||
|
||||
// filter iklan dengan placement = "banner"
|
||||
const banner = data.find((ad) => ad.placement === "jumbotron");
|
||||
|
||||
if (banner) {
|
||||
setBannerAd(banner);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Error fetching advertisement:", err);
|
||||
}
|
||||
}
|
||||
useEffect(() => {
|
||||
fetchArticles();
|
||||
}, []);
|
||||
|
|
@ -108,12 +146,32 @@ export default function LatestNews() {
|
|||
</p>
|
||||
<h3 className="text-center text-md font-bold mb-4">ADVERTISEMENT</h3>
|
||||
<div className="relative w-full h-[300px] bg-gray-100">
|
||||
<Image
|
||||
src="/adversment.png"
|
||||
alt="Advertisement"
|
||||
fill
|
||||
className="object-contain"
|
||||
/>
|
||||
{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>
|
||||
<button className="mt-4 text-xs bg-black text-white px-4 py-2 hover:bg-gray-800">
|
||||
LEARN MORE
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
|
|||
import Image from "next/image";
|
||||
import { getListArticle } from "@/service/article";
|
||||
import Link from "next/link";
|
||||
import { getAdvertise } from "@/service/advertisement";
|
||||
|
||||
// Type dari API
|
||||
type Article = {
|
||||
|
|
@ -17,13 +18,50 @@ type Article = {
|
|||
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 [articlesByCategory, setArticlesByCategory] = useState<
|
||||
Record<string, Article[]>
|
||||
>({});
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [visiblePosts, setVisiblePosts] = useState<Record<string, number>>({});
|
||||
const [bannerAd, setBannerAd] = 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 || [];
|
||||
|
||||
// filter iklan dengan placement = "banner"
|
||||
const banner = data.find((ad) => ad.placement === "banner");
|
||||
|
||||
if (banner) {
|
||||
setBannerAd(banner);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Error fetching advertisement:", err);
|
||||
}
|
||||
}
|
||||
useEffect(() => {
|
||||
fetchArticles();
|
||||
}, []);
|
||||
|
|
@ -67,64 +105,116 @@ export default function News() {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-6 mb-10">
|
||||
{loading && <p className="text-center">Memuat data...</p>}
|
||||
|
||||
{!loading &&
|
||||
Object.keys(articlesByCategory).map((category) => {
|
||||
const posts = articlesByCategory[category];
|
||||
if (!posts?.length) return null;
|
||||
|
||||
const postsTop = posts.slice(0, 2); // 2 atas
|
||||
const postsBottom = posts.slice(2); // sisanya
|
||||
|
||||
return (
|
||||
<div key={category} className="border p-4 bg-white">
|
||||
{/* Header kategori */}
|
||||
<div className="bg-[#3677A8] text-white px-3 py-1 text-sm font-bold inline-block mb-4">
|
||||
{category}
|
||||
</div>
|
||||
|
||||
{/* Posts atas */}
|
||||
{postsTop.map((post) => (
|
||||
<PostItem key={post.id} post={post} />
|
||||
))}
|
||||
|
||||
{/* Banner Kolom PPS */}
|
||||
<div className="relative mb-2 h-[120px] overflow-hidden flex items-center border my-8">
|
||||
<Image
|
||||
src={"/image-kolom.png"}
|
||||
alt="Kolom PPS"
|
||||
fill
|
||||
className="w-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Posts bawah (pakai visiblePosts[category]) */}
|
||||
{postsBottom.slice(0, visiblePosts[category] || 2).map((post) => (
|
||||
<PostItem key={post.id} post={post} />
|
||||
))}
|
||||
|
||||
{/* Tombol Load More */}
|
||||
{(visiblePosts[category] || 2) < postsBottom.length && (
|
||||
<div className="flex justify-center">
|
||||
<button
|
||||
onClick={() =>
|
||||
setVisiblePosts((prev) => ({
|
||||
...prev,
|
||||
[category]: (prev[category] || 2) + 2,
|
||||
}))
|
||||
}
|
||||
className="bg-black text-white text-xs px-4 py-2 hover:bg-gray-800 mt-4"
|
||||
>
|
||||
LOAD MORE POSTS
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
<>
|
||||
<div className="max-w-7xl mx-auto relative mb-2 h-[120px] overflow-hidden flex items-center border my-8">
|
||||
{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>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</a>
|
||||
) : (
|
||||
<Image
|
||||
src="/image-kolom.png"
|
||||
alt="Berita Utama"
|
||||
width={1200}
|
||||
height={188}
|
||||
className="object-contain w-full h-[188px]"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-6 mb-10">
|
||||
{loading && <p className="text-center">Memuat data...</p>}
|
||||
|
||||
{!loading &&
|
||||
Object.keys(articlesByCategory).map((category) => {
|
||||
const posts = articlesByCategory[category];
|
||||
if (!posts?.length) return null;
|
||||
|
||||
const postsTop = posts.slice(0, 2); // 2 atas
|
||||
const postsBottom = posts.slice(2); // sisanya
|
||||
|
||||
return (
|
||||
<div key={category} className="border p-4 bg-white">
|
||||
{/* Header kategori */}
|
||||
<div className="bg-[#3677A8] text-white px-3 py-1 text-sm font-bold inline-block mb-4">
|
||||
{category}
|
||||
</div>
|
||||
|
||||
{/* Posts atas */}
|
||||
{postsTop.map((post) => (
|
||||
<PostItem key={post.id} post={post} />
|
||||
))}
|
||||
|
||||
{/* Banner Kolom PPS */}
|
||||
<div className="relative mb-2 h-[120px] overflow-hidden flex items-center border my-8">
|
||||
{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="/image-kolom.png"
|
||||
alt="Berita Utama"
|
||||
width={1200}
|
||||
height={188}
|
||||
className="object-contain w-full h-[188px]"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Posts bawah (pakai visiblePosts[category]) */}
|
||||
{postsBottom
|
||||
.slice(0, visiblePosts[category] || 2)
|
||||
.map((post) => (
|
||||
<PostItem key={post.id} post={post} />
|
||||
))}
|
||||
|
||||
{/* Tombol Load More */}
|
||||
{(visiblePosts[category] || 2) < postsBottom.length && (
|
||||
<div className="flex justify-center">
|
||||
<button
|
||||
onClick={() =>
|
||||
setVisiblePosts((prev) => ({
|
||||
...prev,
|
||||
[category]: (prev[category] || 2) + 2,
|
||||
}))
|
||||
}
|
||||
className="bg-black text-white text-xs px-4 py-2 hover:bg-gray-800 mt-4"
|
||||
>
|
||||
LOAD MORE POSTS
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue