You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
46 lines
1.8 KiB
46 lines
1.8 KiB
import { useState } from "react";
|
|
import { createPlaylist } from "../services/playlist.service.js";
|
|
|
|
export default function CreatePlaylistModal({ isOpen, onClose, addAlert }) {
|
|
|
|
const [name, setName] = useState('');
|
|
|
|
const onSubmit = async (e) => {
|
|
e.preventDefault();
|
|
const token = localStorage.getItem("token");
|
|
const body = { name };
|
|
await createPlaylist(body, token, addAlert);
|
|
onClose();
|
|
};
|
|
|
|
return isOpen && (
|
|
|
|
<div className="bg-[#00000080] fixed top-0 left-0 w-screen h-screen flex flex-col items-center justify-center" >
|
|
<div className="glassmorphism p-4 w-1/4" >
|
|
<h2 className="text-2xl text-white font-montserrat font-bold" >Créer une playlist</h2>
|
|
<label htmlFor="name" className="block text-xl text-white font-montserrat font-semibold mt-2" >Nom de la playlist</label>
|
|
<input
|
|
type="text"
|
|
id="name"
|
|
name="name"
|
|
placeholder="Nom de la playlist"
|
|
className="block glassmorphism text-lg text-white font-inter w-full py-3 px-2 focus:outline-none"
|
|
onChange={(e) => setName(e.target.value)}
|
|
value={name}
|
|
/>
|
|
<button
|
|
className="bg-primary mt-2 py-2 px-3 rounded-sm text-white font-montserrat text-2xl font-semibold cursor-pointer"
|
|
onClick={(e) => onSubmit(e) }
|
|
>
|
|
Valider
|
|
</button>
|
|
<button
|
|
className="bg-red-500 ml-2 mt-2 py-2 px-3 rounded-sm text-white font-montserrat text-2xl font-semibold cursor-pointer"
|
|
onClick={onClose}
|
|
>
|
|
Annuler
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|