style: update ui for manga page

midokuapp · Nov 9, 2024 · c05145c · c05145c
1 parent 196543f
commit c05145c
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 78 deletions.
diff --git a/src/components/Manga/MangaChapters.tsx b/src/components/Manga/MangaChapters.tsx
@@ -25,7 +25,7 @@ function MangaChapter({ extensionId, mangaId }: {
 
   return (
     <div className="mt-4">
-      <h2 className="text-xl text-white font-bold mb-4 p-2">Chapters</h2>
+      <h2 className="text-xl font-bold mb-4 p-2">Chapters</h2>
       {chapters.length === 0 ? <p>No Chapters</p> : (
         <ul className="space-y-2">
           {chapters.map((chapter: Chapter) => (

diff --git a/src/components/Manga/MangaImage.tsx b/src/components/Manga/MangaImage.tsx
diff --git a/src/pages/MangaDetails.tsx b/src/pages/MangaDetails.tsx
@@ -1,7 +1,6 @@
 import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 
-import MangaImage from "../components/Manga/MangaImage.tsx";
 import { Manga, ReadingMode } from "../types/manga.ts";
 import { getMangaDetails } from "../services/extensions.service.ts";
 
@@ -12,99 +11,97 @@ export default function MangaDetails() {
     { extensionId: string; mangaId: string }
   >();
 
-  const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState<boolean>(true);
   const [manga, setManga] = useState<Manga | null>(null);
   const [descriptionExpanded, setDescriptionExpanded] = useState<boolean>(
     false,
   );
 
   useEffect(() => {
-    if (!extensionId || !mangaId) {
-      setError("Error loading manga details.");
-      setLoading(false);
-      return;
-    }
+    if (!extensionId || !mangaId) return;
+
     getMangaDetails(extensionId, mangaId)
       .then((data) => {
         setManga(data);
         setLoading(false);
-      })
-      .catch((err) => {
-        setError("Error loading manga details: " + err);
-        setLoading(false);
       });
   }, [extensionId, mangaId]);
 
   if (loading) {
     return (
-      <div className="flex flex-col justify-center items-center h-screen text-white">
+      <div className="flex flex-col justify-center items-center h-screen">
         <div>Loading...</div>
         <div className="loader"></div>
       </div>
     );
   }
 
-  if (error) {
-    return <div className="p-4 text-red-500">{error}</div>;
-  }
-
   if (!manga) {
     return null;
   }
 
   return (
-    <div className="max-w-md mx-auto text-white ">
+    <div className="max-w-md mx-auto">
       <div className="p-2">
         {/* Manga title and cover */}
         <div className="flex gap-4 items-start">
-          <MangaImage
+          <img
             src={manga.coverUrl}
             alt={manga.title}
-            height={150}
-            width={30}
+            className="aspect-[2/3] w-36 rounded-md object-cover"
           />
           <div className="flex flex-col">
             <h1 className="text-lg font-semibold mb-1">{manga.title}</h1>
-            <div className="text-gray-400 text-sm mb-1">
-              <strong>Author:</strong> {manga.authorName}
-            </div>
-            <div className="text-gray-400 text-sm">
-              <strong>Satus:</strong> {manga.status}
+            <div className="flex gap-1 flex-col">
+              <p className="text-sm opacity-70">
+                <strong>Author:</strong> {manga.authorName}
+              </p>
+              <p className="text-sm opacity-70">
+                <strong>Status:</strong> {manga.status}
+              </p>
+              <p className="text-sm opacity-70">
+                <strong>Content Rating:</strong> {manga.contentRating}
+              </p>
+              <p className="text-sm opacity-70">
+                <strong>Reading Style:</strong> {(() => {
+                  switch (manga.readingMode) {
+                    case ReadingMode.RightToLeft:
+                      return "Right to Left";
+                    case ReadingMode.LeftToRight:
+                      return "Left to Right";
+                    case ReadingMode.Vertical:
+                      return "Vertical";
+                    case ReadingMode.Scroll:
+                      return "Scroll";
+                    default:
+                      return "Unknown";
+                  }
+                })()}
+              </p>
+              <p className="text-sm opacity-70">
+                {manga.categories.map((category: string) => (
+                  <span key={category} className="badge badge-outline mr-1">
+                    {category}
+                  </span>
+                ))}
+              </p>
             </div>
-            <p className="text-gray-400 text-sm">
-              <strong>Content Rating:</strong> {manga.contentRating}
-            </p>
           </div>
         </div>
 
-        {/* Extra details */}
-        <div className="mt-4">
-          <h2 className="text-md font-semibold mb-2">Details</h2>
-          <p className="text-gray-400 text-sm">
-            <strong>Reading Style:</strong>{" "}
-            {manga.readingMode === ReadingMode.RightToLeft
-              ? "Right to Left"
-              : "Left to Right"}
-          </p>
-          <p className="text-gray-400 text-sm">
-            <strong>Categories:</strong> {manga.categories.join(", ")}
-          </p>
-        </div>
-
         {/* Collapsible description */}
         <div className="mt-4">
           <h2 className="text-md font-semibold mb-2">Description</h2>
           <p
-            className={`text-gray-300 text-sm  transition ${
-              descriptionExpanded ? "" : "line-clamp-3"
+            className={`text-sm transition ${
+              !descriptionExpanded && "line-clamp-3"
             }`}
           >
             {manga.description}
           </p>
           <button
             onClick={() => setDescriptionExpanded(!descriptionExpanded)}
-            className="text-blue-400 text-sm mt-2"
+            className="text-primary text-sm mt-2"
           >
             {descriptionExpanded ? "Show less" : "Show more"}
           </button>