feat: front update

assets/react/app/presentation/components/MangaCard.jsx

@@ -1,7 +1,5 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faStar } from '@fortawesome/free-solid-svg-icons';
 
 export function MangaCard({ manga }) {
   const navigate = useNavigate();
@@ -10,39 +8,34 @@ export function MangaCard({ manga }) {
     navigate(`/manga/${manga.slug}`);
   };
 
+  const formatDate = (dateString) => {
+    const date = new Date(dateString);
+    return date.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric'
+    });
+  };
+
   return (
     <div 
       className="bg-white rounded-lg shadow-md overflow-hidden cursor-pointer transition-transform hover:scale-105"
       onClick={handleClick}
     >
-      <div className="relative h-64">
+      <div className="relative pb-[150%]">
         <img
           src={manga.imageUrl || 'https://via.placeholder.com/300x400'}
           alt={manga.title}
-          className="w-full h-full object-cover"
+          className="absolute inset-0 w-full h-full object-contain bg-gray-100"
         />
       </div>
-      <div className="p-4">
-        <h3 className="text-lg font-semibold text-gray-800 mb-2">{manga.title}</h3>
-        <p className="text-sm text-gray-600 mb-2">By {manga.author}</p>
-        <div className="flex items-center justify-between">
+      <div className="p-2">
+        <h3 className="text-lg font-semibold text-gray-800 mb-1">{manga.title}</h3>
+        <div className="flex items-center">
           <span className="text-sm text-gray-500">{manga.publicationYear}</span>
-          {manga.rating && (
-            <span className="flex items-center text-yellow-500">
-              <FontAwesomeIcon icon={faStar} className="mr-1" />
-              {manga.rating}
-            </span>
-          )}
         </div>
-        <div className="mt-2 flex flex-wrap gap-1">
-          {manga.genres.map((genre, index) => (
-            <span
-              key={index}
-              className="px-2 py-1 text-xs bg-green-100 text-green-800 rounded-full"
-            >
-              {genre}
-            </span>
-          ))}
+        <div className="mt-1 text-sm text-gray-500">
+          Added: {formatDate(manga.createdAt)}
         </div>
       </div>
     </div>