Update existing artwork components to support the met api

frontend/src/App.tsx

@@ -1,9 +1,7 @@
-
 import { Routes, Route } from "react-router-dom";
-import './index.css'
-import HomePage from './pages/HomePage'
+import "./index.css";
+import HomePage from "./pages/HomePage";
 import Login from "./pages/login";
-import Artworks from "./pages/Artworks";
 
 function App() {
   return (

frontend/src/components/ArtworkCard.css

@@ -38,4 +38,4 @@
   margin: 0;
   color: #595959;
   overflow-wrap: anywhere;
-}
+}

frontend/src/components/ArtworkCard.tsx

@@ -1,20 +1,16 @@
-import { useState } from 'react'
-import type { Artwork } from '../types/Artwork'
-import './ArtworkCard.css'
+import { useState } from "react";
+import type { Artwork } from "../types/Artwork";
+import "./ArtworkCard.css";
 
 type ArtworkCardProps = {
-  artwork: Artwork
-}
+  artwork: Artwork;
+};
 
 function ArtworkImage({ src, alt }: { src: string; alt: string }) {
-  const [hasError, setHasError] = useState(false)
+  const [hasError, setHasError] = useState(false);
 
   if (hasError) {
-    return (
-      <div className="artwork-card__placeholder">
-        Image unavailable
-      </div>
-    )
+    return <div className="artwork-card__placeholder">Image unavailable</div>;
   }
 
   return (
@@ -25,28 +21,26 @@ function ArtworkImage({ src, alt }: { src: string; alt: string }) {
       loading="lazy"
       onError={() => setHasError(true)}
     />
-  )
+  );
 }
 
 export default function ArtworkCard({ artwork }: ArtworkCardProps) {
-  const artist = artwork.artist?.trim() || 'Unknown artist'
+  const artist = artwork.artist_display?.trim() || "Unknown artist";
 
   return (
     <article className="artwork-card">
-      {artwork.imageUrl ? (
+      {artwork.image_url ? (
         <ArtworkImage
-          key={artwork.imageUrl}
-          src={artwork.imageUrl}
-          alt={artwork.imageAlt || `${artwork.title} by ${artist}`}
+          key={artwork.image_url}
+          src={artwork.image_url}
+          alt={artwork.image_url || `${artwork.title} by ${artist}`}
         />
       ) : (
-        <div className="artwork-card__placeholder">
-          Image unavailable
-        </div>
+        <div className="artwork-card__placeholder">Image unavailable</div>
       )}
 
       <h3 className="artwork-card__title">{artwork.title}</h3>
       <p className="artwork-card__artist">{artist}</p>
     </article>
-  )
-}
+  );
+}

frontend/src/components/ArtworkGrid.css

@@ -1,11 +1,13 @@
 .artwork-grid {
   display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  align-items: start;
-  gap: 20px;
-  margin: 0;
-  padding: 0;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 280px));
+  gap: 24px;
+
+  justify-content: center;
+
   list-style: none;
+  padding: 0;
+  margin: 5rem 2rem 5rem 2rem;
 }
 
 .artwork-grid > li {
@@ -16,4 +18,4 @@
   .artwork-grid {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
-}
+}

frontend/src/components/Hero.tsx

@@ -10,33 +10,35 @@ function Hero() {
         to="/login"
         aria-label="Open login"
         className="absolute left-10 top-15 text-gray-300 hover:text-gray-500"
-        >
+      >
         <CircleUserRound size={34} strokeWidth={1.5} />
       </Link>
 
       <div className="max-w-xl mx-auto translate-y-0 min-[1100px]:translate-y-30">
         <h1 className="font-serif text-5xl sm:text-6xl leading-tight">Artex</h1>
 
         <p className="mt-8 font-serif text-base leading-7 text-gray-700 sm:text-lg sm:leading-8">
-          Explore thousands of artworks in the Art Institute of Chiacago’s collection. From their renowned icons to lesser known works from every corner of the globe. 
+          Explore thousands of artworks in the Metropolitan Museum´s collection.
+          From their renowned icons to lesser known works from every corner of
+          the globe.
         </p>
       </div>
 
       <div className="relative hidden min-h-88 w-full items-center justify-center min-[1000px]:flex min-[1000px]:flex-1 lg:min-h-136 lg:justify-end">
         <img
-            src={heroImageBack}
-            alt=""
-            className="absolute left-1/2 top-1/2 hidden w-[88%] max-w-2xl -translate-x-1/2 -translate-y-1/2 object-contain lg:block"
+          src={heroImageBack}
+          alt=""
+          className="absolute left-1/2 top-1/2 hidden w-[88%] max-w-2xl -translate-x-1/2 -translate-y-1/2 object-contain lg:block"
         />
 
         <img
-            src={heroImageFront}
-            alt="Featured artwork"
-            className="absolute left-1/2 top-1/2 hidden w-[72%] max-w-xl -translate-x-1/2 -translate-y-1/2 object-contain min-[1000px]:block min-w-[320px]"
+          src={heroImageFront}
+          alt="Featured artwork"
+          className="absolute left-1/2 top-1/2 hidden w-[72%] max-w-xl -translate-x-1/2 -translate-y-1/2 object-contain min-[1000px]:block min-w-[320px]"
         />
       </div>
     </section>
   );
 }
 
-export default Hero;
+export default Hero;

frontend/src/pages/HomePage.tsx

@@ -1,11 +1,17 @@
+import ArtworkGrid from "../components/ArtworkGrid";
 import Hero from "../components/Hero";
+import { useArtworks } from "../hooks/useArtworks";
+
+export default function HomePage() {
+  const { artworks, loading, error } = useArtworks();
+
+  if (loading) return <p>Loading artworks...</p>;
+  if (error) return <p>Error: {error}</p>;
 
-function HomePage() {
   return (
     <main>
       <Hero />
+      <ArtworkGrid artworks={artworks} />
     </main>
   );
 }
-
-export default HomePage;