changed stars to beers

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "workbench.colorCustomizations": {
+    "activityBar.background": "#2C2560",
+    "titleBar.activeBackground": "#3E3386",
+    "titleBar.activeForeground": "#FBFBFD"
+  }
+}

src/App.css

@@ -32,6 +32,10 @@ main {
   width: 260px;
 }
 
+.selected {
+  border: 1px solid #00ff48;
+}
+
 .beer-image {
   width: 100%;
   max-height: 500px;

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}

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}
             />
           ))
         )}