Merge branch 'main' into ADD-image-hover-mb

.vscode/settings.json

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

src/App.css

@@ -1,5 +1,5 @@
 body {
-  background-color: #402010;
+  background-color: #402090;
   color: antiquewhite;
   padding: 2em;
 }
@@ -30,6 +30,11 @@ main {
   border-radius: 8px;
   margin: 0.5em;
   width: 260px;
+  cursor: pointer;
+}
+
+.selected {
+  border: 1px solid #ff00d0;
 }
 
 .beer-card:hover{
@@ -39,7 +44,7 @@ main {
 .beer-image {
   width: 100%;
   max-height: 500px;
-
+  transition: 0.3s;
 }
 
 .beer-image:hover{
@@ -69,6 +74,7 @@ main {
   max-width: 90%;
 }
 
+
 .beer-card h2 {
   font-size: medium;
   margin-bottom: 4px;
@@ -96,3 +102,7 @@ main {
   position: absolute;
   overflow: hidden;
 }
+
+.beer-card:hover, .beer-card:active {
+  background-color: greenyellow;
+}

src/components/BeerCard.jsx

@@ -1,11 +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}
             />
           ))
         )}

src/components/Header.jsx

@@ -1,3 +1,3 @@
 export default function Header() {
-  return <h1>The Beers! (hey that's a bad joke) 🍻</h1>
+  return <h1>🍻 IPA's 🍻</h1>
 }