|
import React from 'react' |
|
import Link from 'next/link' |
|
import '@/app/components/ApiModal.css' |
|
const ApiModal = ({open, setOpen, api}) => { |
|
return ( |
|
<div className="fade-in" style={{width: '100vw', height: '100vh', display: 'flex', justifyContent: 'center', alignItems: 'center', position: 'fixed', zIndex: '1000', top: '0', left: '0', backgroundColor: 'rgba(0, 0, 0, 0.8)', backdropFilter: 'blur(10px)'}}> |
|
<div className="row" style={{justifyContent: 'space-between', alignItems: 'center', display: 'flex', flexWrap: 'wrap', position: 'fixed', zIndex: '1000', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', backgroundColor: 'rgba(0, 10, 20, 0.8)', borderRadius: '10px', backdropFilter: 'blur(10px)', padding: '20px', width: '90%', maxHeight: '500px', overflowY: 'auto', maxWidth: '700px'}}> |
|
<div className="modal-body"> |
|
<div className="close gradient-text" style={{cursor: 'pointer', position: 'absolute', right: '10px', top: '10px', backgroundImage: 'linear-gradient(to right, #ff0000, #ffaaaa)'}} onClick={()=>setOpen(false)}>Close</div> |
|
<h3>URL: </h3><p>{api.url}</p> |
|
<h3>Description: </h3><p>{api.description}</p> |
|
<h3>Query: </h3><p>{api.query}</p> |
|
<h3>Response: </h3><p>{api.response}</p> |
|
<h3>Method: </h3><p>{api.method || 'GET'}</p> |
|
<h3>Test URL: </h3><Link href={api.testURL|| '#'}>Try it</Link> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
) |
|
} |
|
|
|
export default ApiModal |