82 lines
3.6 KiB
TypeScript
82 lines
3.6 KiB
TypeScript
import React, { useState } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { X, ArrowLeft, ArrowRight } from "lucide-react";
|
|
|
|
const PopupModal = ({ onClose }: { onClose: () => void }) => {
|
|
const slides = [
|
|
{
|
|
title: "Pelatihan dan Sertifikasi Online Bidang Pengendalian Pencemaran Udara",
|
|
image: "/assets/popup-1.jpeg",
|
|
description:
|
|
"Kegiatan ini diselenggarakan oleh DLH Provinsi DKI Jakarta bekerja sama dengan LSP Tersertifikasi BNSP.",
|
|
},
|
|
{
|
|
title: "Workshop Peningkatan Kapasitas Pengendalian Pencemaran Udara",
|
|
image: "/assets/popup-2.jpeg",
|
|
description:
|
|
"Workshop ini bertujuan untuk meningkatkan pengetahuan dan keterampilan di bidang lingkungan hidup. Workshop ini bertujuan untuk meningkatkan pengetahuan dan keterampilan di bidang lingkungan hidup.",
|
|
},
|
|
{
|
|
title: "Sosialisasi Program Ramah Lingkungan",
|
|
image: "/assets/popup-2.jpeg",
|
|
description:
|
|
"DLH DKI Jakarta mengajak masyarakat untuk lebih peduli terhadap lingkungan sekitar.",
|
|
},
|
|
];
|
|
|
|
const [currentSlide, setCurrentSlide] = useState(0);
|
|
|
|
const nextSlide = () => {
|
|
setCurrentSlide((prev) => (prev + 1) % slides.length);
|
|
};
|
|
|
|
const prevSlide = () => {
|
|
setCurrentSlide((prev) => (prev - 1 + slides.length) % slides.length);
|
|
};
|
|
|
|
return (
|
|
<div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50 container md:max-w-none">
|
|
<div className="bg-white p-6 rounded-lg relative md:max-w-2xl mx-auto w-full h-50 md:h-5/6 flex flex-col justify-between md:justify-around">
|
|
<button className="absolute top-2 right-2" onClick={onClose}>
|
|
<X className="w-6 h-6 text-gray-700" />
|
|
</button>
|
|
<h2 className="md:text-xl text-md font-bold text-center mb-4">
|
|
{slides[currentSlide].title}
|
|
</h2>
|
|
<div className="relative">
|
|
<img
|
|
src={slides[currentSlide].image}
|
|
alt="Popup Slide Image"
|
|
className="w-full h-full md:h-96 object-contain mb-4"
|
|
/>
|
|
<button
|
|
onClick={prevSlide}
|
|
className="absolute left-2 top-1/2 transform -translate-y-1/2 p-2 bg-white bg-opacity-50 rounded-full"
|
|
>
|
|
<ArrowLeft className="w-6 h-6 text-gray-700" />
|
|
</button>
|
|
<button
|
|
onClick={nextSlide}
|
|
className="absolute right-2 top-1/2 transform -translate-y-1/2 p-2 bg-white bg-opacity-50 rounded-full"
|
|
>
|
|
<ArrowRight className="w-6 h-6 text-gray-700" />
|
|
</button>
|
|
</div>
|
|
{/* <h2 className="text-xl font-bold text-center mb-4">
|
|
{slides[currentSlide].title}
|
|
</h2> */}
|
|
<p className="text-sm text-gray-600 text-center mb-4 overflow-hidden text-ellipsis whitespace-nowrap">
|
|
{slides[currentSlide].description}
|
|
</p>
|
|
<div className="flex justify-center">
|
|
<Button className="bg-green-800 text-white px-6 py-2 rounded-lg">
|
|
Selengkapnya
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PopupModal;
|