Moving modal outside of content
All checks were successful
Music Collection CI Workflow / test (./backend) (push) Successful in 21s
Music Collection CI Workflow / test (./frontend) (push) Successful in 19s
Music Collection CI Workflow / build-and-push-images (./backend/Dockerfile, git.anatid.net/tabris/msuic-collection-backend, ./backend) (push) Successful in 48s
Music Collection CI Workflow / build-and-push-images (./frontend/Dockerfile, git.anatid.net/tabris/music-collection-frontend, ./frontend) (push) Successful in 1m14s
Music Collection CI Workflow / deploy (push) Successful in 23s

This commit is contained in:
Phill Pover 2025-04-06 17:15:11 +01:00
parent 3249d2f619
commit 8ad6814b86

View File

@ -40,6 +40,7 @@ export default function Page() {
if (!albums) return <div>Loading...</div> if (!albums) return <div>Loading...</div>
return ( return (
<>
<div className="container"> <div className="container">
<Button variant="primary" onClick={handleShow}> <Button variant="primary" onClick={handleShow}>
Add Album Add Album
@ -74,49 +75,52 @@ export default function Page() {
))} ))}
</tbody> </tbody>
</table> </table>
<Modal
show={show}
onHide={handleClose}
backdrop="static"
keyboard={false}
>
<Modal.Header closeButton>
<Modal.Title>Create Album</Modal.Title>
</Modal.Header>
<Modal.Body>
<div className="container">
<form onSubmit={onSubmit}>
<div className="row">
<div className="six columns">
<label htmlFor="album-title">Album Title</label><input type="text" name="title" id="album-title" />
</div>
<div className="six columns">
<label htmlFor="album-artist">Artist</label><input type="text" name="artist" id="album-artist" />
</div>
</div>
<div className="row">
<div className="six columns">
<label htmlFor="album-genre">Genre</label><input type="text" name="genre" id="album-genre" />
</div>
</div>
<div className="row">
<div className="six columns">
<button type="submit">Create</button>
</div>
</div>
</form>
<Link href={pathname}>
<button type="button" className="bg-red-500 text-white p-2">Close Modal</button>
</Link>
</div>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
<Button variant="primary">Create</Button>
</Modal.Footer>
</Modal>
</div> </div>
<Modal
show={show}
onHide={handleClose}
backdrop="static"
keyboard={false}
>
<Modal.Header closeButton>
<Modal.Title>Create Album</Modal.Title>
</Modal.Header>
<Modal.Body>
<div>
<form onSubmit={onSubmit}>
<div className="row">
<div className="six columns">
<label htmlFor="album-title">Album Title</label><input type="text" name="title" id="album-title" />
</div>
<div className="six columns">
<label htmlFor="album-artist">Artist</label><input type="text" name="artist" id="album-artist" />
</div>
</div>
<div className="row">
<div className="six columns">
<label htmlFor="album-genre">Genre</label><input type="text" name="genre" id="album-genre" />
</div>
</div>
<div className="row">
<div className="six columns">
<button type="submit">Create</button>
</div>
</div>
</form>
<Link href={pathname}>
<button type="button" className="bg-red-500 text-white p-2">Close Modal</button>
</Link>
</div>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
<Button variant="primary">Create</Button>
</Modal.Footer>
</Modal>
</>
); );
} }