blob: 99d8d93c2608e82e2cf25c66c75a71af6724bb18 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
|
import React from 'react';
import styled from 'styled-components';
import Link from 'next/link';
import Title from './styles/Title';
import AddToCart from './AddToCart';
import DeleteItem from './DeleteItem';
import formatMoney from '../lib/formatMoney';
import PropTypes from 'prop-types';
const Item = styled.div`
background: white;
border: 1px solid ${props => props.theme.offWhite};
box-shadow: ${props => props.theme.bs};
position: relative;
display: grid;
align-content: start;
grid-auto-rows: fit-content;
img {
width: 100%;
}
p {
font-size: 14px;
line-height: 2;
font-weight: 600;
padding: 0 3rem;
font-size: 1.5rem;
}
.buttonList {
display: grid;
border-top: 1px solid ${props => props.theme.lightgrey};
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-gap: 1px;
background: ${props => props.theme.lightgrey};
align-self: end;
& > * {
background: white;
border: 0;
font-size: 1rem;
padding: 1rem;
}
}
`;
const PriceTag = styled.span`
background: ${props => props.theme.red};
transform: rotate(3deg);
color: white;
font-weight: 600;
padding: 5px;
line-height: 1;
font-size: 3rem;
display: inline-block;
position: absolute;
top: -3px;
right: -3px;
`;
class ItemComponent extends React.Component {
static propTypes = {
item: PropTypes.object.isRequired,
};
render() {
const item = this.props.item;
return (
<Item key={item.id}>
{item.image ? <img src={item.image} alt={item.title} /> : null}
<Title>
<Link
href={{
pathname: '/item',
query: { id: item.id },
}}
>
<a>{item.title}</a>
</Link>
</Title>
<PriceTag>{formatMoney(item.price)}</PriceTag>
<p>{item.description}</p>
<div className="buttonList">
<Link
href={{
pathname: '/update',
query: { id: item.id },
}}
>
<a>Edit ✏️</a>
</Link>
<AddToCart id={item.id} />
<DeleteItem id={item.id} />
</div>
</Item>
);
}
}
export default ItemComponent;
|
