74 lines
2.9 KiB
TypeScript
74 lines
2.9 KiB
TypeScript
// PopupModal.js
|
|
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.",
|
|
},
|
|
{
|
|
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">
|
|
<div className="bg-white p-6 rounded-lg max-w-lg w-full relative">
|
|
<button className="absolute top-2 right-2" onClick={onClose}>
|
|
<X className="w-6 h-6 text-gray-700" />
|
|
</button>
|
|
<h2 className="text-xl font-bold text-center mb-4">
|
|
{slides[currentSlide].title}
|
|
</h2>
|
|
<img
|
|
src={slides[currentSlide].image}
|
|
alt="Popup Slide Image"
|
|
className="w-full h-auto mb-4"
|
|
/>
|
|
<p className="text-sm text-gray-600 text-center mb-4">
|
|
{slides[currentSlide].description}
|
|
</p>
|
|
<div className="flex justify-between items-center mb-4">
|
|
<button onClick={prevSlide} className="p-2">
|
|
<ArrowLeft className="w-6 h-6 text-gray-700" />
|
|
</button>
|
|
<button onClick={nextSlide} className="p-2">
|
|
<ArrowRight className="w-6 h-6 text-gray-700" />
|
|
</button>
|
|
</div>
|
|
<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;
|