82 lines
2.8 KiB
TypeScript
82 lines
2.8 KiB
TypeScript
// Modal.js
|
||
|
||
import React, { useEffect,useState} from 'react';
|
||
import { motion } from 'framer-motion';
|
||
|
||
const Modal = ({ isOpen, onClose, item }) => {
|
||
|
||
const [details, setDetails] = useState(null);
|
||
|
||
useEffect(() => {
|
||
if (isOpen && item) {
|
||
const fetchDetails = async () => {
|
||
try {
|
||
const response = await fetch(`https://api.callfi.io/get_user_callouts.php?tag=${item.username}`);
|
||
if (!response.ok) {
|
||
throw new Error('Network response was not ok');
|
||
}
|
||
const data = await response.json();
|
||
setDetails(data);
|
||
} catch (error) {
|
||
console.error('Failed to fetch user details:', error);
|
||
}
|
||
};
|
||
|
||
fetchDetails();
|
||
}
|
||
}, [isOpen, item]);
|
||
|
||
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">
|
||
{/* Modal content */}
|
||
<div className="relative flex flex-col 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 Callouts</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-2xl font-bold leading-relaxed ${
|
||
parseFloat(item.points) > 0 ? 'text-green-500' : 'text-red-500'
|
||
}`}>Total Gains : {parseFloat(item.points).toFixed(2)} x</p>
|
||
</div>
|
||
<div className="relative p-6 flex-auto">
|
||
{details != null ? (
|
||
<div>
|
||
{details.map((detail) => (
|
||
<p
|
||
key={detail.token}
|
||
className={`my-4 text-lg leading-relaxed ${
|
||
parseFloat(detail.gains) > 0 ? 'text-green-500' : 'text-red-400'
|
||
}`}
|
||
>
|
||
{detail.token}: {parseFloat(detail.gains).toFixed(2)}x [
|
||
{parseFloat(detail.price_at_creation).toFixed(8) + ' => ' + parseFloat(detail.price_now).toFixed(8)}]
|
||
</p>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<p>Loading...</p>
|
||
)}
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
);
|
||
};
|
||
|
||
export default Modal;
|