Merge branch 'master' of gitlab.com:pawnstar/sos-nextjs
commit
3140b5d315
@ -0,0 +1,17 @@
|
||||
{
|
||||
// Use IntelliSense to learn about possible attributes.
|
||||
// Hover to view descriptions of existing attributes.
|
||||
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"type": "node",
|
||||
"request": "launch",
|
||||
"name": "Launch Program",
|
||||
"skipFiles": [
|
||||
"<node_internals>/**"
|
||||
],
|
||||
"program": "${workspaceFolder}\\index.js"
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -0,0 +1,36 @@
|
||||
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/sock/${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>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,138 @@
|
||||
.card{
|
||||
background:white;
|
||||
display:inline-block;
|
||||
position:relative;
|
||||
margin:20px 5%;
|
||||
width:90%;
|
||||
top:0;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
||||
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
|
||||
}
|
||||
|
||||
.card:last-child {
|
||||
/* Fixes the odd flickering bug */
|
||||
margin-bottom:0px;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||
top:-3px;
|
||||
}
|
||||
|
||||
.card h3{
|
||||
font-family:'Cormorant Infant', serif;
|
||||
font-weight:600;
|
||||
font-size:22px;
|
||||
border-bottom:solid 1px black;
|
||||
text-align:center;
|
||||
margin:5px;
|
||||
}
|
||||
|
||||
|
||||
.card h3{
|
||||
border-bottom:none;
|
||||
}
|
||||
.card h3 a{
|
||||
color:inherit;
|
||||
text-decoration:none;
|
||||
border-bottom:solid 1px black;
|
||||
}
|
||||
|
||||
.card a:hover{
|
||||
color: #760c88;
|
||||
border-color: #760c88;
|
||||
transition: .2s ease-in-out;
|
||||
transition-property: color, border-color;
|
||||
}
|
||||
|
||||
.card .card-text {
|
||||
margin:0;
|
||||
left: 40%;
|
||||
top: 34px;
|
||||
}
|
||||
|
||||
.card .card-text p:first-child{
|
||||
margin-top:0px;
|
||||
}
|
||||
|
||||
.card .card-text{
|
||||
padding:10px;
|
||||
}
|
||||
|
||||
.card .card-text:after{
|
||||
content:'';
|
||||
display:block;
|
||||
clear:both;
|
||||
}
|
||||
|
||||
.card .card-image{
|
||||
width: 40%;
|
||||
padding: 10px;
|
||||
position:relative;
|
||||
float:left;
|
||||
}
|
||||
|
||||
.card img{
|
||||
width:80%;
|
||||
padding:10px;
|
||||
background: #d4d4fb;
|
||||
border: solid 1px #dec8e2;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
||||
}
|
||||
|
||||
.card p, .card a{
|
||||
color:black;
|
||||
opacity:.87;
|
||||
}
|
||||
|
||||
.card .card-details{
|
||||
font-family: 'Cormorant SC', serif;
|
||||
list-style:none;
|
||||
text-align:center;
|
||||
margin-top:0px;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
.card .card-details.out-of-stock{
|
||||
opacity:.54;
|
||||
}
|
||||
|
||||
.card .card-details li a.disabled{
|
||||
opacity:.54;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
.card .card-details.out-of-stock li.numberInStock{
|
||||
color:#5d0000
|
||||
}
|
||||
|
||||
.card .card-details li{
|
||||
display:inline-block;
|
||||
margin-right:20px;
|
||||
}
|
||||
|
||||
.card .card-details .numberInStock{
|
||||
font-weight:600;
|
||||
}
|
||||
|
||||
.card .card-details li:last-child{
|
||||
margin-right:0;
|
||||
}
|
||||
.catalogue{
|
||||
max-width:2000px;
|
||||
column-count: 3;
|
||||
}
|
||||
|
||||
@media (max-width:400px){
|
||||
.card .card-image{
|
||||
width:100%;
|
||||
float:none;
|
||||
padding:0;
|
||||
display: block;
|
||||
margin: 10px auto;
|
||||
text-align: center;
|
||||
}
|
||||
.card .card-image img{
|
||||
margin: 10px;
|
||||
}
|
||||
}
|
||||
@ -1,25 +0,0 @@
|
||||
import {useReducer} from 'react'
|
||||
|
||||
const errorReducer = (errors, action) => {
|
||||
switch (action.type) {
|
||||
case 'set_errors':
|
||||
const newErrors = {}
|
||||
for(const field of action.errors)
|
||||
newErrors[field.param] = field.msg
|
||||
return newErrors
|
||||
|
||||
case 'clear_error':
|
||||
console.log('clear_error', action)
|
||||
return {
|
||||
...errors,
|
||||
[action.field]: undefined
|
||||
}
|
||||
|
||||
default:
|
||||
return errors
|
||||
}
|
||||
}
|
||||
|
||||
export default function useErrorReducer(initialState = {}){
|
||||
return useReducer( errorReducer )
|
||||
}
|
||||
@ -0,0 +1,7 @@
|
||||
import {useEffect} from 'react'
|
||||
|
||||
export default function useAccountRedirect(user){
|
||||
useEffect(()=>{
|
||||
if(user) Router.push('/account')
|
||||
}, [user])
|
||||
}
|
||||
@ -1,11 +1,22 @@
|
||||
import React from 'react'
|
||||
|
||||
import Hero from '~/components/hero'
|
||||
import Card from '~/components/card'
|
||||
|
||||
const Index = () => (
|
||||
Index.getInitialProps = async ({ctx})=>{
|
||||
const {data: items} = await ctx.axios.get('/api/items')
|
||||
return {items}
|
||||
}
|
||||
|
||||
export default function Index({items}){
|
||||
return (
|
||||
<>
|
||||
<Hero/>
|
||||
<p>Homepage</p>
|
||||
<div className="cardContainer">
|
||||
{items.map(item=>
|
||||
<Card item={item}/>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
export default Index
|
||||
)
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue