Skip to content

Commit b47a957

Browse files
w3bdesignw3bdesign
committed
Design product
1 parent 0e2a376 commit b47a957

File tree

2 files changed

+44
-47
lines changed

2 files changed

+44
-47
lines changed

‎src/components/Product/SingleProduct.component.tsx

Lines changed: 35 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ const SingleProduct = ({ product }: IProductRootObject) => {
4848
}
4949

5050
return (
51-
<section className="py-8 bg-white mb-12 sm:mb-2">
51+
<section className="bg-white mb-12 sm:mb-2">
5252
{/* Show loading spinner while loading, and hide content while loading */}
5353
{isLoading ? (
5454
<div className="h-56 mt-20">
@@ -57,66 +57,63 @@ const SingleProduct = ({ product }: IProductRootObject) => {
5757
<LoadingSpinner />
5858
</div>
5959
) : (
60-
<div className="container flex flex-wrap items-center pt-4 pb-12 mx-auto ">
61-
<div className="grid grid-cols-1 gap-4 mt-16 lg:grid-cols-2 xl:grid-cols-2 md:grid-cols-2 sm:grid-cols-2">
60+
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
61+
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:gap-8">
6262
{image && (
63-
<img
64-
id="product-image"
65-
src={image.sourceUrl}
66-
alt={name}
67-
className="h-auto p-8 transition duration-500 ease-in-out transform xl:p-2 md:p-2 lg:p-2 md:hover:grow md:hover:scale-105"
68-
/>
63+
<div className="flex justify-center items-center">
64+
<img
65+
id="product-image"
66+
src={image.sourceUrl}
67+
alt={name}
68+
className="max-w-full h-auto transition duration-500 ease-in-out transform hover:scale-105"
69+
/>
70+
</div>
6971
)}
7072
{!image && (
71-
<img
72-
id="product-image"
73-
src={
74-
process.env.NEXT_PUBLIC_PLACEHOLDER_LARGE_IMAGE_URL ??
75-
placeholderFallBack
76-
}
77-
alt={name}
78-
className="h-auto p-8 transition duration-500 ease-in-out transform xl:p-2 md:p-2 lg:p-2 md:hover:grow md:hover:shadow-lg md:hover:scale-105"
79-
/>
73+
<div className="flex justify-center items-center">
74+
<img
75+
id="product-image"
76+
src={
77+
process.env.NEXT_PUBLIC_PLACEHOLDER_LARGE_IMAGE_URL ??
78+
placeholderFallBack
79+
}
80+
alt={name}
81+
className="max-w-full h-auto transition duration-500 ease-in-out transform hover:scale-105"
82+
/>
83+
</div>
8084
)}
81-
<div className="ml-8">
82-
<p className="text-3xl font-bold text-left">{name}</p>
83-
<br />
85+
<div className="flex flex-col justify-center text-center md:text-left">
86+
<h1 className="text-3xl font-bold mb-4">{name}</h1>
8487
{/* Display sale price when on sale */}
8588
{onSale && (
86-
<div className="flex">
87-
<p className="pt-1 mt-4 text-3xl text-gray-900">
89+
<div className="flex flex-col md:flex-row items-center md:items-start justify-center md:justify-start mb-4">
90+
<p className="text-3xl font-bold text-red-600 mr-4">
8891
{product.variations && filteredVariantPrice(price, '')}
8992
{!product.variations && salePrice}
9093
</p>
91-
<p className="pt-1 pl-8 mt-4 text-2xl text-gray-900 line-through">
94+
<p className="text-2xl text-gray-500 line-through">
9295
{product.variations && filteredVariantPrice(price, 'right')}
9396
{!product.variations && regularPrice}
9497
</p>
9598
</div>
9699
)}
97100
{/* Display regular price when not on sale */}
98101
{!onSale && (
99-
<p className="pt-1 mt-4 text-2xl text-gray-900"> {price}</p>
102+
<p className="text-3xl font-bold mb-4">{price}</p>
100103
)}
101-
<br />
102-
<p className="pt-1 mt-4 text-2xl text-gray-900">
103-
{DESCRIPTION_WITHOUT_HTML}
104-
</p>
104+
<p className="text-lg mb-4">{DESCRIPTION_WITHOUT_HTML}</p>
105105
{Boolean(product.stockQuantity) && (
106-
<p
107-
v-if="data.product.stockQuantity"
108-
className="pt-1 mt-4 mb-4 text-2xl text-gray-900"
109-
>
106+
<p className="text-lg mb-4">
110107
{product.stockQuantity} på lager
111108
</p>
112109
)}
113110
{product.variations && (
114-
<p className="pt-1 mt-4 text-xl text-gray-900">
115-
<span className="py-2">Varianter</span>
111+
<div className="mb-4">
112+
<label htmlFor="variant" className="block text-lg mb-2">Varianter</label>
116113
<select
117114
id="variant"
118115
name="variant"
119-
className="block w-80 px-6 py-2 bg-white border border-gray-500 rounded-lg focus:outline-none focus:shadow-outline"
116+
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
120117
onChange={(e) => {
121118
setSelectedVariation(Number(e.target.value));
122119
}}
@@ -133,13 +130,9 @@ const SingleProduct = ({ product }: IProductRootObject) => {
133130
},
134131
)}
135132
</select>
136-
</p>
133+
</div>
137134
)}
138-
<div className="pt-1 mt-2">
139-
{
140-
// Display default AddToCart button if we do not have variations.
141-
// If we do, send the variationId to AddToCart button
142-
}
135+
<div className="flex justify-center md:justify-start">
143136
{product.variations && (
144137
<AddToCart
145138
product={product}

‎src/components/UI/Button.component.tsx

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { ReactNode } from 'react';
22

3-
type TButtonColors = 'red' | 'blue';
3+
type TButtonColors = 'red' | 'blue' | 'yellow';
44

55
interface IButtonProps {
66
handleButtonClick?: () => void;
@@ -14,7 +14,7 @@ interface IButtonProps {
1414
* @function PageTitle
1515
* @param {void} handleButtonClick - Handle button click
1616
* @param {boolean?} buttonDisabled - Is button disabled?
17-
* @param {color?} TButtonColors - Color for button, either red or blue
17+
* @param {color?} TButtonColors - Color for button, either red, blue, or yellow
1818
* @param {ReactNode} children - Children for button
1919
* @returns {JSX.Element} - Rendered component
2020
*/
@@ -27,11 +27,15 @@ const Button = ({
2727
<button
2828
onClick={handleButtonClick}
2929
disabled={buttonDisabled}
30-
className={`px-2 lg:px-4 py-2 font-bold bg-blue-500 border border-gray-400 border-solid rounded text-white ease-in-out transition-all duration-300 disabled:opacity-50
30+
className={`px-4 py-3 font-bold border border-gray-400 border-solid rounded ease-in-out transition-all duration-300 disabled:opacity-50
3131
${
3232
color === 'blue'
33-
? 'bg-blue-500 hover:bg-blue-600'
34-
: 'bg-red-500 hover:bg-red-600'
33+
? 'bg-blue-500 hover:bg-blue-600 text-white'
34+
: color === 'red'
35+
? 'bg-red-500 hover:bg-red-600 text-white'
36+
: color === 'yellow'
37+
? 'bg-yellow-400 hover:bg-yellow-500 text-black'
38+
: 'bg-blue-500 hover:bg-blue-600 text-white'
3539
}
3640
`}
3741
>

0 commit comments

Comments
 (0)