55 lines
1.9 KiB
TypeScript
55 lines
1.9 KiB
TypeScript
// components/UserDetailModal.tsx
|
||
|
||
import React from 'react';
|
||
import { motion } from 'framer-motion';
|
||
|
||
interface UserDetailModalProps {
|
||
isOpen: boolean;
|
||
onClose: () => void;
|
||
user: any;
|
||
}
|
||
|
||
const UserDetailModal: React.FC<UserDetailModalProps> = ({ isOpen, onClose, user }) => {
|
||
if (!isOpen) return null;
|
||
|
||
return (
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
exit={{ opacity: 0 }}
|
||
className="fixed inset-0 z-50 flex items-center justify-center overflow-x-hidden overflow-y-auto outline-none focus:outline-none modal-bg"
|
||
onClick={onClose}
|
||
>
|
||
<div className="relative w-auto max-w-3xl mx-auto my-6 modal">
|
||
<div className="relative flex flex-col border-0 rounded-lg shadow-lg outline-none focus:outline-none">
|
||
<div className="flex items-start justify-between p-5 border-b border-solid rounded-t border-blueGray-200">
|
||
<div className="flex items-center">
|
||
<img
|
||
src={user["img_url"]} // Assuming img_url is a valid image URL
|
||
alt={`${user.username}'s profile`}
|
||
className="w-12 h-12 rounded-full mr-4"
|
||
/>
|
||
<h3 className="text-3xl font-semibold">{user.username}</h3>
|
||
</div>
|
||
<button
|
||
className="p-1 ml-auto bg-transparent border-0 text-black opacity-5 float-right text-3xl leading-none font-semibold outline-none focus:outline-none"
|
||
onClick={onClose}
|
||
>
|
||
<span className="bg-transparent text-black opacity-5 h-6 w-6 text-2xl block outline-none focus:outline-none">×</span>
|
||
</button>
|
||
</div>
|
||
<div className="relative p-6 flex-auto">
|
||
<div>
|
||
<p>Email: {user.email}</p>
|
||
<p>Points: {user.points}</p>
|
||
{/* Add more details as needed */}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
);
|
||
};
|
||
|
||
export default UserDetailModal;
|