selected card is outlined

bocacode · Oct 31, 2023 · c61afea · c61afea
1 parent cfa0fd7
commit c61afea
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 4 deletions.
diff --git a/src/App.css b/src/App.css
@@ -32,6 +32,10 @@ main {
   width: 260px;
 }
 
+.selected {
+  border: 1px solid #00ff48;
+}
+
 .beer-image {
   width: 100%;
   max-height: 500px;

diff --git a/src/components/BeerCard.jsx b/src/components/BeerCard.jsx
@@ -1,10 +1,10 @@
 import { useState } from "react";
 
-export default function BeerCard({ name, image, avgRating, setSelectedBeer }) {
+export default function BeerCard({ name, image, avgRating, setSelectedBeer, isSelected }) {
   const [hidden, setHidden] = useState(false)
   if(hidden) return null
   return (
-    <div className="beer-card" onClick={() => setSelectedBeer(name)}>
+    <div className={`beer-card ${isSelected && 'selected'}`} onClick={() => setSelectedBeer(name)}>
       <div className="close-button" onClick={() => setHidden(true)}>x</div>
       <div className="beer-image">
         <img src={image} alt={name}
@@ -16,8 +16,8 @@ export default function BeerCard({ name, image, avgRating, setSelectedBeer }) {
       </div>
       <h2>{name}</h2>
       <div className="rating">
-        <p className="grey-stars">XXXXX</p>
-        <p className="yellow-stars" style={{ width: avgRating + 'em'}}>XXXXX</p>
+        <p className="grey-stars">⭐️⭐️⭐️⭐️⭐️</p>
+        <p className="yellow-stars" style={{ width: avgRating + 'em'}}>⭐️⭐️⭐️⭐️⭐️</p>
       </div>
     </div>
   )

diff --git a/src/components/BeerList.jsx b/src/components/BeerList.jsx
@@ -40,6 +40,7 @@ export default function BeerList() {
               image={beer.image}
               avgRating={beer.rating.average}
               setSelectedBeer={setSelectedBeer}
+              isSelected={selectedBeer === beer.name}
             />
           ))
         )}