84 lines
2.3 KiB
TypeScript
84 lines
2.3 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 LeftBanner = () => {
|
|
const [ads, setAds] = useState<Advertisement[]>([]);
|
|
const [loading, setLoading] = useState<boolean>(false);
|
|
const [showData, setShowData] = React.useState("10");
|
|
const [categories, setCategories] = React.useState<any>();
|
|
const [dataTable, setDataTable] = React.useState<any[]>([]);
|
|
const [totalData, setTotalData] = React.useState<number>(1);
|
|
const [categoryFilter, setCategoryFilter] = React.useState<number[]>([]);
|
|
const [statusFilter, setStatusFilter] = React.useState<number[]>([]);
|
|
const [page, setPage] = React.useState(1);
|
|
|
|
|
|
const fetchData = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const res = await listDataAdvertisements( page - 1,
|
|
showData,
|
|
"",
|
|
categoryFilter?.sort().join(","),
|
|
statusFilter?.sort().join(","));
|
|
const data = res?.data?.data;
|
|
const contentData = data?.content;
|
|
|
|
contentData.forEach((item: Advertisement, index: number) => {
|
|
item.no = index + 1;
|
|
});
|
|
|
|
setAds(contentData);
|
|
} catch (error) {
|
|
console.error("Error fetching advertisements:", error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchData();
|
|
}, []);
|
|
|
|
return (
|
|
<div className="sticky top-0 space-y-4 ml-14">
|
|
{loading && <p className="text-sm text-gray-500">Loading...</p>}
|
|
{ads.map((ad) => (
|
|
<img key={ad.id} src={ad.imageUrl} alt={`Banner ${ad.id}`} width={180} />
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LeftBanner;
|