diff --git a/src/App.jsx b/src/App.jsx index 58dacbd..c144e38 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,6 +1,7 @@ import styles from './App.module.scss' import SneakersImage from './assets/images/sneakers-image.jpg' import { FaRegUser } from 'react-icons/fa' +import React from 'react' function Header() { const handleChange = event => { @@ -23,7 +24,13 @@ function Header() { } function Product() { - function handleClick() { + const [isLiked, setIsLiked] = React.useState(false) + + const toggleLike = () => { + setIsLiked(!isLiked) + } + + function handleAddClick() { console.log('Working!') } @@ -33,7 +40,25 @@ function Product() {

Sneakers Red & White 2025

- +
+ + +

NIKE

$38.00

diff --git a/src/App.module.scss b/src/App.module.scss index cec9515..94683dc 100644 --- a/src/App.module.scss +++ b/src/App.module.scss @@ -97,21 +97,27 @@ font-size: 18px; } - button { - border: 1px solid $primary-color; - background-color: $white-color; - color: $primary-color; - border-radius: 5px; - outline: 0; + .actions { + display: flex; + align-items: center; + gap: 5px; - font-size: 20px; - padding: 5px 10px; + button { + border: 1px solid $primary-color; + background-color: $white-color; + color: $primary-color; + border-radius: 5px; + outline: 0; - cursor: pointer; + font-size: 20px; + padding: 5px 10px; - &:hover { - background-color: $seconday-color; - color: $white-color; + cursor: pointer; + + &:hover { + background-color: $seconday-color; + color: $white-color; + } } } }