Display images (#78)

* Update components to be able to display images * Conditionally render image tags if URL is provided
samau3 · May 3, 2024 · 44acf0c · 44acf0c
1 parent f8cf3b6
commit 44acf0c
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 5 deletions.
diff --git a/app/src/components/ItemCard.tsx b/app/src/components/ItemCard.tsx
@@ -2,15 +2,16 @@ interface ItemCardProps {
   item: string;
   index: number;
   cost: string;
+  imageURL?: string;
 }
 
-export function ItemCard({ item, index, cost }: ItemCardProps) {
+export function ItemCard({ item, index, cost, imageURL }: ItemCardProps) {
   return (
     <div
       key={`${item}-${index}`}
       className="w-full h-full flex flex-col shadow-lg p-4 bg-gray-100 bg-opacity-80 border-2 dark:bg-slate-800 dark:border-gray-600 dark:bg-opacity-80 rounded-lg justify-between"
     >
-      {/* <img src="https://placehold.co/300" /> */}
+      {imageURL && <img className="mb-2" src={imageURL} />}
       <p className="mb-auto text-lg tracking-tight text-black dark:text-slate-200 ">
         {item}
       </p>

diff --git a/app/src/components/ItemGrid.tsx b/app/src/components/ItemGrid.tsx
@@ -1,7 +1,12 @@
 import { ItemCard } from "./ItemCard";
 import { IItems } from "../interfaces/interfaces";
 
-export default function ItemGrid({ listings }: { listings: IItems }) {
+interface ItemGridProps {
+  listings: IItems;
+  imageURLs: IItems;
+}
+
+export default function ItemGrid({ listings, imageURLs }: ItemGridProps) {
   return (
     <>
 
@@ -13,7 +18,7 @@ export default function ItemGrid({ listings }: { listings: IItems }) {
             <div
               key={index}
             >
-              <ItemCard item={item} index={index} cost={listings[item]} />
+              <ItemCard item={item} index={index} cost={listings[item]} imageURL={imageURLs[item]} />
             </div>
           ))}
         </div>

diff --git a/app/src/components/Items.tsx b/app/src/components/Items.tsx
@@ -11,6 +11,7 @@ interface IScrapeResults {
   recent_change: IChanges;
   current_listings: IItems;
   last_change: ILastChange;
+  images: IItems;
 }
 
 const API_STATUS_URL = "https://j50pzswk.status.cron-job.org/";
@@ -135,7 +136,7 @@ export default function Items() {
             recentChange={scrapeResults.recent_change}
             lastChange={scrapeResults.last_change}
           ></Changes>
-          <ItemGrid listings={scrapeResults.current_listings} />
+          <ItemGrid listings={scrapeResults.current_listings} imageURLs={scrapeResults.images} />
         </div>
       )}
     </>