Jakob Wennberg
82 lines
2.6 KiB
TypeScript
82 lines
2.6 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useState } from 'react'
|
|
import { Check } from 'lucide-react'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
interface SuccessAnimationProps {
|
|
show: boolean
|
|
title?: string
|
|
description?: string
|
|
onComplete?: () => void
|
|
variant?: 'default' | 'celebration'
|
|
}
|
|
|
|
export function SuccessAnimation({
|
|
show,
|
|
title = 'Klart!',
|
|
description,
|
|
onComplete,
|
|
variant = 'default',
|
|
}: SuccessAnimationProps) {
|
|
const [visible, setVisible] = useState(false)
|
|
|
|
useEffect(() => {
|
|
if (show) {
|
|
setVisible(true)
|
|
const timer = setTimeout(() => {
|
|
setVisible(false)
|
|
onComplete?.()
|
|
}, 2000)
|
|
return () => clearTimeout(timer)
|
|
}
|
|
}, [show, onComplete])
|
|
|
|
if (!visible) return null
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-[100] flex items-center justify-center bg-background/80 backdrop-blur-sm animate-fade-in">
|
|
<div className="flex flex-col items-center gap-4 animate-scale-in">
|
|
{/* Animated checkmark */}
|
|
<div className="relative">
|
|
<div className={cn(
|
|
"w-20 h-20 rounded-full flex items-center justify-center",
|
|
"bg-success/10 ring-4 ring-success/20"
|
|
)}>
|
|
<Check className="h-10 w-10 text-success animate-scale-in" style={{ animationDelay: '200ms' }} />
|
|
</div>
|
|
{/* Pulse ring */}
|
|
<div className="absolute inset-0 rounded-full bg-success/10 animate-ping" style={{ animationDuration: '1s', animationIterationCount: '1' }} />
|
|
</div>
|
|
|
|
{/* Text */}
|
|
<div className="text-center animate-slide-up" style={{ animationDelay: '300ms' }}>
|
|
<p className="text-lg font-display font-medium">{title}</p>
|
|
{description && (
|
|
<p className="text-sm text-muted-foreground mt-1">{description}</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Celebration particles */}
|
|
{variant === 'celebration' && (
|
|
<div className="absolute inset-0 pointer-events-none overflow-hidden">
|
|
{Array.from({ length: 12 }).map((_, i) => (
|
|
<div
|
|
key={i}
|
|
className="absolute w-2 h-2 rounded-full"
|
|
style={{
|
|
left: `${50 + Math.cos((i * 30 * Math.PI) / 180) * 40}%`,
|
|
top: `${50 + Math.sin((i * 30 * Math.PI) / 180) * 40}%`,
|
|
backgroundColor: ['hsl(145, 20%, 36%)', 'hsl(18, 45%, 55%)', 'hsl(38, 70%, 55%)', 'hsl(150, 30%, 40%)'][i % 4],
|
|
animation: `fadeIn 0.3s ${i * 50}ms both`,
|
|
opacity: 0.8,
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|