85 lines
2.5 KiB
JavaScript
85 lines
2.5 KiB
JavaScript
import React, { useEffect, useRef, useState } from 'react';
|
|
import { X } from 'lucide-react';
|
|
|
|
const MobileAdBanner = () => {
|
|
const [visible, setVisible] = useState(true);
|
|
const [closed, setClosed] = useState(false);
|
|
const iframeRef = useRef(null);
|
|
|
|
useEffect(() => {
|
|
const wasClosed = sessionStorage.getItem('mobileAdClosed');
|
|
if (wasClosed === 'true') {
|
|
setClosed(true);
|
|
setVisible(false);
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!visible || closed || !iframeRef.current) return;
|
|
|
|
const timer = setTimeout(() => {
|
|
if (!iframeRef.current) return;
|
|
|
|
const iframe = iframeRef.current;
|
|
const doc = iframe.contentDocument || iframe.contentWindow.document;
|
|
|
|
doc.open();
|
|
doc.write(`
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
body { margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<script type="text/javascript">
|
|
atOptions = {
|
|
'key' : '2965bcf877388cafa84160592c550f5a',
|
|
'format' : 'iframe',
|
|
'height' : 50,
|
|
'width' : 320,
|
|
'params' : {}
|
|
};
|
|
</script>
|
|
<script type="text/javascript" src="https://bustleplaguereed.com/2965bcf877388cafa84160592c550f5a/invoke.js"></script>
|
|
</body>
|
|
</html>
|
|
`);
|
|
doc.close();
|
|
}, 500);
|
|
|
|
return () => clearTimeout(timer);
|
|
}, [visible, closed]);
|
|
|
|
const handleClose = () => {
|
|
setVisible(false);
|
|
setClosed(true);
|
|
sessionStorage.setItem('mobileAdClosed', 'true');
|
|
};
|
|
|
|
if (!visible || closed) return null;
|
|
|
|
return (
|
|
<div className="xl:hidden fixed bottom-0 left-0 right-0 z-50 bg-white dark:bg-gray-900 shadow-lg border-t border-gray-200 dark:border-gray-700">
|
|
<button
|
|
onClick={handleClose}
|
|
className="absolute -top-2 right-2 p-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 bg-white dark:bg-gray-800 rounded-full shadow-sm z-10"
|
|
aria-label="Close ad"
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</button>
|
|
<div className="flex justify-center items-center py-2">
|
|
<iframe
|
|
ref={iframeRef}
|
|
style={{ width: '320px', height: '50px', border: 'none' }}
|
|
title="Mobile Advertisement"
|
|
sandbox="allow-scripts allow-same-origin"
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MobileAdBanner;
|