80 lines
3.6 KiB
TypeScript
80 lines
3.6 KiB
TypeScript
"use client";
|
|
|
|
import React from 'react';
|
|
import { useStore } from '@/lib/store';
|
|
import { AlertTriangle, Settings, X, Cookie, ExternalLink } from 'lucide-react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
export function CookieExpiredDialog() {
|
|
const {
|
|
showCookieExpired,
|
|
setShowCookieExpired,
|
|
setCurrentView,
|
|
settings
|
|
} = useStore();
|
|
|
|
if (!showCookieExpired) return null;
|
|
|
|
const providerName = settings.provider === 'meta' ? 'Meta AI' :
|
|
settings.provider === 'grok' ? 'Grok' :
|
|
'Google Whisk';
|
|
|
|
const providerUrl = settings.provider === 'meta' ? 'https://www.meta.ai' :
|
|
settings.provider === 'grok' ? 'https://grok.com' :
|
|
'https://labs.google/fx/tools/whisk/project';
|
|
|
|
const handleFixIssues = () => {
|
|
setShowCookieExpired(false);
|
|
setCurrentView('settings');
|
|
};
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-in fade-in duration-200">
|
|
<div className="relative w-full max-w-md bg-[#18181B] border border-white/10 rounded-2xl shadow-2xl animate-in zoom-in-95 duration-200 overflow-hidden">
|
|
|
|
{/* Decorative header background */}
|
|
<div className="absolute top-0 left-0 right-0 h-32 bg-gradient-to-br from-amber-500/10 to-red-500/10 pointer-events-none" />
|
|
|
|
<div className="relative p-6 px-8 flex flex-col items-center text-center">
|
|
<button
|
|
onClick={() => setShowCookieExpired(false)}
|
|
className="absolute top-4 right-4 p-2 text-white/40 hover:text-white rounded-full hover:bg-white/5 transition-colors"
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</button>
|
|
|
|
<div className="h-16 w-16 mb-6 rounded-full bg-amber-500/10 flex items-center justify-center ring-1 ring-amber-500/20 shadow-lg shadow-amber-900/20">
|
|
<Cookie className="h-8 w-8 text-amber-500" />
|
|
</div>
|
|
|
|
<h2 className="text-xl font-bold text-white mb-2">Cookies Expired</h2>
|
|
|
|
<p className="text-muted-foreground text-sm mb-6 leading-relaxed">
|
|
Your <span className="text-white font-medium">{providerName}</span> session has timed out.
|
|
To continue generating images, please refresh your cookies.
|
|
</p>
|
|
|
|
<div className="w-full space-y-3">
|
|
<button
|
|
onClick={handleFixIssues}
|
|
className="w-full py-3 px-4 bg-primary text-primary-foreground font-semibold rounded-xl hover:bg-primary/90 transition-all flex items-center justify-center gap-2 shadow-lg shadow-primary/20"
|
|
>
|
|
<Settings className="h-4 w-4" />
|
|
Update Settings
|
|
</button>
|
|
|
|
<a
|
|
href={providerUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="w-full py-3 px-4 bg-white/5 hover:bg-white/10 text-white font-medium rounded-xl transition-all flex items-center justify-center gap-2 border border-white/5"
|
|
>
|
|
<ExternalLink className="h-4 w-4" />
|
|
Open {providerName}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|