Skip to content

Commit

Permalink
70% ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@larbi-ishak
larbi-ishak committed Jul 23, 2023
1 parent ed772e1 commit 1d8915a
Show file tree
Hide file tree
Showing 7 changed files with 377 additions and 36 deletions.
200 changes: 200 additions & 0 deletions data/products.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,26 @@
"date": "12-03-2013",
"price": 10,
"comprimes": "30 comprimes",
"utilisation": "6 ans et plus",
"mode d'emploi": "1 par jour",
"indications":[
{
"name": "reninforce immune system"
},
{
"name": "anti oxydant"
},
{
"name": "fatigue passagere"
}

],
"composantes": [
{
"composanteActive": "Zinc",
"concentration": "200mg"
}
],
"image": "https://images.unsplash.com/photo-1510798831971-661eb04b3739?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80"
},
{
Expand All @@ -18,6 +38,26 @@
"date": "12-03-2013",
"price": 20,
"comprimes": "30 comprimes",
"utilisation": "6 ans et plus",
"mode d'emploi": "1 par jour",
"indications":[
{
"name": "reninforce immune system"
},
{
"name": "anti oxydant"
},
{
"name": "fatigue passagere"
}

],
"composantes": [
{
"composanteActive": "Zinc",
"concentration": "200mg"
}
],
"image": "https://images.unsplash.com/photo-1510798831971-661eb04b3739?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80"
},
{
Expand All @@ -28,6 +68,26 @@
"date": "12-03-2013",
"price": 30,
"comprimes": "30 comprimes",
"utilisation": "6 ans et plus",
"mode d'emploi": "1 par jour",
"indications":[
{
"name": "reninforce immune system"
},
{
"name": "anti oxydant"
},
{
"name": "fatigue passagere"
}

],
"composantes": [
{
"composanteActive": "Zinc",
"concentration": "200mg"
}
],
"image": "https://images.unsplash.com/photo-1510798831971-661eb04b3739?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80"
},
{
Expand All @@ -38,6 +98,26 @@
"date": "12-03-2013",
"price": 40,
"comprimes": "30 comprimes",
"utilisation": "6 ans et plus",
"mode d'emploi": "1 par jour",
"indications":[
{
"name": "reninforce immune system"
},
{
"name": "anti oxydant"
},
{
"name": "fatigue passagere"
}

],
"composantes": [
{
"composanteActive": "Zinc",
"concentration": "200mg"
}
],
"image": "https://images.unsplash.com/photo-1510798831971-661eb04b3739?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80"
},
{
Expand All @@ -48,6 +128,26 @@
"date": "12-03-2013",
"price": 50,
"comprimes": "30 comprimes",
"utilisation": "6 ans et plus",
"mode d'emploi": "1 par jour",
"indications":[
{
"name": "reninforce immune system"
},
{
"name": "anti oxydant"
},
{
"name": "fatigue passagere"
}

],
"composantes": [
{
"composanteActive": "Zinc",
"concentration": "200mg"
}
],
"image": "https://images.unsplash.com/photo-1510798831971-661eb04b3739?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80"
},
{
Expand All @@ -58,6 +158,26 @@
"date": "12-03-2013",
"price": 60,
"comprimes": "30 comprimes",
"utilisation": "6 ans et plus",
"mode d'emploi": "1 par jour",
"indications":[
{
"name": "reninforce immune system"
},
{
"name": "anti oxydant"
},
{
"name": "fatigue passagere"
}

],
"composantes": [
{
"composanteActive": "Zinc",
"concentration": "200mg"
}
],
"image": "https://images.unsplash.com/photo-1510798831971-661eb04b3739?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80"
},
{
Expand All @@ -68,6 +188,26 @@
"date": "12-03-2013",
"price": 70,
"comprimes": "30 comprimes",
"utilisation": "6 ans et plus",
"mode d'emploi": "1 par jour",
"indications":[
{
"name": "reninforce immune system"
},
{
"name": "anti oxydant"
},
{
"name": "fatigue passagere"
}

],
"composantes": [
{
"composanteActive": "Zinc",
"concentration": "200mg"
}
],
"image": "https://images.unsplash.com/photo-1510798831971-661eb04b3739?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80"
},
{
Expand All @@ -78,6 +218,26 @@
"date": "12-03-2013",
"price": 80,
"comprimes": "30 comprimes",
"utilisation": "6 ans et plus",
"mode d'emploi": "1 par jour",
"indications":[
{
"name": "reninforce immune system"
},
{
"name": "anti oxydant"
},
{
"name": "fatigue passagere"
}

],
"composantes": [
{
"composanteActive": "Zinc",
"concentration": "200mg"
}
],
"image": "https://images.unsplash.com/photo-1510798831971-661eb04b3739?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80"
},
{
Expand All @@ -88,6 +248,26 @@
"date": "12-03-2013",
"price": 90,
"comprimes": "30 comprimes",
"utilisation": "6 ans et plus",
"mode d'emploi": "1 par jour",
"indications":[
{
"name": "reninforce immune system"
},
{
"name": "anti oxydant"
},
{
"name": "fatigue passagere"
}

],
"composantes": [
{
"composanteActive": "Zinc",
"concentration": "200mg"
}
],
"image": "https://images.unsplash.com/photo-1510798831971-661eb04b3739?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80"
},
{
Expand All @@ -98,6 +278,26 @@
"date": "12-03-2013",
"price": 100,
"comprimes": "30 comprimes",
"utilisation": "6 ans et plus",
"mode d'emploi": "1 par jour",
"indications":[
{
"name": "reninforce immune system"
},
{
"name": "anti oxydant"
},
{
"name": "fatigue passagere"
}

],
"composantes": [
{
"composanteActive": "Zinc",
"concentration": "200mg"
}
],
"image": "https://images.unsplash.com/photo-1510798831971-661eb04b3739?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80"
}
],
Expand Down
8 changes: 8 additions & 0 deletions next.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'images.unsplash.com',
},
],
},
};
module.exports = nextConfig;
91 changes: 59 additions & 32 deletions pages/products/[id].js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,20 @@
import { useEffect, useState } from "react";
import { Button, Grid, Center} from "@mantine/core";
import { BadgeCard } from "@/src/components/productsComponents/mainProd";
import Link from "next/link";
import { TableScrollArea } from "@/src/components/productsComponents/inPordTable";
import { TableScrollAr } from "@/src/components/productsComponents/inTable";
import Image from "next/image";

const Product = ({ id, data, similarProds }) => {
const styles={
button: {
padding: "8px",backgroundColor: "transparent", textDecoration: "none",color: "white", border: "none"
},
buttonWrapper: {
margin: "5px"
}
}
const [quantity, setQuantity] = useState(1);
const [cart, setCart] = useState([]);

Expand Down Expand Up @@ -46,45 +59,59 @@ const Product = ({ id, data, similarProds }) => {
}
};

const {composantes, indications,image}=data
return (
<div>
Product: {JSON.stringify(data)}
<br />
quantity: {quantity}
<br />
price: {data.price * quantity}
<br />
<Link href={"/cart"}>
<button onClick={handle_add_to_cart}>Order Now</button>
</Link>
<br />
{" "}
<button onClick={() => handleQuantity("+")}>+</button>
{" "}
<button onClick={() => handleQuantity("-")}>-</button>
<br />
{/*// TODO notification that it is added to cart*/}
<button onClick={handle_add_to_cart}>Add to Cart</button>{" "}
<Grid>
<Grid.Col sm={12} md={4} >
<Center>
<Image src={image} height={250} width={250} alt="just iamge1l" />
</Center>
</Grid.Col>
<Grid.Col sm={6} md={4} >
<TableScrollArea data={composantes} />
mode d'emploi
utilisation
</Grid.Col>
<Grid.Col sm={6} md={3} >
<TableScrollAr data={indications} />
</Grid.Col>
</Grid>
<div>
quantity: {quantity}
<br />
price: {data.price * quantity}
<br />
<Button style={styles.buttonWrapper}>
<button style={styles.button} onClick={() => handleQuantity("+")}>+</button>
</Button>

<h4>similar products</h4>
{/*limiting similar Prods to 3 products*/}
<Button style={styles.buttonWrapper}>
<button style={styles.button} onClick={() => handleQuantity("-")}>-</button>
</Button>
<br />
{/*// TODO notification that it is added to cart*/}
<Button style={styles.buttonWrapper}>
<button style={styles.button} onClick={handle_add_to_cart}>Add to Cart</button>{" "}
</Button>
<Button>
<Link href={"/cart"}>
<button style={styles.button} onClick={handle_add_to_cart}>Order Now</button>{" "}
</Link>
</Button>
</div>
<h3>similar products</h3>
<div>
<Grid >
{similarProds &&
similarProds.map((product) => {
// condition not to render the product in itself as a similar product
if (product.id != id) {
return (
<div key={product.id}>
<p>{JSON.stringify(product)}</p>
<p>
<Link href={`/products/${product.id}`}>
<button>Details</button>{" "}
</Link>
</p>
</div>
);
}
return (
<Grid.Col span={4} key={product.id}>
<BadgeCard {...product} />
</Grid.Col>
);
})}
</Grid>
</div>
</div>
);
Expand Down
Loading

0 comments on commit 1d8915a

Please sign in to comment.