33 lines
1.4 KiB
TypeScript
33 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { PenTool, Sparkles } from "lucide-react";
|
|
|
|
export function ThinkingOverlay() {
|
|
return (
|
|
<div className="absolute inset-0 z-50 flex flex-col items-center justify-center bg-background/60 backdrop-blur-md transition-all duration-500 animate-in fade-in">
|
|
<div className="relative">
|
|
{/* Pulsing Background Circle */}
|
|
<div className="absolute inset-0 bg-indigo-500/20 rounded-full animate-ping [animation-duration:3s]" />
|
|
|
|
{/* Icon Container */}
|
|
<div className="relative bg-card border border-border p-6 rounded-full shadow-lg flex items-center justify-center">
|
|
<PenTool className="w-10 h-10 text-indigo-500 animate-bounce [animation-duration:2s]" />
|
|
</div>
|
|
|
|
{/* Sparkles Decoration */}
|
|
<Sparkles className="absolute -top-2 -right-2 w-6 h-6 text-amber-400 animate-pulse" />
|
|
<Sparkles className="absolute -bottom-1 -left-2 w-4 h-4 text-blue-400 animate-pulse [animation-delay:0.5s]" />
|
|
</div>
|
|
|
|
<div className="mt-8 space-y-2 text-center">
|
|
<h3 className="text-xl font-serif font-medium text-foreground">
|
|
Crafting your draft
|
|
</h3>
|
|
<p className="text-sm text-muted-foreground animate-pulse">
|
|
Synthesizing insights...
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|