69 lines
2.2 KiB
TypeScript
69 lines
2.2 KiB
TypeScript
"use client";
|
|
import React, { useState, useEffect } from 'react';
|
|
import { useNetworkStatus } from '../lib/hooks/useNetworkStatus';
|
|
import { WifiOff, Wifi, X } from 'lucide-react';
|
|
import { motion, AnimatePresence } from 'motion/react';
|
|
|
|
export const NetworkBanner = () => {
|
|
const isOnline = useNetworkStatus();
|
|
const [showStatus, setShowStatus] = useState(false);
|
|
const [wasOffline, setWasOffline] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (!isOnline) {
|
|
setShowStatus(true);
|
|
setWasOffline(true);
|
|
} else if (wasOffline) {
|
|
// Show "Back Online" message briefly
|
|
setShowStatus(true);
|
|
const timer = setTimeout(() => {
|
|
setShowStatus(false);
|
|
setWasOffline(false);
|
|
}, 3000);
|
|
return () => clearTimeout(timer);
|
|
}
|
|
}, [isOnline, wasOffline]);
|
|
|
|
return (
|
|
<AnimatePresence>
|
|
{showStatus && (
|
|
<motion.div
|
|
initial={{ y: -100 }}
|
|
animate={{ y: 0 }}
|
|
exit={{ y: -100 }}
|
|
className={`fixed top-0 left-0 right-0 z-[100] text-white py-3 px-4 flex items-center justify-between shadow-2xl backdrop-blur-md ${
|
|
isOnline ? 'bg-emerald-500/90' : 'bg-rose-500/90'
|
|
}`}
|
|
dir="rtl"
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
{isOnline ? (
|
|
<div className="bg-white/20 p-2 rounded-xl">
|
|
<Wifi className="w-5 h-5 animate-pulse" />
|
|
</div>
|
|
) : (
|
|
<div className="bg-white/20 p-2 rounded-xl">
|
|
<WifiOff className="w-5 h-5 animate-bounce" />
|
|
</div>
|
|
)}
|
|
<div>
|
|
<p className="font-black text-sm">
|
|
{isOnline
|
|
? 'اتصال اینترنت مجدداً برقرار شد.'
|
|
: 'اتصال اینترنت شما قطع شده است. در حال تلاش برای اتصال مجدد...'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
onClick={() => setShowStatus(false)}
|
|
className="hover:bg-white/10 p-2 rounded-full transition-colors"
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</button>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
);
|
|
};
|