initial v4 commit

1 files changed, 25 insertions, 33 deletions

diff --git a/components/anime/viewMode/listMode.js b/components/anime/viewMode/listMode.js
index f3bcf05..5beded1 100644
--- a/components/anime/viewMode/listMode.js
+++ b/components/anime/viewMode/listMode.js
@@ -3,7 +3,6 @@ import Link from "next/link";
 export default function ListMode({
   info,
   episode,
-  index,
   artStorage,
   providerId,
   progress,
@@ -15,39 +14,32 @@ export default function ListMode({
   if (prog > 90) prog = 100;
 
   return (
-    <div key={episode.number} className="flex flex-col gap-3 px-2">
-      <Link
-        href={`/en/anime/watch/${info.id}/${providerId}?id=${encodeURIComponent(
-          episode.id
-        )}&num=${episode.number}${dub ? `&dub=${dub}` : ""}`}
-        className={`text-start text-sm lg:text-lg ${
-          progress
-            ? progress && episode.number <= progress
+    <Link
+      key={episode.number}
+      href={`/en/anime/watch/${info.id}/${providerId}?id=${encodeURIComponent(
+        episode.id
+      )}&num=${episode.number}${dub ? `&dub=${dub}` : ""}`}
+      className={`flex gap-3 py-4 hover:bg-secondary/10 odd:bg-secondary/30 even:bg-primary`}
+    >
+      <div className="flex w-full">
+        <span className="shrink-0 px-4 text-center text-white/50">
+          {episode.number}
+        </span>
+        <p
+          className={`w-full line-clamp-1 ${
+            progress
+              ? progress && episode.number <= progress
+                ? "text-[#5f5f5f]"
+                : "text-white"
+              : prog === 100
               ? "text-[#5f5f5f]"
               : "text-white"
-            : prog === 100
-            ? "text-[#5f5f5f]"
-            : "text-white"
-        }`}
-      >
-        <p>Episode {episode.number}</p>
-        {episode.title && (
-          <p
-            className={`text-xs lg:text-sm ${
-              progress
-                ? progress && episode.number <= progress
-                  ? "text-[#5f5f5f]"
-                  : "text-[#b1b1b1]"
-                : prog === 100
-                ? "text-[#5f5f5f]"
-                : "text-[#b1b1b1]"
-            } italic`}
-          >
-            "{episode.title}"
-          </p>
-        )}
-      </Link>
-      {index !== episode?.length - 1 && <span className="h-[1px] bg-white" />}
-    </div>
+          }`}
+        >
+          {episode?.title || `Episode ${episode.number}`}
+        </p>
+        <p className="capitalize text-sm text-white/50 px-4">{providerId}</p>
+      </div>
+    </Link>
   );
 }