112 lines
4.0 KiB
TypeScript
112 lines
4.0 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect } from 'react'
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
|
import { Button } from '@/components/ui/button'
|
|
import { WifiOff, RefreshCw, Home, ShoppingCart } from 'lucide-react'
|
|
import { motion } from 'framer-motion'
|
|
import Link from 'next/link'
|
|
|
|
export default function OfflinePage() {
|
|
const [isOnline, setIsOnline] = useState(false)
|
|
|
|
useEffect(() => {
|
|
setIsOnline(navigator.onLine)
|
|
|
|
const handleOnline = () => setIsOnline(true)
|
|
const handleOffline = () => setIsOnline(false)
|
|
|
|
window.addEventListener('online', handleOnline)
|
|
window.addEventListener('offline', handleOffline)
|
|
|
|
return () => {
|
|
window.removeEventListener('online', handleOnline)
|
|
window.removeEventListener('offline', handleOffline)
|
|
}
|
|
}, [])
|
|
|
|
const handleRefresh = () => {
|
|
window.location.reload()
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 flex items-center justify-center p-4">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5 }}
|
|
className="max-w-md w-full"
|
|
>
|
|
<Card className="shadow-xl">
|
|
<CardHeader className="text-center">
|
|
<motion.div
|
|
animate={{ rotate: isOnline ? 0 : 360 }}
|
|
transition={{ duration: 2, repeat: isOnline ? 0 : Infinity }}
|
|
className="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4"
|
|
>
|
|
<WifiOff className="h-10 w-10 text-gray-500" />
|
|
</motion.div>
|
|
<CardTitle className="text-2xl font-bold text-gray-900">
|
|
{isOnline ? 'Back Online!' : 'You\'re Offline'}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6 text-center">
|
|
<p className="text-gray-600">
|
|
{isOnline
|
|
? 'Your internet connection has been restored. Click refresh to continue.'
|
|
: 'It looks like you\'re not connected to the internet. Some features may not be available.'
|
|
}
|
|
</p>
|
|
|
|
{!isOnline && (
|
|
<div className="bg-emerald-50 border border-emerald-200 rounded-lg p-4">
|
|
<h3 className="font-semibold text-emerald-900 mb-2">Available Offline:</h3>
|
|
<ul className="text-sm text-emerald-700 space-y-1">
|
|
<li>• View cached rice products</li>
|
|
<li>• Browse your business dashboard</li>
|
|
<li>• Access earnings history</li>
|
|
<li>• Review partnership information</li>
|
|
<li>• Check your sales performance</li>
|
|
</ul>
|
|
</div>
|
|
)}
|
|
|
|
<div className="space-y-3">
|
|
<Button
|
|
onClick={handleRefresh}
|
|
className="w-full"
|
|
variant={isOnline ? 'default' : 'outline'}
|
|
>
|
|
<RefreshCw className="h-4 w-4 mr-2" />
|
|
{isOnline ? 'Refresh Page' : 'Try Again'}
|
|
</Button>
|
|
|
|
<div className="flex space-x-2">
|
|
<Button variant="outline" className="flex-1" asChild>
|
|
<Link href="/">
|
|
<Home className="h-4 w-4 mr-2" />
|
|
Home
|
|
</Link>
|
|
</Button>
|
|
<Button variant="outline" className="flex-1" asChild>
|
|
<Link href="/products">
|
|
<ShoppingCart className="h-4 w-4 mr-2" />
|
|
Products
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<p className="text-xs text-gray-500">
|
|
{isOnline
|
|
? 'Connection restored automatically.'
|
|
: 'We\'ll automatically reconnect when your internet is back.'
|
|
}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
</div>
|
|
)
|
|
}
|