83 lines
3.9 KiB
TypeScript
83 lines
3.9 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' : 'Google Whisk';
|
|
|
|
const providerUrl = settings.provider === 'meta' ? 'https://www.meta.ai' :
|
|
'https://labs.google/fx/tools/whisk/project';
|
|
|
|
const handleFixIssues = () => {
|
|
setShowCookieExpired(false);
|
|
setCurrentView('settings');
|
|
};
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-[200] flex items-center justify-center p-4 bg-black/80 backdrop-blur-md animate-in fade-in duration-300">
|
|
<div className="relative w-full max-w-[400px] bg-[#121214] border border-white/5 rounded-[2.5rem] shadow-[0_0_50px_-12px_rgba(0,0,0,0.5)] animate-in zoom-in-95 duration-300 overflow-hidden">
|
|
|
|
{/* Top Glow/Gradient */}
|
|
<div className="absolute top-0 left-0 right-0 h-48 bg-gradient-to-b from-amber-500/20 via-transparent to-transparent pointer-events-none" />
|
|
|
|
<div className="relative p-8 flex flex-col items-center text-center">
|
|
{/* Close Button */}
|
|
<button
|
|
onClick={() => setShowCookieExpired(false)}
|
|
className="absolute top-6 right-6 p-2 text-white/20 hover:text-white transition-colors"
|
|
>
|
|
<X className="h-5 w-5" />
|
|
</button>
|
|
|
|
{/* Cookie Icon Container */}
|
|
<div className="relative mt-4 mb-8">
|
|
{/* Glow effect */}
|
|
<div className="absolute inset-0 bg-amber-500/20 blur-2xl rounded-full" />
|
|
<div className="relative h-20 w-20 rounded-full bg-[#1A1A1D] border-2 border-amber-500/30 flex items-center justify-center shadow-[inset_0_0_20px_rgba(245,158,11,0.1)]">
|
|
<Cookie className="h-10 w-10 text-amber-500" />
|
|
</div>
|
|
</div>
|
|
|
|
<h2 className="text-2xl font-black text-white mb-4 tracking-tight">Cookies Expired</h2>
|
|
|
|
<p className="text-[#A1A1AA] text-[15px] mb-8 leading-relaxed max-w-[280px]">
|
|
Your <span className="text-white font-bold">{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-4 px-6 bg-[#7C3AED] hover:bg-[#6D28D9] text-white font-bold rounded-2xl transition-all flex items-center justify-center gap-3 shadow-[0_10px_20px_-10px_rgba(124,58,237,0.5)] active:scale-[0.98]"
|
|
>
|
|
<Settings className="h-5 w-5" />
|
|
Update Settings
|
|
</button>
|
|
|
|
<a
|
|
href={providerUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="w-full py-4 px-6 bg-[#27272A] hover:bg-[#3F3F46] text-white font-bold rounded-2xl transition-all flex items-center justify-center gap-3 border border-white/5 active:scale-[0.98]"
|
|
>
|
|
<ExternalLink className="h-5 w-5" />
|
|
Open {providerName}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|