Building on it

├── src
`  `├── App.tsx `← we are here`
`  `├── index.css
`  `└── main.tsx

const [cartCount, setCartCount] = 20;
<button onClick="setCartCount(cartCount - 1)">-</button>
<span>{cartCount}</span>
<button onClick="setCartCount(cartCount + 1)">+</button>

'use client';
import { useState } from 'react';

export default function Home() {
  const [cartCount, setCartCount] = useState(20);
  return (
    <>
      <button className='w-16 bg-blue-500 text-white px-4 py-2 rounded' onClick={() => setCartCount(cartCount - 1)}>
        -
      </button>
      <span className='inline-block text-center w-16 bg-white text-blue-700 px-2 py-1 rounded-full'>{cartCount}</span>
      <button className='w-16 bg-blue-500 text-white px-4 py-2 rounded' onClick={() => setCartCount(cartCount + 1)}>
        +
      </button>
    </>
  );
}

- Split the `Add to cart` button into three separate elements.
- The 3 elements are `-` button, `cart count` display, and `+` button.
- Each button has its own `setCartCount` function(ality) to increase or decrease the cart count.

# Important snippets

- onClick={() => setCartCount(cartCount - 1)}
- onClick={() => setCartCount(cartCount + 1)}
- <span>{cartCount}</span>