66 lines
2.6 KiB
TypeScript
66 lines
2.6 KiB
TypeScript
import { Heart, MessageCircle, X } from 'lucide-react';
|
|
import type { Pet } from '@/data/pets';
|
|
|
|
interface MatchModalProps {
|
|
pet: Pet;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export function MatchModal({ pet, onClose }: MatchModalProps) {
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4 backdrop-blur-sm">
|
|
<div className="animate-match-pop relative max-w-sm rounded-3xl bg-gradient-to-br from-primary via-primary to-secondary p-1 shadow-2xl">
|
|
<div className="rounded-3xl bg-card p-8 text-center">
|
|
{/* Close button */}
|
|
<button
|
|
onClick={onClose}
|
|
className="absolute right-4 top-4 rounded-full p-2 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
|
|
>
|
|
<X className="h-5 w-5" />
|
|
</button>
|
|
|
|
{/* Hearts animation */}
|
|
<div className="mb-4 flex justify-center">
|
|
<div className="animate-float relative">
|
|
<Heart className="h-16 w-16 fill-primary text-primary" />
|
|
<Heart className="absolute -right-4 -top-2 h-8 w-8 fill-secondary text-secondary opacity-70" />
|
|
<Heart className="absolute -left-3 top-4 h-6 w-6 fill-accent text-accent opacity-60" />
|
|
</div>
|
|
</div>
|
|
|
|
<h2 className="font-display text-3xl font-bold text-primary">It's a Match!</h2>
|
|
<p className="mt-2 font-body text-muted-foreground">
|
|
You and <span className="font-semibold text-foreground">{pet.name}</span> liked each other!
|
|
</p>
|
|
|
|
{/* Pet image */}
|
|
<div className="mx-auto mt-6 h-32 w-32 overflow-hidden rounded-full border-4 border-primary shadow-lg">
|
|
<img
|
|
src={pet.image}
|
|
alt={pet.name}
|
|
className="h-full w-full object-cover"
|
|
/>
|
|
</div>
|
|
|
|
{/* Actions */}
|
|
<div className="mt-8 flex flex-col gap-3">
|
|
<button
|
|
onClick={onClose}
|
|
className="flex items-center justify-center gap-2 rounded-full bg-primary px-6 py-3 font-display font-semibold text-primary-foreground shadow-lg transition-all hover:scale-105 hover:shadow-xl"
|
|
>
|
|
<MessageCircle className="h-5 w-5" />
|
|
Send a Woof!
|
|
</button>
|
|
<button
|
|
onClick={onClose}
|
|
className="rounded-full px-6 py-3 font-body font-medium text-muted-foreground transition-colors hover:text-foreground"
|
|
>
|
|
Keep Swiping
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|