sos-nextjs/components/card/card.js

import React from 'react'
import Link from 'next/link'

import useCart, {useSetCart} from '~/hooks/useCart'
import styles from './style.module.css'
import axios from 'axios'

export default function Card({item}) {
  const cart = useCart()
  const setCart = useSetCart()
  const numInCart = cart?.items?.find(i => i.item.uuid === item.uuid)?.count || 0
  let featuredImage = item.images.find(i=>i.featured) || item.images[0]

  const addToCart = async ev => {
    if(ev) ev.preventDefault()

    const {data: newCart} = await axios.post(`/api/cart/add/${item.uuid}`, {count: 1})
    setCart(newCart)
  }

  return (
    <div className={styles.card}>
      <h3><Link href={`/store/item/${item.urlslug}`}><a>{item.name}</a></Link></h3>
      {featuredImage && (
        <div className={styles['card-image']}>
          <picture>
            <source srcset={`/api/images/${featuredImage.uuid}/thumb.webp`} type="image/webp"/>
            <img src={`/api/images/${featuredImage.uuid}/thumb.png`} />
          </picture>
        </div>
      )}
      <div className={styles['card-text']}>{item.description}</div>
        <ul className={styles['card-details'] + (item.number_in_stock > 0 ? '' : ' ' + styles['out-of-stock'])}>
          <li className={styles['number-in-stock']}>
            {
              item.number_in_stock > 0
                ? `${item.number_in_stock} in stock`
                : 'Currently out of stock'
            }
          </li>
          <li><Link href={`/store/item/${item.urlslug}`}><a>Details</a></Link></li>
          {
            item.number_in_stock > 0 && (
              <li>
                <button className="buttonLink" onClick={addToCart}>Add to Cart</button>
              </li>
            )
          }
          {numInCart > 0 && (
            <li>
              ({numInCart} in <Link href="/store/cart"><a>cart</a></Link>)
            </li>
          )}
        </ul>
    </div>
  )
}