Editor List v0.6

2 files changed, 75 insertions, 54 deletions

diff --git a/components/listEditor.js b/components/listEditor.js
index 41a3172..64ca632 100644
--- a/components/listEditor.js
+++ b/components/listEditor.js
@@ -1,8 +1,9 @@
 import { useState } from "react";
 import useAlert from "./useAlert";
 import { motion as m } from "framer-motion";
+import Image from "next/image";
 
-const ListEditor = ({ animeId, session, stats, prg, max }) => {
+const ListEditor = ({ animeId, session, stats, prg, max, image = null }) => {
   const { message, type, showAlert } = useAlert();
   const [status, setStatus] = useState(stats ?? "");
   const [progress, setProgress] = useState(prg ?? 0);
@@ -50,7 +51,7 @@ const ListEditor = ({ animeId, session, stats, prg, max }) => {
   };
 
   return (
-    <div className="relative bg-secondary rounded-md w-full sm:w-auto">
+    <div className="relative bg-secondary rounded-sm w-screen md:w-auto">
       {message && (
         <m.div
           initial={{ opacity: 0, y: 10 }}
@@ -63,61 +64,81 @@ const ListEditor = ({ animeId, session, stats, prg, max }) => {
           {message}
         </m.div>
       )}
-      <div className="absolute font-karla -top-8 rounded-md bg-secondary px-2 py-1 text-sm">
+      <div className="absolute font-karla font-bold -top-8 rounded-sm px-2 py-1 text-sm">
         List Editor
       </div>
-      <form
-        onSubmit={handleSubmit}
-        className="px-7 py-5 text-inherit flex flex-col gap-3 font-karla antialiased shrink-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?.value}
-              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="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 className="md:flex">
+        {image && (
+          <div>
+            <Image
+              src={image.coverImage.large}
+              alt="image"
+              height={500}
+              width={500}
+              className="object-cover w-[120px] h-[180px] rounded-l-sm hidden md:block"
+            />
+            <Image
+              src={image.bannerImage}
+              alt="image"
+              height={500}
+              width={500}
+              className="object-cover h-[50px] w- rounded-t-sm md:hidden"
             />
           </div>
-        </div>
-        <button
-          type="submit"
-          className="bg-[#363642] text-white rounded-sm mt-2 py-1 text-sm sm:text-base"
+        )}
+        <form
+          onSubmit={handleSubmit}
+          className="px-7 py-5 text-inherit flex flex-col justify-between gap-3 font-karla antialiased shrink-0 relative"
         >
-          Save
-        </button>
-      </form>
+          <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?.value}
+                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="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-sm mt-2 py-1 text-sm sm:text-base"
+          >
+            Save
+          </button>
+        </form>
+      </div>
     </div>
   );
 };
diff --git a/components/modal.js b/components/modal.js
index 0a9d349..f237d77 100644
--- a/components/modal.js
+++ b/components/modal.js
@@ -3,13 +3,13 @@ export default function Modal({ open, onClose, children }) {
     <div
       onClick={onClose}
       className={`fixed z-50 inset-0 flex justify-center items-center transition-colors ${
-        open ? "visible bg-black bg-opacity-50" : "invisible"
+        open ? "visible bg-black bg-opacity-50 backdrop-blur-sm" : "invisible"
       }`}
     >
       <div
         onClick={(e) => e.stopPropagation()}
         className={`shadow rounded-xl p-6 transition-all ${
-          open ? "scale-125 opacity-100" : "scale-100 opacity-0"
+          open ? "scale-100 opacity-100" : "scale-75 opacity-0"
         }`}
       >
         {children}