Skip to content

Commit e2f9643

Browse files
w3bdesignw3bdesign
authored
Merge pull request #142 from w3bdesign/development
Development
2 parents 6f77c90 + 6e60393 commit e2f9643

File tree

10 files changed

+201
-214
lines changed

10 files changed

+201
-214
lines changed

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

Lines changed: 55 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,9 @@ import {
1212
} from '../../../utils/functions/functions';
1313

1414
import CartItem from 'components/Cart/CartPage/CartItem.component';
15-
import { WOO_CONFIG } from 'utils/config/nextConfig';
15+
import PageTitle from 'components/Header/PageTitle.component';
1616

17+
import { WOO_CONFIG } from 'utils/config/nextConfig';
1718
import { GET_CART } from 'utils/const/GQL_QUERIES';
1819

1920
/*
@@ -42,68 +43,61 @@ const CartItemsContainer = () => {
4243
// TODO We will focus on fetching the cart before we add more functionality
4344

4445
return (
45-
<section className="py-8 bg-white">
46-
<div className="container flex flex-wrap items-center pt-4 pb-12 mx-auto">
47-
<nav id="store" className="top-0 w-full px-6 py-1">
48-
<div className="container flex flex-wrap items-center justify-between w-full px-2 py-3 mx-auto mt-0">
49-
<a
50-
className="mt-6 text-xl font-bold tracking-wide text-gray-800 no-underline uppercase hover:no-underline"
51-
href="#"
52-
>
53-
Handlekurv
54-
</a>
55-
</div>
56-
</nav>
46+
<>
47+
<PageTitle title="Handlekurv" />
5748

58-
{cart ? (
59-
<div className="p-6 mx-auto mt-5">
60-
<table className="table-auto">
61-
<thead>
62-
<tr>
63-
<th className="px-4 py-2" scope="col" />
64-
<th className="px-4 py-2" scope="col" />
65-
<th className="px-4 py-2" scope="col">
66-
Produkt
67-
</th>
68-
<th className="px-4 py-2" scope="col">
69-
Pris
70-
</th>
71-
<th className="px-4 py-2" scope="col">
72-
Antall
73-
</th>
74-
<th className="px-4 py-2" scope="col">
75-
Total
76-
</th>
77-
</tr>
78-
</thead>
79-
<tbody>
80-
{cart.products.length &&
81-
cart.products.map((item) => (
82-
<CartItem
83-
key={item.productId}
84-
item={item}
85-
// updateCartProcessing={updateCartProcessing}
86-
// products={cart.products}
87-
// handleRemoveProductClick={handleRemoveProductClick}
88-
// updateCart={updateCart}
89-
/>
90-
))}
91-
</tbody>
92-
</table>
93-
</div>
94-
) : (
95-
<div className="p-6 mx-auto mt-5">
96-
<h2 className="text-lg">Ingen varer i handlekurven</h2>
49+
<section className="py-8 bg-white">
50+
<div className="container flex flex-wrap items-center mx-auto">
51+
{cart ? (
52+
<div className="p-6 mx-auto mt-5">
53+
<table className="table-auto">
54+
<thead>
55+
<tr>
56+
<th className="px-4 py-2" scope="col" />
57+
<th className="px-4 py-2" scope="col" />
58+
<th className="px-4 py-2" scope="col">
59+
Produkt
60+
</th>
61+
<th className="px-4 py-2" scope="col">
62+
Pris
63+
</th>
64+
<th className="px-4 py-2" scope="col">
65+
Antall
66+
</th>
67+
<th className="px-4 py-2" scope="col">
68+
Total
69+
</th>
70+
</tr>
71+
</thead>
72+
<tbody>
73+
{cart.products.length &&
74+
cart.products.map((item) => (
75+
<CartItem
76+
key={item.productId}
77+
item={item}
78+
// updateCartProcessing={updateCartProcessing}
79+
// products={cart.products}
80+
// handleRemoveProductClick={handleRemoveProductClick}
81+
// updateCart={updateCart}
82+
/>
83+
))}
84+
</tbody>
85+
</table>
86+
</div>
87+
) : (
88+
<div className="p-6 mx-auto mt-5">
89+
<h2 className="text-lg">Ingen varer i handlekurven</h2>
9790

98-
<button className="px-4 py-2 m-4 font-bold uppercase bg-white border border-gray-400 border-solid rounded hover:bg-gray-400">
99-
<Link href="/produkter">
100-
<a>Legg til varer</a>
101-
</Link>
102-
</button>
103-
</div>
104-
)}
105-
</div>
106-
</section>
91+
<button className="px-4 py-2 m-4 font-bold uppercase bg-white border border-gray-400 border-solid rounded hover:bg-gray-400">
92+
<Link href="/produkter">
93+
<a>Legg til varer</a>
94+
</Link>
95+
</button>
96+
</div>
97+
)}
98+
</div>
99+
</section>
100+
</>
107101
);
108102
};
109103

‎components/Category/Categories.component.jsx

Lines changed: 18 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,32 @@
11
import { v4 as uuidv4 } from 'uuid';
22

3+
import PageTitle from 'components/Header/PageTitle.component';
4+
35
/**
46
* Map over the categories and display them individually.
57
* Uses uuidv4 for unique key IDs
68
* @param {Object} categories
79
*/
810
const Categories = ({ categories }) => {
911
return (
10-
<section className="py-8 bg-white">
11-
<div className="container flex flex-wrap items-center pt-4 pb-12 mx-auto">
12-
<nav id="store" className="top-0 w-full px-6 py-1">
13-
<div className="container w-full px-2 py-3 mx-auto mt-0 mt-16 text-center">
14-
<a className="text-xl font-bold tracking-wide text-gray-800 no-underline uppercase hover:no-underline">
15-
Kategorier
16-
</a>
17-
</div>
18-
</nav>
12+
<>
13+
<PageTitle title="Kategorier" />
1914

20-
{categories.map(({ name }) => (
21-
<div
22-
key={uuidv4()}
23-
className="flex flex-col w-full p-6 md:w-1/3 xl:w-1/4"
24-
>
25-
<div className="flex items-center justify-center p-6 text-center border border-gray-300 rounded-lg shadow hover:shadow-outline">
26-
<p className="text-lg">{name}</p>
15+
<section className="py-8 bg-white">
16+
<div className="container flex flex-wrap items-center mx-auto">
17+
{categories.map(({ name }) => (
18+
<div
19+
key={uuidv4()}
20+
className="flex flex-col w-full p-6 md:w-1/3 xl:w-1/4"
21+
>
22+
<div className="flex items-center justify-center p-6 text-center border border-gray-300 rounded-lg shadow hover:shadow-outline">
23+
<p className="text-lg">{name}</p>
24+
</div>
2725
</div>
28-
</div>
29-
))}
30-
</div>
31-
</section>
26+
))}
27+
</div>
28+
</section>
29+
</>
3230
);
3331
};
3432

‎components/Header/Navbar.component.jsx

Lines changed: 16 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -19,24 +19,22 @@ const Navbar = () => {
1919
className="order-3 hidden w-full md:flex md:items-center md:w-auto md:order-1"
2020
id="menu"
2121
>
22-
<nav>
23-
<ul className="items-center justify-between pt-4 text-base text-gray-700 md:flex md:pt-0">
24-
<li>
25-
<Link href="/produkter">
26-
<a className="inline-block px-4 py-2 no-underline hover:text-black hover:underline">
27-
Produkter
28-
</a>
29-
</Link>
30-
</li>
31-
<li>
32-
<Link href="/kategorier">
33-
<a className="inline-block px-4 py-2 no-underline hover:text-black hover:underline">
34-
Kategorier
35-
</a>
36-
</Link>
37-
</li>
38-
</ul>
39-
</nav>
22+
<ul className="items-center justify-between pt-4 text-base text-gray-700 md:flex md:pt-0">
23+
<li>
24+
<Link href="/produkter">
25+
<a className="inline-block px-4 py-2 no-underline hover:text-black hover:underline">
26+
Produkter
27+
</a>
28+
</Link>
29+
</li>
30+
<li>
31+
<Link href="/kategorier">
32+
<a className="inline-block px-4 py-2 no-underline hover:text-black hover:underline">
33+
Kategorier
34+
</a>
35+
</Link>
36+
</li>
37+
</ul>
4038
</div>
4139
<div className="order-1 md:order-2">
4240
<Link href="/">

‎components/Header/PageTitle.component.jsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
const PageTitle = ({ title }) => {
2+
return (
3+
<section className="py-4 bg-white">
4+
<div className="container flex flex-wrap items-center mx-auto">
5+
<div className="container py-2 mx-auto mt-16 text-center">
6+
<span className="text-xl font-bold tracking-wide text-gray-800 no-underline uppercase hover:no-underline">
7+
{title}
8+
</span>
9+
</div>
10+
</div>
11+
</section>
12+
);
13+
};
14+
15+
export default PageTitle;

‎components/Index/Hero.component.jsx

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,27 +3,25 @@
33
*/
44
const Hero = () => {
55
return (
6-
<>
7-
<section
8-
id="hero"
9-
className="flex w-full pt-12 mx-auto mt-12 bg-right bg-cover md:pt-0 md:items-center"
10-
>
11-
<div className="container mx-auto">
12-
<div className="flex flex-col items-start justify-center w-full px-6 tracking-wide lg:w-1/2">
13-
<h1 className="my-4 text-2xl text-black">
14-
Stripete Zig Zag Jigsaw Pute Sett
15-
</h1>
6+
<section
7+
id="hero"
8+
className="flex w-full pt-12 mx-auto mt-24 bg-right bg-cover md:pt-0 md:items-center"
9+
>
10+
<div className="container mx-auto">
11+
<div className="flex flex-col items-start justify-center w-full px-6 tracking-wide lg:w-1/2">
12+
<h1 className="my-4 text-2xl text-black">
13+
Stripete Zig Zag Jigsaw Pute Sett
14+
</h1>
1615

17-
<a
18-
className="inline-block px-6 py-3 text-xl leading-relaxed border border-gray-600 border-solid hover:underline"
19-
href="#"
20-
>
21-
Kjøp Nå
22-
</a>
23-
</div>
16+
<a
17+
className="inline-block px-6 py-3 text-xl leading-relaxed border border-gray-600 border-solid hover:underline"
18+
href="#"
19+
>
20+
Kjøp Nå
21+
</a>
2422
</div>
25-
</section>
26-
</>
23+
</div>
24+
</section>
2725
);
2826
};
2927

0 commit comments

Comments
 (0)