56 lines
2.3 KiB
TypeScript
56 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import { Link } from "@/i18n/navigation";
|
|
import { mediaUrl } from "@/app/lib/media";
|
|
import type { DatingProfile } from "../types";
|
|
|
|
interface MatchModalProps {
|
|
profile: DatingProfile | null;
|
|
conversationId?: string;
|
|
onClose: () => void;
|
|
t: (key: string) => string;
|
|
}
|
|
|
|
export default function MatchModal({ profile, conversationId, onClose, t }: MatchModalProps) {
|
|
if (!profile) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-sm">
|
|
<div className="w-full max-w-sm overflow-hidden rounded-3xl bg-white shadow-2xl dark:bg-gray-900">
|
|
<div className="bg-gradient-to-br from-[#ff4d4f] via-pink-500 to-rose-400 px-6 py-8 text-center text-white">
|
|
<p className="text-sm font-semibold uppercase tracking-widest opacity-90">{t("matchCelebration")}</p>
|
|
<h2 className="mt-2 text-3xl font-black">{t("itsAMatch")}</h2>
|
|
<p className="mt-2 text-sm text-white/90">{t("matchHint")}</p>
|
|
</div>
|
|
<div className="-mt-10 flex justify-center">
|
|
<img
|
|
src={mediaUrl(profile.photo)}
|
|
alt={profile.name}
|
|
className="h-24 w-24 rounded-full border-4 border-white object-cover shadow-lg dark:border-gray-900"
|
|
/>
|
|
</div>
|
|
<div className="px-6 pb-6 pt-4 text-center">
|
|
<h3 className="text-xl font-bold text-gray-900 dark:text-gray-100">{profile.name}</h3>
|
|
<p className="mt-1 text-sm text-gray-500 dark:text-gray-400">📍 {profile.location}</p>
|
|
<div className="mt-6 flex flex-col gap-3">
|
|
<Link
|
|
href={conversationId ? `/chat/${conversationId}` : "/chat"}
|
|
onClick={onClose}
|
|
className="inline-flex items-center justify-center rounded-full bg-[#ff4d4f] px-4 py-3 text-sm font-semibold text-white transition hover:bg-red-600"
|
|
>
|
|
{t("sendMessage")}
|
|
</Link>
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="rounded-full border border-gray-200 px-4 py-3 text-sm font-semibold text-gray-700 transition hover:bg-gray-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800"
|
|
>
|
|
{t("keepSwiping")}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|