diff options
| -rw-r--r-- | components/listEditor.js | 85 | ||||
| -rw-r--r-- | pages/anime/[...id].js | 12 |
2 files changed, 58 insertions, 39 deletions
diff --git a/components/listEditor.js b/components/listEditor.js index d90e481..ed54987 100644 --- a/components/listEditor.js +++ b/components/listEditor.js @@ -50,7 +50,7 @@ const ListEditor = ({ animeId, session, stats, prg, max }) => { }; return ( - <div className="relative bg-secondary"> + <div className="relative bg-secondary rounded-md w-full sm:w-auto"> {message && ( <m.div initial={{ opacity: 0, y: 10 }} @@ -58,52 +58,63 @@ const ListEditor = ({ animeId, session, stats, prg, max }) => { exit={{ opacity: 0, y: 10 }} className={`${ type === "success" ? "bg-green-500" : "bg-red-500" - } text-white px-4 py-1 mb-4 rounded-md`} + } text-white px-4 py-1 mb-4 rounded-md text-sm sm:text-base`} > {message} </m.div> )} + <div className="absolute font-karla -top-8 rounded-md bg-secondary px-2 py-1 text-sm"> + List Editor + </div> <form onSubmit={handleSubmit} - className="px-10 py-5 text-inherit font-karla antialiased shrink-0" + className="px-7 py-5 text-inherit flex flex-col gap-3 font-karla antialiased shrink-0" > - <div className="flex justify-between items-center gap-14"> - <label htmlFor="status" className="font-karla font-bold"> - Status: - </label> - <select - name="status" - id="status" - value={status} - onChange={(e) => setStatus(e.target.value)} - className="rounded-md px-2 py-1 bg-[#363642]" - > - <option value="">Select a status</option> - <option value="CURRENT">Watching</option> - <option value="COMPLETED">Completed</option> - <option value="PAUSED">Paused</option> - <option value="DROPPED">Dropped</option> - <option value="PLANNING">Plan to watch</option> - </select> - </div> - <div className="flex justify-between items-center mt-2"> - <label htmlFor="progress" className="font-karla font-bold"> - Progress: - </label> - <input - type="number" - name="progress" - id="progress" - value={progress} - max={max} - onChange={(e) => setProgress(e.target.value)} - className="rounded-md px-2 py-1 bg-[#363642]" - min="0" - /> + <div className="flex flex-col gap-2"> + <div className="flex justify-between items-center gap-4 sm:gap-24"> + <label + htmlFor="status" + className="font-karla font-bold text-sm sm:text-base" + > + Status: + </label> + <select + name="status" + id="status" + value={status} + onChange={(e) => setStatus(e.target.value)} + className="rounded-sm px-2 py-1 bg-[#363642] w-[50%] sm:w-[150px] text-sm sm:text-base" + > + <option value="">Select a status</option> + <option value="CURRENT">Watching</option> + <option value="COMPLETED">Completed</option> + <option value="PAUSED">Paused</option> + <option value="DROPPED">Dropped</option> + <option value="PLANNING">Plan to watch</option> + </select> + </div> + <div className="flex justify-between items-center mt-2"> + <label + htmlFor="progress" + className="font-karla font-bold text-sm sm:text-base" + > + Progress: + </label> + <input + type="number" + name="progress" + id="progress" + value={progress} + max={max} + onChange={(e) => setProgress(e.target.value)} + className="rounded-sm px-2 py-1 bg-[#363642] w-[50%] sm:w-[150px] text-sm sm:text-base" + min="0" + /> + </div> </div> <button type="submit" - className="bg-[#363642] text-white rounded-md mt-2 py-1 px-4" + className="bg-[#363642] text-white rounded-sm mt-2 py-1 text-sm sm:text-base" > Save </button> diff --git a/pages/anime/[...id].js b/pages/anime/[...id].js index 9ad58a2..5e66133 100644 --- a/pages/anime/[...id].js +++ b/pages/anime/[...id].js @@ -451,7 +451,11 @@ export default function Info() { className="bg-action px-10 rounded-sm font-karla font-bold" onClick={() => handleOpen()} > - {statuses ? statuses : "Add to List"} + {loading + ? statuses + ? statuses + : "Add to List" + : "Loading..."} </button> <div className="h-6 w-6"> <HeartIcon /> @@ -504,7 +508,11 @@ export default function Info() { className="bg-action flex-center z-20 h-[20px] w-[180px] absolute bottom-0 rounded-sm font-karla font-bold" onClick={() => handleOpen()} > - {statuses ? statuses : "Add to List"} + {loading + ? statuses + ? statuses + : "Add to List" + : "Loading..."} </button> </> ) : ( |