Skip to content
Snippets Groups Projects
Commit f20f8df1 authored by LAFORÊT Nicolas's avatar LAFORÊT Nicolas :rabbit2:
Browse files

:construction_worker: added ring to cart badge

parent 146b98e8
1 merge request!7🔀 V1
Hide whitespace changes
Inline Side-by-side
src/components/layout/main.tsx
+ 1
− 1
View file @ f20f8df1
......@@ -70,7 +70,7 @@ const Main = ({ title, subTitle, children }: LayoutProps) => {
<span className="sr-only">Open cart</span>
<ShoppingCartIcon className="h-8 w-8 rounded-full" />
{cartCount > 0 &&
<div className="absolute -top-2.5 -right-2 w-5 h-5 bg-indigo-600 bg-opacity-90 rounded-full flex justify-center align-sub">
<div className="absolute -top-2.5 -right-2 w-5 h-5 ring-2 ring-white bg-indigo-600 rounded-full flex justify-center align-sub">
<span className="text-gray-100 font-semibold leading-3 pt-1 text-xs">{cartCount}</span>
</div>
}
......
src/components/sell/cart.tsx
+ 41
− 37
View file @ f20f8df1
......@@ -86,21 +86,23 @@ const Cart = () => {
<form className="mt-8 mx-4 sm:mx-0">
<div>
<ul className="-my-6 divide-y divide-gray-200">
{cartState.cart.length <= 0 && <div className="text-center w-full mt-10 pb-10">
<EmojiSadIcon className="mx-auto h-12 w-12 text-gray-400" />
<h3 className="mt-2 text-sm font-medium text-gray-900">Aucun produit dans le panier !</h3>
<p className="mt-1 text-sm text-gray-500">Rajoutez-en ^^</p>
<div className="mt-6">
<button
type="button"
onClick={() => dispatch({ type: 'TOGGLE_CART' })}
className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>
<ArrowLeftIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
Retourner aux produits
</button>
{cartState.cart.length <= 0 &&
<div className="text-center w-full mt-10 pb-10">
<EmojiSadIcon className="mx-auto h-12 w-12 text-gray-400" />
<h3 className="mt-2 text-sm font-medium text-gray-900">Aucun produit dans le panier !</h3>
<p className="mt-1 text-sm text-gray-500">Rajoutez-en ^^</p>
<div className="mt-6">
<button
type="button"
onClick={() => dispatch({ type: 'TOGGLE_CART' })}
className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>
<ArrowLeftIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
Retourner aux produits
</button>
</div>
</div>
</div>}
}
{cartState.cart.map(cartItem => (
<li key={cartItem.name} className="py-6 flex">
<div className="flex-1 flex flex-col">
......@@ -109,12 +111,12 @@ const Cart = () => {
<h3>
<span>{cartItem.name}</span>
</h3>
<p className="">{cartItem.stockPrice && renderPrice(cartItem.stockPrice)}</p>
<p className="">{cartItem.stockPrice && renderPrice(cartItem.stockPrice)}</p>
</div>
<div className="flex justify-between text-sm mt-1 text-gray-500">
<p className="">{cartItem.category}</p>
<span>{renderPrice(cartItem.price)}/unité</span>
</div>
<p className="">{cartItem.category}</p>
<span>{renderPrice(cartItem.price)}/unité</span>
</div>
</div>
<div className="flex-1 flex justify-between items-baseline text-sm pt-4">
{/* <p className="text-gray-500">Qty {cartItem.quantity}</p> */}
......@@ -146,28 +148,30 @@ const Cart = () => {
</div>
{/* Order summary */}
{cartState.cart.length > 0 && <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>
{cartState.cart.length > 0 &&
<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">{renderPrice(totalPrice)}</dd>
</div>
</dl>
<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">{renderPrice(totalPrice)}</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>
<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>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment