import React, {useState} from 'react' import Head from 'next/head' import Router from 'next/router' import {FormController, NumInput, Button} from '~/components/form' import isNum from 'validator/lib/isNumeric' import styles from './slug.module.css' Item.getInitialProps = async function({ctx: {axios, query: {slug}}}){ const {data: item} = await axios.get(`/api/items/by-slug/${slug}`) if(!item) { const err = new Error("Not found") err.status = 404 throw err; } return {item} } // TODO: Modal with full image size on clicking preview export default function Item({item, cart}){ // Pick first one with featured flag or 0 const featuredIndex = item.images.reduce((p, im, i) => ((p !== undefined) ? p : (im.featured ? i : undefined)), undefined) || 0 const [selectedIndex, setSelected] = useState(featuredIndex); const numInCart = cart?.items.find(i => i.item.uuid === item.uuid)?.count || 0 return ( <> {item.name}
{item.images && item.images.length > 0 && (
{item.images && item.images.length > 1 &&
{item.images.map((image, index) => ( setSelected(index)} className={index === selectedIndex ? styles.selectedImage : undefined} src={`/api/images/${image.uuid}/thumb`} /> ))}
}
)}

{item.name}

{ item.description.split('\n').map(p=>p.trim()).filter(p=>p !== '').map((p,i)=>

{p}

) } Router.push('/store/cart')}> isNum(value, {no_symbols: true})} hint="Enter the number of socks to add to your cart" />
Price: ${(parseInt(item.price_cents) / 100).toFixed(2)} each { item.number_in_stock ? item.number_in_stock + ' in stock' : 'Out of stock' } {numInCart} in cart

Additional Information

All socks are only available in adult medium sizes (approximately US Men's size 10 - 13 depending on stretching) at the moment - we're working on getting more sizes available but not quite ready for that yet.

All purchases are shipped within a few days of your purchase, (USPS first class).

) }