98 lines
4.1 KiB
TypeScript
98 lines
4.1 KiB
TypeScript
'use client';
|
||
|
||
import {motion, AnimatePresence} from 'framer-motion';
|
||
import {useEffect} from 'react';
|
||
|
||
export default function LawyerModal({
|
||
lawyer,
|
||
onClose,
|
||
}: Readonly<{
|
||
lawyer: any;
|
||
onClose: () => void;
|
||
}>) {
|
||
// Close with Escape
|
||
useEffect(() => {
|
||
const handleKeyDown = (e: KeyboardEvent) => {
|
||
if (e.key === 'Escape') onClose();
|
||
};
|
||
document.addEventListener('keydown', handleKeyDown);
|
||
return () => document.removeEventListener('keydown', handleKeyDown);
|
||
}, [onClose]);
|
||
|
||
return (
|
||
<AnimatePresence>
|
||
<motion.div
|
||
initial={{opacity: 0}}
|
||
animate={{opacity: 1}}
|
||
exit={{opacity: 0}}
|
||
className="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex justify-center items-center p-4 overflow-y-auto"
|
||
onClick={onClose}
|
||
>
|
||
<motion.div
|
||
initial={{y: 40, opacity: 0}}
|
||
animate={{y: 0, opacity: 1}}
|
||
exit={{y: 30, opacity: 0}}
|
||
transition={{duration: 0.3, ease: 'easeOut'}}
|
||
onClick={(e) => e.stopPropagation()}
|
||
className="bg-white rounded-xl max-w-3xl w-full p-8 relative text-gray-800 shadow-xl"
|
||
>
|
||
<button
|
||
onClick={onClose}
|
||
className="absolute top-4 right-4 text-gray-500 hover:text-gray-700 text-2xl font-bold"
|
||
>
|
||
×
|
||
</button>
|
||
|
||
<div className="flex flex-col md:flex-row gap-6">
|
||
{lawyer.image && (
|
||
<img
|
||
src={lawyer.image}
|
||
alt={lawyer.name}
|
||
className="w-full md:w-1/3 h-auto object-cover rounded-md"
|
||
/>
|
||
)}
|
||
|
||
<div className="flex-1 space-y-4">
|
||
<div>
|
||
<h2 className="text-2xl font-bold text-red-700">{lawyer.name}</h2>
|
||
<p className="text-sm text-gray-500">{lawyer.short}</p>
|
||
</div>
|
||
|
||
{lawyer.specialties?.length > 0 && (
|
||
<div>
|
||
<h3 className="font-semibold text-gray-800">Fachgebiete</h3>
|
||
<ul className="list-disc pl-5 text-sm text-gray-700">
|
||
{lawyer.specialties.map((s: string, i: number) => (
|
||
<li key={i}>{s}</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
)}
|
||
|
||
{lawyer.biography && (
|
||
<div>
|
||
<h3 className="font-semibold text-gray-800">Über</h3>
|
||
<p className="text-sm leading-relaxed text-gray-700 whitespace-pre-line">
|
||
{lawyer.biography}
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
{lawyer.personal?.length > 0 && (
|
||
<div>
|
||
<h3 className="font-semibold text-gray-800">Zur Person</h3>
|
||
<ul className="list-disc pl-5 text-sm text-gray-700">
|
||
{lawyer.personal.map((p: string, i: number) => (
|
||
<li key={i}>{p}</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
</motion.div>
|
||
</AnimatePresence>
|
||
);
|
||
}
|