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