56 lines
1.7 KiB
TypeScript
56 lines
1.7 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { motion } from 'framer-motion';
|
|
|
|
const CalloutModal = ({ isOpen, onClose, item, onSubmit }) => {
|
|
const [tokenId, setTokenId] = useState('');
|
|
|
|
const handleTokenChange = (e) => {
|
|
setTokenId(e.target.value);
|
|
};
|
|
|
|
const handleSubmit = () => {
|
|
onSubmit(tokenId);
|
|
onClose();
|
|
};
|
|
|
|
return isOpen ? (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 modal-bg"
|
|
>
|
|
<div className="bg-white p-4 rounded shadow-lg w-11/12 max-w-md modal">
|
|
|
|
<div className="flex items-start">
|
|
<h2 className="text-xl font-bold mb-2">Make a new call!</h2>
|
|
<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-white h-10 w-6 text-2xl block outline-none focus:outline-none">x</span>
|
|
</button>
|
|
|
|
</div>
|
|
|
|
<p className="text-lg mb-4">Type in a tokens short code, that you will think boom anytime soon</p>
|
|
<input
|
|
type="text"
|
|
value={tokenId}
|
|
onChange={handleTokenChange}
|
|
className="w-full p-2 mb-4 border rounded glassmorphism"
|
|
placeholder="Enter token short code"
|
|
/>
|
|
<button
|
|
onClick={handleSubmit}
|
|
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full glassmorphism"
|
|
>
|
|
Submit
|
|
</button>
|
|
</div>
|
|
</motion.div>
|
|
) : null;
|
|
};
|
|
|
|
export default CalloutModal;
|