medol
/
web-kebaikan-indonesia
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

This commit is contained in:
Anang Yusman 2025-10-12 17:40:53 +08:00
parent ed3c3d7876
commit 248d78e5be
10 changed files with 568 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/details/details-content.tsx
View File

@ -426,14 +426,14 @@ export default function DetailContent() {
</div>
</div>
</div>
<div className="relative mb-2 h-[120px] overflow-hidden flex items-center border my-8">
{/* <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> */}
<div className="mt-10">
<h2 className="text-2xl font-bold mb-2">Tinggalkan Balasan</h2>
<p className="text-gray-600 mb-4 text-sm">

72
components/form/article/create-article-form.tsx
View File

@ -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>

68
components/landing-page/headers-guard.tsx
View File

@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
import Image from "next/image";
import Link from "next/link";
import { getListArticle } from "@/service/article";
import { getAdvertise } from "@/service/advertisement";
type Article = {
id: number;
@ -17,6 +18,15 @@ 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 HeaderGuard() {
const [articles, setArticles] = useState<Article[]>([]);
const [page, setPage] = useState(1);
@ -29,6 +39,36 @@ export default function HeaderGuard() {
endDate: null,
});
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(() => {
initState();
}, [page, showData, startDateValue, selectedCategories]);
@ -160,13 +200,33 @@ export default function HeaderGuard() {
</div>
))}
<div className="relative max-w-full h-[300px] overflow-hidden flex items-center mx-auto 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="/earphone.png"
alt="Berita Utama"
fill
className="object-contain rounded"
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="border rounded-md p-4 space-y-4">
<h4 className="text-lg font-semibold">
Subscribe us to get the latest news!

68
components/landing-page/headers-latest.tsx
View File

@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
import Image from "next/image";
import Link from "next/link";
import { getListArticle } from "@/service/article";
import { getAdvertise } from "@/service/advertisement";
type Article = {
id: number;
@ -17,6 +18,15 @@ 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 HeaderLatest() {
const [articles, setArticles] = useState<Article[]>([]);
const [page, setPage] = useState(1);
@ -29,6 +39,36 @@ export default function HeaderLatest() {
endDate: null,
});
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(() => {
initState();
}, [page, showData, startDateValue, selectedCategories]);
@ -161,13 +201,33 @@ export default function HeaderLatest() {
</div>
))}
<div className="relative max-w-full h-[300px] overflow-hidden flex items-center mx-auto 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="/earphone.png"
alt="Berita Utama"
fill
className="object-contain rounded"
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="border rounded-md p-4 space-y-4">
<h4 className="text-lg font-semibold">
Subscribe us to get the latest news!

68
components/landing-page/headers-opinion.tsx
View File

@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
import Image from "next/image";
import Link from "next/link";
import { getListArticle } from "@/service/article";
import { getAdvertise } from "@/service/advertisement";
type Article = {
id: number;
@ -17,6 +18,15 @@ 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 HeaderOpinion() {
const [articles, setArticles] = useState<Article[]>([]);
const [page, setPage] = useState(1);
@ -29,6 +39,36 @@ export default function HeaderOpinion() {
endDate: null,
});
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(() => {
initState();
}, [page, showData, startDateValue, selectedCategories]);
@ -160,13 +200,33 @@ export default function HeaderOpinion() {
</div>
))}
<div className="relative max-w-full h-[300px] overflow-hidden flex items-center mx-auto 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="/earphone.png"
alt="Berita Utama"
fill
className="object-contain rounded"
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="border rounded-md p-4 space-y-4">
<h4 className="text-lg font-semibold">
Subscribe us to get the latest news!

68
components/landing-page/headers-peace.tsx
View File

@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
import Image from "next/image";
import Link from "next/link";
import { getListArticle } from "@/service/article";
import { getAdvertise } from "@/service/advertisement";
type Article = {
id: number;
@ -17,6 +18,15 @@ 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 HeaderPeace() {
const [articles, setArticles] = useState<Article[]>([]);
const [page, setPage] = useState(1);
@ -29,6 +39,36 @@ export default function HeaderPeace() {
endDate: null,
});
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(() => {
initState();
}, [page, showData, startDateValue, selectedCategories]);
@ -160,13 +200,33 @@ export default function HeaderPeace() {
</div>
))}
<div className="relative max-w-full h-[300px] overflow-hidden flex items-center mx-auto 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="/earphone.png"
alt="Berita Utama"
fill
className="object-contain rounded"
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="border rounded-md p-4 space-y-4">
<h4 className="text-lg font-semibold">
Subscribe us to get the latest news!

68
components/landing-page/headers-popular.tsx
View File

@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
import Image from "next/image";
import Link from "next/link";
import { getListArticle } from "@/service/article";
import { getAdvertise } from "@/service/advertisement";
type Article = {
id: number;
@ -17,6 +18,15 @@ 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 HeaderPopular() {
const [articles, setArticles] = useState<Article[]>([]);
const [page, setPage] = useState(1);
@ -29,6 +39,36 @@ export default function HeaderPopular() {
endDate: null,
});
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(() => {
initState();
}, [page, showData, startDateValue, selectedCategories]);
@ -160,13 +200,33 @@ export default function HeaderPopular() {
</div>
))}
<div className="relative max-w-full h-[300px] overflow-hidden flex items-center mx-auto 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="/earphone.png"
alt="Berita Utama"
fill
className="object-contain rounded"
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="border rounded-md p-4 space-y-4">
<h4 className="text-lg font-semibold">
Subscribe us to get the latest news!

3
components/landing-page/headers.tsx
View File

@ -12,6 +12,7 @@ type Article = {
categoryName: string;
createdAt: string;
createdByName: string;
customCreatorName: string;
thumbnailUrl: string;
categories: {
title: string;
@ -87,7 +88,7 @@ export default function Beranda() {
{item.title}
</h2>
<p className="text-sm mt-1 flex items-center">
{item.createdByName}
{item.createdByName || item?.customCreatorName}
<span className="ml-2 w-2 h-[2px] bg-yellow-500 inline-block mr-3"></span>
{new Date(item.createdAt).toLocaleDateString("en-US", {
month: "long",

113
components/landing-page/lifestyle.tsx
View File

@ -7,6 +7,7 @@ import { getListArticle } from "@/service/article";
import { CommentIcon } from "../icons/sidebar-icon";
import { Button } from "../ui/button";
import { MessageCircle } from "lucide-react";
import { getAdvertise } from "@/service/advertisement";
type Article = {
id: number;
@ -15,10 +16,20 @@ type Article = {
categoryName: string;
createdAt: string;
createdByName: string;
customCreatorName: string;
thumbnailUrl: string;
categories: { title: string }[];
};
type Advertise = {
id: number;
title: string;
description: string;
placement: string;
contentFileUrl: string;
redirectLink: string;
};
export default function Lifestyle() {
const [page, setPage] = useState(1);
const [totalPage, setTotalPage] = useState(1);
@ -32,6 +43,36 @@ export default function Lifestyle() {
endDate: null,
});
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();
}, [page, showData, startDateValue, selectedCategories]);
@ -84,7 +125,9 @@ export default function Lifestyle() {
{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 className="font-semibold">
{item.createdByName || item?.customCreatorName}
</span>
<span>•</span>
<span>
{new Date(item.createdAt).toLocaleDateString("id-ID", {
@ -139,12 +182,32 @@ export default function Lifestyle() {
</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"
fill
className="object-contain rounded"
width={1200}
height={188}
className="object-contain w-full h-[188px]"
/>
)}
</div>
</div>
</div>
@ -273,7 +336,9 @@ export default function Lifestyle() {
{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 className="font-semibold">
{item.createdByName || item?.customCreatorName}
</span>
<span>-</span>
<span>
{new Date(item.createdAt).toLocaleDateString("id-ID", {
@ -303,12 +368,32 @@ export default function Lifestyle() {
<div className="space-y-8">
<div className="relative w-full h-[200px] overflow-hidden flex items-center justify-center border rounded-lg">
{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="Kolom Iklan"
fill
className="object-contain rounded"
alt="Berita Utama"
width={1200}
height={188}
className="object-contain w-full h-[188px]"
/>
)}
</div>
<div>
@ -382,7 +467,9 @@ export default function Lifestyle() {
{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 className="font-semibold">
{item.createdByName || item?.customCreatorName}
</span>
<span>-</span>
<span>
{new Date(item.createdAt).toLocaleDateString("id-ID", {
@ -400,14 +487,14 @@ export default function Lifestyle() {
))}
</div>
<div className="relative my-5 max-w-full h-[125px] overflow-hidden flex items-center mx-auto border">
{/* <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>
</div> */}
{visibleCount < articles.length && (
<div className="flex justify-center mt-10">
@ -454,7 +541,7 @@ export default function Lifestyle() {
</p>
<div className="flex items-center gap-2 mt-3 text-sm text-gray-600">
<span className="font-semibold">
{item.createdByName}
{item.createdByName || item?.customCreatorName}
</span>
<span>-</span>
<span>
@ -473,14 +560,14 @@ export default function Lifestyle() {
))}
</div>
<div className="relative my-5 max-w-full h-[125px] overflow-hidden flex items-center mx-auto border">
{/* <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>
</div> */}
{visibleCount < articles.length && (
<div className="flex justify-center mt-6">

68
components/landing-page/on-the-spot.tsx
View File

@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
import Image from "next/image";
import Link from "next/link";
import { getListArticle } from "@/service/article";
import { getAdvertise } from "@/service/advertisement";
type Article = {
id: number;
@ -12,6 +13,7 @@ type Article = {
categoryName: string;
createdAt: string;
createdByName: string;
customCreatorName: string;
thumbnailUrl: string;
categories: {
title: string;
@ -22,6 +24,15 @@ type Article = {
}[];
};
type Advertise = {
id: number;
title: string;
description: string;
placement: string;
contentFileUrl: string;
redirectLink: string;
};
export default function OnTheSpot() {
const [page, setPage] = useState(1);
const [totalPage, setTotalPage] = useState(1);
@ -33,6 +44,35 @@ export default function OnTheSpot() {
startDate: null,
endDate: null,
});
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(() => {
initState();
@ -93,7 +133,7 @@ export default function OnTheSpot() {
{item.title}
</h3>
<p className="text-sm text-gray-700 mt-1 flex items-center">
{item.createdByName}
{item.createdByName || item?.customCreatorName}
<span className="ml-2 w-2 h-[2px] bg-yellow-500 inline-block mr-3"></span>
{new Date(item.createdAt).toLocaleDateString("en-US", {
month: "long",
@ -105,13 +145,33 @@ export default function OnTheSpot() {
</Link>
))}
</div>
<div className="relative my-5 max-w-full h-[125px] overflow-hidden flex items-center mx-auto border">
<div className="relative my-5 max-w-full h-[450px] overflow-hidden flex items-center mx-auto border">
{bannerAd ? (
<a
href={bannerAd.redirectLink}
target="_blank"
rel="noopener noreferrer"
className="block w-full"
>
<div className="relative w-full h-[450px] flex justify-center">
<Image
src={bannerAd.contentFileUrl}
alt={bannerAd.title || "Iklan Banner"}
width={1200} // ukuran dasar untuk responsive
height={450}
className="object-cover w-full h-full"
/>
</div>
</a>
) : (
<Image
src="/image-kolom.png"
alt="Berita Utama"
fill
className="object-cover"
width={1200}
height={188}
className="object-contain w-full h-[188px]"
/>
)}
</div>
</div>
</section>