From b546c63c38c608cfbbf68ddd1aa4d1327489d91c Mon Sep 17 00:00:00 2001
From: Factiven <dabinaya.fathan@gmail.com>
Date: Fri, 28 Apr 2023 17:31:15 +0700
Subject: Editor List v0.4

---
 components/listEditor.js | 85 +++++++++++++++++++++++++++---------------------
 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>
                     </>
                   ) : (
-- 
cgit v1.2.3