150 lines
4.3 KiB
TypeScript
150 lines
4.3 KiB
TypeScript
// import { listDataAdvertisements } from "@/service/broadcast/broadcast";
|
|
// import { useEffect, useState } from "react";
|
|
// import * as React from "react";
|
|
|
|
// interface Advertisement {
|
|
// id: string;
|
|
// placements: string;
|
|
// imageUrl: string;
|
|
// [key: string]: any;
|
|
// }
|
|
|
|
// // // 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;
|
|
// data: Advertisement[];
|
|
// loading: boolean;
|
|
// }) => {
|
|
// const [ads, setAds] = useState<Advertisement[] | undefined[]>([]);
|
|
// useEffect(() => {
|
|
// if (!props.loading && props.data.length > 0) {
|
|
// console.log(
|
|
// "RRRRRR",
|
|
// props.data[0].placements.includes(props.placement),
|
|
// props.placement
|
|
// );
|
|
|
|
// const filtered = props.data.filter((a) =>
|
|
// a.placements.includes(props.placement)
|
|
// );
|
|
// let temps: Advertisement[] | undefined[] = [];
|
|
// temps[0] = filtered.find((b) => b.placements.includes("top"));
|
|
// temps[1] = filtered.find((b) => b.placements.includes("bottom"));
|
|
// setAds(temps);
|
|
// console.log("PPPPPP", filtered);
|
|
// }
|
|
// }, [props.data, props.loading]);
|
|
|
|
// return (
|
|
// <div
|
|
// className={`sticky top-0 space-y-4 ${
|
|
// props.placement == "left" ? "ml-14" : "mr-14"
|
|
// }`}
|
|
// >
|
|
// {props.loading && <p className="text-sm text-gray-500">Loading...</p>}
|
|
// {ads?.map(
|
|
// (ad) =>
|
|
// ad && (
|
|
// <img
|
|
// key={ad.id}
|
|
// src={ad.contentFileUrl}
|
|
// alt={`Banner ${ad.id}`}
|
|
// className="w-full"
|
|
// />
|
|
// )
|
|
// )}
|
|
// </div>
|
|
// );
|
|
// };
|
|
|
|
// export default AdvertisementPlacements;
|
|
import { listDataAdvertisements } from "@/service/broadcast/broadcast";
|
|
import { useEffect, useState } from "react";
|
|
import * as React from "react";
|
|
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
|
|
|
|
interface Advertisement {
|
|
id: string;
|
|
placements: string;
|
|
imageUrl: string;
|
|
contentFileUrl?: string;
|
|
[key: string]: any;
|
|
}
|
|
|
|
const AdvertisementPlacements = (props: {
|
|
placement: string;
|
|
data: Advertisement[];
|
|
loading: boolean;
|
|
}) => {
|
|
const [ads, setAds] = useState<Advertisement[] | undefined[]>([]);
|
|
|
|
useEffect(() => {
|
|
if (!props.loading && props.data.length > 0) {
|
|
const filtered = props.data.filter((a) =>
|
|
a.placements.includes(props.placement)
|
|
);
|
|
|
|
let temps: Advertisement[] | undefined[] = [];
|
|
temps[0] = filtered.find((b) => b.placements.includes("top"));
|
|
temps[1] = filtered.find((b) => b.placements.includes("bottom"));
|
|
setAds(temps);
|
|
}
|
|
}, [props.data, props.loading, props.placement]);
|
|
|
|
return (
|
|
<div
|
|
className={`sticky top-0 space-y-4 ${
|
|
props.placement === "left" ? "ml-14" : "mr-14"
|
|
}`}
|
|
>
|
|
{props.loading && <p className="text-sm text-gray-500">Loading...</p>}
|
|
|
|
{ads?.map(
|
|
(ad) =>
|
|
ad && (
|
|
<Dialog key={ad.id}>
|
|
<DialogTrigger asChild>
|
|
<img
|
|
src={ad.contentFileUrl || ad.imageUrl}
|
|
alt={`Banner ${ad.id}`}
|
|
className="w-full cursor-pointer rounded-lg shadow-md hover:opacity-90 transition"
|
|
/>
|
|
</DialogTrigger>
|
|
<DialogContent className="max-w-4xl p-0 bg-transparent border-0 shadow-none">
|
|
<img
|
|
src={ad.contentFileUrl || ad.imageUrl}
|
|
alt={`Banner Besar ${ad.id}`}
|
|
className="w-full h-auto rounded-lg"
|
|
/>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AdvertisementPlacements;
|