You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
37 lines
1.2 KiB
JavaScript
37 lines
1.2 KiB
JavaScript
import React from 'react'
|
|
import Link from 'next/link'
|
|
|
|
import styles from './style.module.css'
|
|
|
|
export default function Card({item, numberInCart}) {
|
|
let featuredImage = item.images.filter(i=>i.featured)[0]
|
|
if(!featuredImage) featuredImage = item.images[0]
|
|
|
|
return (
|
|
<div className={styles.card}>
|
|
<h3><Link href={`/store/item/${item.urlslug}`}><a>{item.name}</a></Link></h3>
|
|
<div className={styles['card-image']}>
|
|
{featuredImage && <img src={`/api/images/${featuredImage.uuid}/thumb`} />}
|
|
</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} pairs in stock`
|
|
: 'Currently out of stock'
|
|
}
|
|
</li>
|
|
<li><Link href={`/store/sock/${item.urlSlug}`}><a>Details</a></Link></li>
|
|
{
|
|
item.number_in_stock > 0 && (
|
|
<li>
|
|
<a disabled={!(item.number_in_stock > 0)}>Add to Cart</a>
|
|
</li>
|
|
)
|
|
}
|
|
</ul>
|
|
</div>
|
|
)
|
|
}
|