finished

src/App.tsx

@@ -56,6 +56,8 @@ export default function App() {
 
       <main>
         <div className="shows-grid">
+{shows.map((show) =>{ return (<ShowCard id={show.id} artist={show.artist} stage={show.stage} day={show.day} hour={show.hour} ticketsLeft={show.ticketsLeft} image={show.image} />  )})}
+
         {/* TODO - shows.map((show)=>{ return <ShowCard id={show.id} .../> })*/}
         </div>
       </main>

src/components/showCard/ShowCard.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 
 export interface ShowCardProps {
+  id: number;
   artist: string;
   stage: string;
   day: string;
@@ -9,64 +10,75 @@ export interface ShowCardProps {
   image: string;
 }
 
-export default function ShowCard(
-  /* TODO 1: Accept props with ShowCardProps type here */
-) {
-  // TODO 2: Create state called isInterested of type boolean (default false)
-  // const [isInterested, setIsInterested] = ...
+export default function ShowCard(Props: ShowCardProps) {
 
-  // TODO 3: Function that toggles true/false in isInterested
-  // function handleToggleInterested() {}
+  const [isInterested, setIsInterested] = useState<boolean>(false);
 
-  // TODO 4: Create ticketsStatusText (string):
-  // 0 → "SOLD OUT"
-  // 1–30 → "Last tickets – hurry up!"
-  // >30 → "Tickets available"
 
-  // TODO 5: Create text for interest status based on isInterested:
-  // false → "You haven't added this show yet"
-  // true → "This show is in your interested list 🎟️"
+  function handleToggleInterested() {
+    setIsInterested((prev) => !prev);
+  }
+
+
+  let ticketsStatusText: string;
+
+  if (Props.ticketsLeft === 0) {
+    ticketsStatusText = "SOLD OUT";
+  } else if (Props.ticketsLeft <= 30) {
+    ticketsStatusText = "Last tickets – hurry up!";
+  } else {
+    ticketsStatusText = "Tickets available";
+  }
+
+
+
+
+  let interestedText: string;
+
+  if (isInterested === true) {
+    interestedText = "This show is in your interested list 🎟️";
+  } else {
+    interestedText = "You haven't added this show yet";
+  }
 
   return (
     <article className="show-card">
       <div className="show-image-wrapper">
-        {/* TODO 6: Replace placeholder with real <img> from props */}
-        {/* <img src={image} alt={artist} className="show-image" /> */}
-        <div className="show-image-placeholder">Image goes here</div>
+        <img
+          src={Props.image}
+          alt={Props.artist}
+          className="show-image"
+        />
+
+
+
       </div>
 
+
       <header className="show-header">
         <h2 className="show-artist">
-          {/* TODO 7: If isInterested → show ⭐ before artist name */}
-          "Artist name here"
+          {isInterested ? "⭐ " : ""}
+          {Props.artist}
+
         </h2>
         <p className="show-meta">
-          {/* TODO 8: Display stage, day, hour from props */}
-          "Stage · Day · Hour"
+          {Props.stage}
+          {Props.day}
+          {Props.hour}
         </p>
       </header>
 
       <section className="show-info">
-        <p className="tickets-status">
-          {/* TODO 9: Display the ticketsStatusText */}
-          "Tickets status text"
-        </p>
+        <p className="tickets-status">{ticketsStatusText}</p>
 
-        <p className="interested-status">
-          {/* TODO 10: Display the interestedText */}
-          "Interested status text"
-        </p>
+        <p className="interested-status">{interestedText}</p>
       </section>
 
       <button
         className="interested-button"
-        // TODO 11: Connect onClick to handleToggleInterested function
+        onClick={handleToggleInterested}
       >
-        {/* TODO 12: Button text:
-            false → "Mark as interested"
-            true  → "Remove from my list"
-        */}
-        "Button text"
+        {isInterested ? "Remove from my list" : "Mark as interested"}
       </button>
     </article>
   );