Skip to content

Commit

Permalink
Formulaire d'ajout d'une musique
Browse files Browse the repository at this point in the history
  • Loading branch information
@Leeky19
Leeky19 committed Mar 22, 2023
1 parent 168576e commit a2dcbd5
Show file tree
Hide file tree
Showing 2 changed files with 53 additions and 22 deletions.
6 changes: 6 additions & 0 deletions src/Route/Admin/AddChart/AddChart.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
input[type=text] {
width: 30%;
padding: 0.5em 1em;
margin: 0.5em ;
box-sizing: border-box;
}
69 changes: 47 additions & 22 deletions src/Route/Admin/AddChart/AddChart.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,16 +48,16 @@ function AddChart() {
<h1>Add Chart</h1>
<form method="post" onSubmit={handleSubmit}>
<div>
<label htmlFor="title">Title</label>
<input type="text" name="title" id="title" />
<label htmlFor="title" className='w-1/3 text-xl uppercase tracking-wide text-sm text-green-500 font-semibold'>Title</label>
<input className="w-2/3 bg-gray-200 appearance-none border-2 border-gray-200 rounded w-64 py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500" name="title" id="title" type="text"></input>
</div>
<div>
<label htmlFor="artist">Artist</label>
<input type="text" name="artist" id="artist" />
<label htmlFor="artist" className=' text-xl uppercase tracking-wide text-sm text-green-500 font-semibold' >Artist</label>
<input className="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-64 py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500" name="artist" id="artist" type="text"></input>
</div>
<div>
<label htmlFor="category">Category</label>
<select name="category" id="category">
<label htmlFor="category" className='text-2xl'>Category</label>
<select className="block appearance-none w-64 bg-white border border-gray-400 hover:border-purple-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline" name="category" id="category">
<option value="pop">Pops & Anime</option>
<option value="niconico">niconico & Vocaloid</option>
<option value="touhou">Touhou Project</option>
Expand All @@ -68,25 +68,50 @@ function AddChart() {
</select>
</div>
<div>
<p>Difficulty: </p>
<label htmlFor="easy">Easy</label>
<input type="string" name="easy" id="easy" />
<label htmlFor="basic">Basic</label>
<input type="string" name="basic" id="basic" />
<label htmlFor="advance">Advance</label>
<input type="string" name="advance" id="advance" />
<label htmlFor="expert">Expert</label>
<input type="string" name="expert" id="expert" />
<label htmlFor="master">Master</label>
<input type="string" name="master" id="master" />
<label htmlFor="remaster">Remaster</label>
<input type="string" name="remaster" id="remaster" />
<div className='text-2xl'>
<p>Difficulty: </p>
</div>
<div className='flex content-start '>
<div className='p-3'>
<label htmlFor="easy" className=' flex -space-x-4 text-xl uppercase tracking-wide text-blue-500 font-semibold'>Easy</label>
<input type="string" name="easy" id="easy" className="w-24 bg-blue-300 appearance-none border-2 border-gray-200 rounded py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue-500"/>
</div>

<div className='p-3'>
<label htmlFor="basic" className=' flex -space-x-4 text-xl uppercase tracking-wide text-green-500 font-semibold'>Basic</label>
<input type="string" name="basic" id="basic" className="w-24 bg-green-300 appearance-none border-2 border-gray-200 rounded py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-green-500"/>
</div>

<div className='p-3'>
<label htmlFor="advance" className=' flex -space-x-4 text-xl uppercase tracking-wide text-yellow-500 font-semibold'>Advance</label>
<input type="string" name="advance" id="advance" className="w-24 bg-yellow-300 appearance-none border-2 border-gray-200 rounded py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-yellow-500" />
</div>

<div className='p-3'>
<label htmlFor="expert" className='flex -space-x-4 text-xl uppercase tracking-wide text-red-500 font-semibold'>Expert</label>
<input type="string" name="expert" id="expert" className="w-24 bg-red-300 appearance-none border-2 border-gray-200 rounded py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-red-500"/>
</div>

<div className='p-3'>
<label htmlFor="master" className='flex -space-x-4 text-xl uppercase tracking-wide text-fuchsia-500 font-semibold'>Master</label>
<input type="string" name="master" id="master" className="w-24 bg-fuchsia-300 appearance-none border-2 border-gray-200 rounded py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-fuchsia-500"/>
</div>

<div className='p-3'>
<label htmlFor="remaster" className='flex -space-x-4 text-xl uppercase tracking-wide text-indigo-500 font-semibold'>Remaster</label>
<input type="string" name="remaster" id="remaster" className="w-24 bg-gray-300 appearance-none border-2 border-gray-200 rounded py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500"/>
</div>
</div>
</div>
<div>
<label htmlFor="image"className='text-2xl w1/6'>Image Cover</label>
<input type="string" name="image" id="image" className=" bg-gray-200 appearance-none border-2 border-gray-200 rounded w-3/6 py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500"/>
</div>
<div>
<label htmlFor="image">Image Cover</label>
<input type="string" name="image" id="image" />
<button className="w-full flex-shrink-0 bg-teal-500 hover:bg-teal-700 border-teal-500 hover:border-teal-700 text-sm border-4 text-white py-1 px-2 rounded"type="submit">
Submit
</button>
</div>
<button type="submit">Submit</button>
</form>
</div>
);
Expand Down

0 comments on commit a2dcbd5

Please sign in to comment.