Styles

src/app/basket/page.jsx

@@ -1,6 +1,6 @@
 'use client';
 import Image from 'next/image';
-import Navbar from '@/components/Navbar';
+
 
 import { BasketContext } from '@/context/basket.context';
 import { useContext } from 'react';
@@ -11,16 +11,13 @@ export default function Basket() {
   const { state, dispatch } = useContext(BasketContext);
 
   return (
-
-    <div className="basket flex">
-
-      <Navbar />
+    <div className="basket">
 
       <h2>Your Basket</h2>
-      <div className="card flex">
+      <div className="card">
         {state.articles.map((product) => (
-div key={uuidv4()} className="card-product bask">
 
+          <div key={uuidv4()} className="card-product">
             <Image
               priority
               src={product.image}
@@ -30,7 +27,7 @@ div key={uuidv4()} className="card-product bask">
             />
             <p>{product.name}</p>
             <p>{product.price}</p>
-            <button className="pad padBas"
+            <button
               onClick={() =>
                 dispatch({
                   type: 'REMOVE',
@@ -43,7 +40,7 @@ div key={uuidv4()} className="card-product bask">
           </div>
         ))}
       </div>
-      <button className="pad"
+      <button
               onClick={() =>
                 dispatch({
                   type: 'RESET',

src/app/page.js

@@ -4,26 +4,19 @@ import { retrieveUniqueProducts } from '@/models/products';
 import Link from 'next/link';
 import styles from './page.module.css';
 
-import Navbar from '@/components/Navbar';
-
-
 export default async function Home() {
   const productsInfo = retrieveUniqueProducts();
 
   return (
     <main>
-
       <h1>Unwanted Crap</h1>
       <Link className={styles.basketLink} href="/basket">
         🧺
       </Link>
+
       <div className="flex">
         <Display_products productsInfo={productsInfo} />
       </div>
-
-      <Navbar />
-      <Display_products productsInfo={productsInfo} />
-
     </main>
   );
 }

src/app/page.module.css

@@ -61,6 +61,10 @@
   transition: transform 200ms;
 }
 
+.egg {
+  color: red;
+}
+
 .card h2 {
   font-weight: 600;
   margin-bottom: 0.7rem;

src/app/products/[id]/[variantId]/page.js

@@ -1,10 +1,10 @@
 import { retrieveProductData } from '@/models/products';
 import Image from 'next/image';
 import Link from 'next/link';
-import Navbar from '@/components/Navbar';
-import { Add_item_basket } from '@/components/Add_item_basket';
 import styles from './page.module.css';
 
+import { Add_item_basket } from '@/components/Add_item_basket';
+
 export default function VariantDetail({ params }) {
   const variantDetails = retrieveProductData(params.variantId);
 
@@ -14,30 +14,11 @@ export default function VariantDetail({ params }) {
   }
 
   return (
-
-    <>
-      <div className="card-details flex">
-        <div className="flex">
-          <h2>{variantDetails.colour}</h2>
-          <p>Price: £{variantDetails.price}</p>
-          <p>Description: {variantDetails.description}</p>
-          <Link href={`/products/${params.id}`}>Back to product</Link>
-        </div>
-        <Image
-          src={variantDetails.image}
-          alt={variantDetails.name}
-          width={100}
-          height={100}
-        />
-        <Add_item_basket product={variantDetails} />
-      </div>
-      <Link className={styles.basketLink} href={'/basket'}>
+    <div className="card-details flex">
+      <Link className={styles.basketLink} href="/basket">
         🧺
       </Link>
-    </>
 
-    <div className="card-details">
-      <Navbar />
       <div>
         <h2>{variantDetails.colour}</h2>
         <p>Price: £{variantDetails.price}</p>
@@ -52,6 +33,5 @@ export default function VariantDetail({ params }) {
       />
       <Add_item_basket product={variantDetails} />
     </div>
-
   );
 }

src/app/products/[id]/page.js

@@ -6,10 +6,10 @@ import {
 } from '@/models/variants';
 import Image from 'next/image';
 import Link from 'next/link';
-import Navbar from '@/components/Navbar';
-import { Add_item_basket } from '@/components/Add_item_basket';
 import styles from './page.module.css';
 
+import { Add_item_basket } from '@/components/Add_item_basket';
+
 export default function ProductDetail({ params }) {
   // Retrieve unique product information
   const productInfo = getAllProducts();
@@ -35,20 +35,16 @@ export default function ProductDetail({ params }) {
   // variant id is the unique product id
 
   return (
-
     <div className="card-details flex">
-      <h1>{selectedProduct.name}</h1>
-      <Link href={`/`}>All products</Link>
-
-    <div className="card-details">
-      <Navbar />
+      <Link className={styles.basketLink} href="/basket">
+        🧺
+      </Link>
       <h2>{selectedProduct.name}</h2>
-
       <p>Price: £{selectedProduct.price}</p>
       <p>Description: {selectedProduct.description}</p>
       {hasVariants ? (
         <>
-          <div className="flex">
+          <div>
             <Image
               src={allVariants[0].image}
               alt={allVariants[0].name}
@@ -66,31 +62,19 @@ export default function ProductDetail({ params }) {
               </li>
             ))}
           </ul>
-
-
-          <Link className={styles.basketLink} href={'/basket'}>
-            🧺
-          </Link>
-
           <Add_item_basket product={selectedProduct} />
-
         </>
       ) : (
-        <>
-          <div className="flex">
-            <Image
-              src={selectedProduct.image}
-              alt={selectedProduct.name}
-              width={200}
-              height={100}
-            />
-            <p>Colour: {selectedProduct.colour}</p>
-            <Add_item_basket product={selectedProduct} />
-          </div>
-          <Link className={styles.basketLink} href={'/basket'}>
-            🧺
-          </Link>
-        </>
+        <div>
+          <Image
+            src={selectedProduct.image}
+            alt={selectedProduct.name}
+            width={200}
+            height={100}
+          />
+          <p>Colour: {selectedProduct.colour}</p>
+          <Add_item_basket product={selectedProduct} />
+        </div>
       )}
     </div>
   );