Skip to content

Commit 140c3ec

Browse files
w3bdesignw3bdesign
committed
Implemented design of mobile cart
Next is to implement cart functionality and move it into a separate component
1 parent dae1616 commit 140c3ec

File tree

1 file changed

+57
-110
lines changed

1 file changed

+57
-110
lines changed

‎components/Cart/CartPage/MobileCart.component.jsx‎

Lines changed: 57 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -1,133 +1,80 @@
1+
import { v4 } from 'uuid';
2+
13
import MobileCartItem from './MobileCartItem.component';
4+
import SVGX from 'components/SVG/SVGX.component';
25

36
const MobileCart = ({ cart, handleRemoveProductClick, updateCart }) => {
47
return (
5-
<section
6-
//className="container mx-auto bg-white md:hidden lg:hidden xl:hidden"
7-
className="bg-white md:hidden lg:hidden xl:hidden"
8-
>
8+
<section className="bg-white md:hidden lg:hidden xl:hidden">
99
<div className="flex items-center justify-center">
1010
<div className="container">
11-
<table
12-
className="flex flex-row flex-no-wrap my-5 overflow-hidden rounded-lg sm:bg-white sm:shadow-lg"
13-
style={{ width: '365px' }}
14-
>
11+
<table className="flex flex-row flex-no-wrap mx-auto my-5 overflow-hidden rounded-lg sm:bg-white sm:shadow-lg">
1512
<thead className="text-black">
16-
<tr className="flex flex-col mb-2 bg-gray-200 rounded-l-lg flex-no wrap sm:table-row sm:rounded-none sm:mb-0">
17-
<th className="p-3 text-left">Fjern</th>
18-
<th className="p-3 text-left">Navn</th>
19-
<th className="p-3 text-left">Pris</th>
20-
<th className="p-3 text-left">Antall</th>
21-
<th className="p-3 text-left">Totalpris</th>
22-
</tr>
23-
<tr className="flex flex-col mb-2 bg-gray-200 rounded-l-lg flex-no wrap sm:table-row sm:rounded-none sm:mb-0">
24-
<th className="p-3 text-left">Fjern</th>
25-
<th className="p-3 text-left">Navn</th>
26-
<th className="p-3 text-left">Pris</th>
27-
<th className="p-3 text-left">Antall</th>
28-
<th className="p-3 text-left">Totalpris</th>
29-
</tr>
30-
<tr className="flex flex-col mb-2 bg-gray-200 rounded-l-lg flex-no wrap sm:table-row sm:rounded-none sm:mb-0">
31-
<th className="p-3 text-left">Fjern</th>
32-
<th className="p-3 text-left">Navn</th>
33-
<th className="p-3 text-left">Pris</th>
34-
<th className="p-3 text-left">Antall</th>
35-
<th className="p-3 text-left">Totalpris</th>
36-
</tr>
37-
<tr className="flex flex-col mb-2 bg-gray-200 rounded-l-lg flex-no wrap sm:table-row sm:rounded-none sm:mb-0">
38-
<th className="p-3 text-left">Fjern</th>
39-
<th className="p-3 text-left">Navn</th>
40-
<th className="p-3 text-left">Pris</th>
41-
<th className="p-3 text-left">Antall</th>
42-
<th className="p-3 text-left">Totalpris</th>
43-
</tr>
13+
{cart.products.length &&
14+
cart.products.map(() => (
15+
<tr
16+
key={v4()}
17+
className="flex flex-col mb-2 bg-white rounded-l-lg flex-no wrap sm:table-row sm:rounded-none sm:mb-0"
18+
>
19+
<th className="p-3 text-left">Fjern</th>
20+
<th className="p-3 text-left">Navn</th>
21+
<th className="p-3 text-left">Pris</th>
22+
<th className="p-3 text-left">Antall</th>
23+
<th className="p-3 text-left">Totalpris</th>
24+
</tr>
25+
))}
4426
</thead>
27+
4528
<tbody className="flex-1 sm:flex-none">
46-
<tr className="flex flex-col mb-2 flex-no wrap sm:table-row sm:mb-0">
47-
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
48-
X
49-
</td>
50-
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
51-
WordPress Pennant
52-
</td>
53-
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
54-
kr 18.00
55-
</td>
56-
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
57-
1
58-
</td>
59-
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
60-
kr 18.00
61-
</td>
62-
</tr>
63-
<tr className="flex flex-col mb-2 flex-no wrap sm:table-row sm:mb-0">
64-
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
65-
X
66-
</td>
67-
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
68-
WordPress Pennant
69-
</td>
70-
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
71-
kr 18.00
72-
</td>
73-
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
74-
1
75-
</td>
76-
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
77-
kr 18.00
78-
</td>
79-
</tr>
80-
<tr className="flex flex-col mb-2 flex-no wrap sm:table-row sm:mb-0">
81-
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
82-
X
83-
</td>
84-
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
85-
WordPress Pennant
86-
</td>
87-
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
88-
kr 18.00
89-
</td>
90-
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
91-
1
92-
</td>
93-
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
94-
kr 18.00
95-
</td>
96-
</tr>
97-
<tr className="flex flex-col mb-2 flex-no wrap sm:table-row sm:mb-0">
98-
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
99-
X
100-
</td>
101-
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
102-
WordPress Pennant
103-
</td>
104-
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
105-
kr 18.00
106-
</td>
107-
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
108-
1
109-
</td>
110-
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
111-
kr 18.00
112-
</td>
113-
</tr>
29+
{/*
30+
{cart.products.length &&
31+
cart.products.map((item) => (
32+
33+
<MobileCartItem
34+
key={item.productId}
35+
item={item}
36+
products={cart.products}
37+
handleRemoveProductClick={handleRemoveProductClick}
38+
updateCart={updateCart}
39+
/>
40+
))}
41+
42+
*/}
43+
44+
{cart.products.length &&
45+
cart.products.map((item) => (
46+
<tr className="flex flex-col mb-2 flex-no wrap sm:table-row sm:mb-0">
47+
<td className="h-12 p-3 border-2 border-gray-400 ">
48+
<SVGX />
49+
</td>
50+
<td className="h-12 p-3 border-l-2 border-r-2 border-gray-400 ">
51+
{item.name}
52+
</td>
53+
<td className="h-12 p-3 border-2 border-gray-400 ">
54+
kr{item.price.toFixed(2)}
55+
</td>
56+
<td className="h-12 p-3 border-l-2 border-r-2 border-gray-400 ">
57+
{item.qty}
58+
</td>
59+
<td className="h-12 p-3 border-2 border-gray-400 ">
60+
{item.totalPrice}
61+
</td>
62+
</tr>
63+
))}
11464
</tbody>
11565
</table>
11666
</div>
11767
</div>
11868

119-
<div className="flex flex-col justify-between">
120-
{cart.products.length &&
121-
cart.products.map((item) => (
122-
<MobileCartItem
69+
{/*
70+
<MobileCartItem
12371
key={item.productId}
12472
item={item}
12573
products={cart.products}
12674
handleRemoveProductClick={handleRemoveProductClick}
12775
updateCart={updateCart}
12876
/>
129-
))}
130-
</div>
77+
*/}
13178
</section>
13279
);
13380
};

0 commit comments

Comments
 (0)