34 lines
1.3 KiB
TypeScript
34 lines
1.3 KiB
TypeScript
// Modal.js
|
||
|
||
import React from 'react';
|
||
|
||
const Modal = ({ isOpen, onClose, item }) => {
|
||
if (!isOpen) return null;
|
||
|
||
return (
|
||
<div className="fixed inset-0 z-50 flex items-center justify-center overflow-x-hidden overflow-y-auto outline-none focus:outline-none">
|
||
<div className="relative w-auto max-w-3xl mx-auto my-6">
|
||
{/* Modal content */}
|
||
<div className="relative flex flex-col bg-white border-0 rounded-lg shadow-lg outline-none focus:outline-none">
|
||
{/* Header */}
|
||
<div className="flex items-start justify-between p-5 border-b border-solid rounded-t border-blueGray-200">
|
||
<h3 className="text-3xl font-semibold">{item.username}s Details</h3>
|
||
<button
|
||
className="p-1 ml-auto bg-transparent border-0 text-black float-right text-3xl leading-none font-semibold outline-none focus:outline-none"
|
||
onClick={onClose}
|
||
>
|
||
<span className="bg-transparent text-black h-6 w-6 text-2xl block outline-none focus:outline-none">×</span>
|
||
</button>
|
||
</div>
|
||
{/* Body */}
|
||
<div className="relative p-6 flex-auto">
|
||
<p className="my-4 text-blueGray-500 text-lg leading-relaxed">{item.username} has {item.points} points.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Modal;
|