75 lines
1.9 KiB
TypeScript
75 lines
1.9 KiB
TypeScript
import { listDataAdvertisements } from "@/service/broadcast/broadcast";
|
|
import { useEffect, useState } from "react";
|
|
import * as React from "react";
|
|
|
|
interface Advertisement {
|
|
id: string;
|
|
imageUrl: string;
|
|
[key: string]: any; // Tambahan kalau ada properti lain
|
|
}
|
|
|
|
// // Simulasi fungsi API (replace dengan yang asli)
|
|
// async function listDataAdvertisements(
|
|
// page: number,
|
|
// size: number,
|
|
// search: string,
|
|
// category: string,
|
|
// status: string
|
|
// ) {
|
|
// // contoh struktur response dummy
|
|
// return {
|
|
// data: {
|
|
// data: {
|
|
// content: [
|
|
// { id: "1", imageUrl: "/images/all-img/kiri1.png" },
|
|
// { id: "2", imageUrl: "/images/all-img/kiri2.png" },
|
|
// ],
|
|
// totalElements: 2,
|
|
// totalPages: 1,
|
|
// },
|
|
// },
|
|
// };
|
|
// }
|
|
|
|
const AdvertisementPlacements = (props: { placement?: string }) => {
|
|
const [ads, setAds] = useState<Advertisement[]>([]);
|
|
const [loading, setLoading] = useState<boolean>(false);
|
|
|
|
const fetchData = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const res = await listDataAdvertisements(
|
|
0,
|
|
"4",
|
|
""
|
|
);
|
|
const data = res?.data?.data;
|
|
const contentData = data?.content;
|
|
if (props.placement == "left") {
|
|
setAds(contentData.slice(0,2));
|
|
} else {
|
|
setAds(contentData.slice(2));
|
|
}
|
|
} catch (error) {
|
|
console.error("Error fetching advertisements:", error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchData();
|
|
}, []);
|
|
|
|
return (
|
|
<div className={`sticky top-0 space-y-4 ${props.placement == "left" ? "ml-14" : "mr-14"}`}>
|
|
{loading && <p className="text-sm text-gray-500">Loading...</p>}
|
|
{ads?.map((ad) => (
|
|
<img key={ad.id} src={ad.contentFileUrl} alt={`Banner ${ad.id}`} className="w-full" />
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AdvertisementPlacements;
|