81 lines
2.3 KiB
TypeScript
81 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { IoClose } from "react-icons/io5";
|
|
|
|
export default function ConstructionPopup() {
|
|
const [isVisible, setIsVisible] = useState(false);
|
|
const [shouldRender, setShouldRender] = useState(false);
|
|
|
|
useEffect(() => {
|
|
// Check if the popup has already been shown in this session
|
|
const hasBeenShown = sessionStorage.getItem("construction_popup_shown");
|
|
|
|
if (!hasBeenShown) {
|
|
const timer = setTimeout(() => {
|
|
setShouldRender(true);
|
|
setIsVisible(true);
|
|
}, 3000);
|
|
|
|
return () => clearTimeout(timer);
|
|
}
|
|
}, []);
|
|
|
|
const closePopup = () => {
|
|
setIsVisible(false);
|
|
// Add a delay to remove from DOM after fade out animation if needed
|
|
// For now, we'll just hide it and set session storage
|
|
sessionStorage.setItem("construction_popup_shown", "true");
|
|
setTimeout(() => setShouldRender(false), 400); // match animation duration
|
|
};
|
|
|
|
if (!shouldRender) return null;
|
|
|
|
return (
|
|
<div className={`construction-overlay ${!isVisible ? 'fade-out' : ''}`}>
|
|
<div className="construction-modal">
|
|
<button
|
|
className="construction-close"
|
|
onClick={closePopup}
|
|
aria-label="Close"
|
|
>
|
|
<IoClose />
|
|
</button>
|
|
|
|
<div className="construction-content">
|
|
<span className="construction-icon">🚧</span>
|
|
<h2 className="construction-title">Website Under Construction</h2>
|
|
|
|
<p className="construction-text">
|
|
We are currently updating our fencing product catalog to serve you better.
|
|
</p>
|
|
|
|
<div className="construction-prices">
|
|
Prices may vary depending on materials, design, and quantity.
|
|
</div>
|
|
|
|
<p className="construction-contact">
|
|
👉 For the latest pricing and customized quotes, please contact us.
|
|
</p>
|
|
|
|
<button className="construction-btn" onClick={closePopup}>
|
|
Got it
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<style jsx>{`
|
|
.fade-out {
|
|
opacity: 0;
|
|
transition: opacity 0.4s ease-out;
|
|
pointer-events: none;
|
|
}
|
|
.fade-out .construction-modal {
|
|
transform: scale(0.95);
|
|
transition: transform 0.4s ease-out;
|
|
}
|
|
`}</style>
|
|
</div>
|
|
);
|
|
}
|