From 50b4e2af5ce8dd502cd9ef0dbb9869cfee2326bc Mon Sep 17 00:00:00 2001
From: LirPes <lironpes@@gmail.com>
Date: Thu, 11 Dec 2025 20:09:06 +0200
Subject: [PATCH 1/3] added show props to each showcard

---
 src/App.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/App.tsx b/src/App.tsx
index b16f189..d9947c4 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -56,7 +56,15 @@ export default function App() {
 
       <main>
         <div className="shows-grid">
-        {/* TODO - shows.map((show)=>{ return <ShowCard id={show.id} .../> })*/}
+        {shows.map((show)=> { 
+          return <ShowCard key={show.id} 
+                           artist={show.artist} 
+                           stage={show.stage}
+                           day={show.day}
+                           hour={show.hour}
+                           ticketsLeft={show.ticketsLeft}
+                           image={show.image}
+                  />})}
         </div>
       </main>
     </div>

From 1c2cc462d67609abfe9c1d1d81919b8e4dd40ced Mon Sep 17 00:00:00 2001
From: LirPes <lironpes@@gmail.com>
Date: Thu, 11 Dec 2025 20:09:19 +0200
Subject: [PATCH 2/3] implemented functions

---
 src/components/showCard/ShowCard.tsx | 46 +++++++++++-----------------
 1 file changed, 18 insertions(+), 28 deletions(-)

diff --git a/src/components/showCard/ShowCard.tsx b/src/components/showCard/ShowCard.tsx
index 7e18a47..adbdcae 100644
--- a/src/components/showCard/ShowCard.tsx
+++ b/src/components/showCard/ShowCard.tsx
@@ -10,63 +10,53 @@ export interface ShowCardProps {
 }
 
 export default function ShowCard(
-  /* TODO 1: Accept props with ShowCardProps type here */
+  {artist, stage, day, hour, ticketsLeft, image}: ShowCardProps
 ) {
-  // TODO 2: Create state called isInterested of type boolean (default false)
-  // const [isInterested, setIsInterested] = ...
 
-  // TODO 3: Function that toggles true/false in isInterested
-  // function handleToggleInterested() {}
+  const [isInterested, setIsInterested] = useState(false)
 
-  // TODO 4: Create ticketsStatusText (string):
-  // 0 → "SOLD OUT"
-  // 1–30 → "Last tickets – hurry up!"
-  // >30 → "Tickets available"
+  function handleToggleInterested() {
+    setIsInterested(!isInterested)
+  }
 
-  // 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 ticketsStatusText(): string {
+     return ticketsLeft === 0? "SOLD OUT": ticketsLeft > 30? "Tickets available": "Last tickets – hurry up!"
+  }
+
+  let interestedStatusText = isInterested? "This show is in your interested list 🎟️": "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" /> */}
+        <img src={image} alt={artist} className="show-image" />
         <div className="show-image-placeholder">Image goes here</div>
       </div>
 
       <header className="show-header">
         <h2 className="show-artist">
-          {/* TODO 7: If isInterested → show ⭐ before artist name */}
-          "Artist name here"
+          {isInterested? "⭐": ""}
+          {artist}
         </h2>
         <p className="show-meta">
-          {/* TODO 8: Display stage, day, hour from props */}
-          "Stage · Day · Hour"
+          {`${stage} ${day} ${hour}`}
         </p>
       </header>
 
       <section className="show-info">
         <p className="tickets-status">
-          {/* TODO 9: Display the ticketsStatusText */}
-          "Tickets status text"
+          {ticketsStatusText()}
         </p>
 
         <p className="interested-status">
-          {/* TODO 10: Display the interestedText */}
-          "Interested status text"
+          {interestedStatusText}
         </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>
   );

From 251d5b57cc85ee7a35d64cda3553e377a054e34b Mon Sep 17 00:00:00 2001
From: LirPes <lironpes@@gmail.com>
Date: Sun, 14 Dec 2025 14:37:33 +0200
Subject: [PATCH 3/3] fixed comments

---
 src/App.tsx                          | 10 +---------
 src/components/showCard/ShowCard.tsx | 13 ++++++++-----
 2 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index d9947c4..b0cac70 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -56,15 +56,7 @@ export default function App() {
 
       <main>
         <div className="shows-grid">
-        {shows.map((show)=> { 
-          return <ShowCard key={show.id} 
-                           artist={show.artist} 
-                           stage={show.stage}
-                           day={show.day}
-                           hour={show.hour}
-                           ticketsLeft={show.ticketsLeft}
-                           image={show.image}
-                  />})}
+        {shows.map((show)=>{ return <ShowCard key={show.id} {...show}/> })}
         </div>
       </main>
     </div>
diff --git a/src/components/showCard/ShowCard.tsx b/src/components/showCard/ShowCard.tsx
index adbdcae..c61b46d 100644
--- a/src/components/showCard/ShowCard.tsx
+++ b/src/components/showCard/ShowCard.tsx
@@ -19,11 +19,15 @@ export default function ShowCard(
     setIsInterested(!isInterested)
   }
 
+  const lastTicketsAmount = 30
+  const ticketsSoldOut = 0;
   function ticketsStatusText(): string {
-     return ticketsLeft === 0? "SOLD OUT": ticketsLeft > 30? "Tickets available": "Last tickets – hurry up!"
+     return ticketsLeft === ticketsSoldOut? "SOLD OUT": ticketsLeft > lastTicketsAmount? "Tickets available": "Last tickets – hurry up!"
   }
 
-  let interestedStatusText = isInterested? "This show is in your interested list 🎟️": "You haven't added this show yet"
+  const ticketsStatus = ticketsStatusText()
+
+  const interestedStatusText = isInterested? "This show is in your interested list 🎟️": "You haven't added this show yet"
 
   return (
     <article className="show-card">
@@ -34,8 +38,7 @@ export default function ShowCard(
 
       <header className="show-header">
         <h2 className="show-artist">
-          {isInterested? "⭐": ""}
-          {artist}
+          {isInterested && "⭐"} {artist} 
         </h2>
         <p className="show-meta">
           {`${stage} ${day} ${hour}`}
@@ -44,7 +47,7 @@ export default function ShowCard(
 
       <section className="show-info">
         <p className="tickets-status">
-          {ticketsStatusText()}
+          {ticketsStatus}
         </p>
 
         <p className="interested-status">