From cfdffb5fd9b51832a9ecc18bb15e80ca99c38a15 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?torbj=C3=B8rn=20saghaug=20halland?= <torbjsh@stud.ntnu.no> Date: Wed, 17 Apr 2024 13:20:27 +0200 Subject: [PATCH] Added products grid to main page --- Frontend/src/App.jsx | 8 ++++++++ Frontend/src/Product.jsx | 15 +++++++++++++++ Frontend/src/ProductGrid.jsx | 8 ++++++++ Frontend/src/css/App.css | 21 +++++++++++++++++++++ 4 files changed, 52 insertions(+) create mode 100644 Frontend/src/Product.jsx create mode 100644 Frontend/src/ProductGrid.jsx diff --git a/Frontend/src/App.jsx b/Frontend/src/App.jsx index 97d0d8f..3d196a4 100644 --- a/Frontend/src/App.jsx +++ b/Frontend/src/App.jsx @@ -1,6 +1,8 @@ import { useState } from 'react' import './css/App.css' import Navigation from './Navigation' +import ProductGrid from './ProductGrid' +import Product from './Product' function App() { const [count, setCount] = useState(0) @@ -8,6 +10,12 @@ function App() { return ( <> <Navigation /> + <ProductGrid classname="center"> + <Product title="iPhone" description="$1199.99" /> + <Product title="Sony headset" price="$299.99"/> + <Product title="Lenovo laptop" price="$799.99" /> + <Product title="Airfryer" price="$149.99" /> + </ProductGrid> </> ) } diff --git a/Frontend/src/Product.jsx b/Frontend/src/Product.jsx new file mode 100644 index 0000000..5cd2d65 --- /dev/null +++ b/Frontend/src/Product.jsx @@ -0,0 +1,15 @@ +import React from 'react'; +import './css/App.css'; + +function Product({ title, description, price }) { + return ( + <div className="product"> + <h2>{title}</h2> + <p>{description}</p> + <p>{price}</p> + <button>Add to Cart</button> + </div> + ); +} + +export default Product; \ No newline at end of file diff --git a/Frontend/src/ProductGrid.jsx b/Frontend/src/ProductGrid.jsx new file mode 100644 index 0000000..e62098e --- /dev/null +++ b/Frontend/src/ProductGrid.jsx @@ -0,0 +1,8 @@ +import React from 'react'; +import './css/App.css'; + +function ProductGrid({ children }) { + return <div className="product-grid">{children}</div>; +} + +export default ProductGrid; \ No newline at end of file diff --git a/Frontend/src/css/App.css b/Frontend/src/css/App.css index f939965..c9bf211 100644 --- a/Frontend/src/css/App.css +++ b/Frontend/src/css/App.css @@ -5,6 +5,14 @@ body color : rgb(218, 218, 218); } +.product-grid +{ + position: fixed; + left: 0; + right: 0; + bottom: 100px; /* Adjust this value to move the grid up or down */ + margin: 0; /* This removes the default margin around the body */ +} .navigation { @@ -14,6 +22,19 @@ body width : 100%; } +.product-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + margin: 0 auto; /* This centers the grid horizontally */ +} + +.product { + border: 1px solid #ccc; + padding: 10px; + text-align: center; +} + .navTop /* Topside of the navigation block*/ { -- GitLab