Skip to content
Snippets Groups Projects

Finalisation du panier

Merged Finalisation du panier
develop into main
Merged Princelle Maxime requested to merge develop into main
Viewing commit 9d89c73b
Prev Next
Show latest version
3 files
+ 116
− 1
Preferences
Compare changes
Files
3
src/components/layout/cart.tsx 0 → 100644
+ 113
− 0
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