Add cart view

src/components/layout/cart.tsx

+import {Fragment, useEffect, useState} from 'react'
+import { Dialog, Transition } from '@headlessui/react'
+import { XIcon } from '@heroicons/react/outline'
+import Navbar from "../core/navbar";
+
+import { CheckIcon, ClockIcon } from '@heroicons/react/solid'
+
+const products = [
+    {
+        name: "Coca Cola",
+        category: "Boissons",
+        price: 0.50,
+        quantity: 50,
+    },
+    {
+        name: "Fanta",
+        category: "Boissons",
+        price: 0.50,
+        quantity: 50,
+    },
+];
+
+let price = 0;
+
+function totalPrice() {
+    for (var index = 0; products[index]; index++) {
+        price = price + products[index].price;
+    }
+}
+
+function deleteProduct() {
+
+}
+
+function Cart() {
+
+    useEffect(() => {
+        totalPrice();
+    }, []);
+
+    return (
+        <div className="bg-white">
+            <div className="max-w-4xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
+                <h1 className="text-3xl font-extrabold tracking-tight text-gray-900">Shopping Cart</h1>
+
+                <form className="mt-12">
+                    <div>
+                        <h2 className="sr-only">Items in your shopping cart</h2>
+
+                        <ul role="list" className="border-t border-b border-gray-200 divide-y divide-gray-200">
+                            {products.map((product, productIdx) => (
+                                <li key={product.name} className="flex py-6 sm:py-10">
+                                    <div className="relative ml-4 flex-1 flex flex-col justify-between sm:ml-6">
+                                        <div>
+                                            <div className="flex justify-between sm:grid sm:grid-cols-2">
+                                                <div className="pr-6">
+                                                    <h3 className="text-sm">
+                                                        <p className="font-medium text-gray-700 hover:text-gray-800">
+                                                            {product.name}
+                                                        </p>
+                                                    </h3>
+                                                    <p className="mt-1 text-sm text-gray-500">x{product.quantity}</p>
+                                                </div>
+
+                                                <p className="text-sm font-medium text-gray-900 text-right">{product.price}</p>
+                                            </div>
+
+                                            <div className="mt-4 flex items-center sm:block sm:absolute sm:top-0 sm:left-1/2 sm:mt-0">
+                                                <button
+                                                    type="button"
+                                                    className="ml-4 text-sm font-medium text-indigo-600 hover:text-indigo-500 sm:ml-0 sm:mt-3"
+                                                >
+                                                    <span>Supprimer</span>
+                                                </button>
+                                            </div>
+                                        </div>
+
+                                    </div>
+                                </li>
+                            ))}
+                        </ul>
+                    </div>
+
+                    {/* Order summary */}
+                    <div className="mt-10 sm:ml-32 sm:pl-6">
+                        <div className="bg-gray-50 rounded-lg px-4 py-6 sm:p-6 lg:p-8">
+                            <h2 className="sr-only">Panier</h2>
+
+                            <div className="flow-root">
+                                <dl className="-my-4 text-sm divide-y divide-gray-200">
+                                    <div className="py-4 flex items-center justify-between">
+                                        <dt className="text-gray-600">Total  </dt>
+                                        <dd className="font-medium text-gray-900">{price}€</dd>
+                                    </div>
+                                </dl>
+                            </div>
+                        </div>
+                        <div className="mt-10">
+                            <button
+                                type="submit"
+                                className="w-full bg-indigo-600 border border-transparent rounded-md shadow-sm py-3 px-4 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-50 focus:ring-indigo-500"
+                            >
+                                Valider
+                            </button>
+                        </div>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+};
+
+export default Cart;
\ No newline at end of file

src/components/layout/main.tsx

@@ -6,6 +6,7 @@ import {
 } from '@heroicons/react/outline';
 
 import Navbar from '../core/navbar';
+import Cart from '../layout/cart';
 
 import { useAuth } from '../../auth/useAuth';
 import { RequireAuth } from '../../auth/RequireAuth';
@@ -104,6 +105,7 @@ const Main = ({ title, subTitle, children }: LayoutProps) => {
           </div>
         </main>
       </div>
+      <Cart />
     </div>
     </RequireAuth>
   );

src/components/sellListItem.tsx

@@ -24,7 +24,7 @@ const SellListItem = ({ product }) => {
               className="relative w-0 flex-1 inline-flex items-center justify-center py-4 text-sm text-gray-700 font-medium border border-transparent rounded-br-lg hover:text-gray-500"
             >
               <ShoppingCartIcon className="w-5 h-5 text-gray-400" aria-hidden="true" />
-              <span className="ml-3">Ajouter</span>
+              <button className="ml-3">Ajouter</button>
             </a>
           </div>
         </div>