fix ui in cart

src/components/sell/cart.tsx

@@ -44,7 +44,7 @@ const Cart = () => {
           >
             <Dialog.Overlay className="absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
           </Transition.Child>
-          <div className="fixed inset-y-0 right-0 pl-10 max-w-full flex">
+          <div className="fixed inset-y-0 right-0 pl-14 max-w-full flex">
             <Transition.Child
               as={Fragment}
               enter="transform transition ease-in-out duration-500 sm:duration-700"
@@ -77,13 +77,13 @@ const Cart = () => {
                 </Transition.Child>
                 <div className="h-full flex flex-col py-6 bg-white shadow-xl overflow-y-scroll">
                   <div className="px-4 sm:px-6">
-                    <Dialog.Title className="text-3xl font-extrabold text-gray-900">Panier</Dialog.Title>
+                    <Dialog.Title className="text-3xl ml-4 sm:ml-0 font-extrabold text-gray-900">Panier</Dialog.Title>
                   </div>
-                  <div className="mt-6 relative flex-1 px-4 sm:px-6">
+                  <div className="mt-1 relative flex-1 px-4 sm:px-6">
                     <div className="bg-white">
-                      <div className="mt-8">
+                      <div className="">
                         <div className="flow-root">
-                          <form className="mt-12">
+                          <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">
@@ -103,17 +103,20 @@ const Cart = () => {
                                 </div>}
                                 {cartState.cart.map(cartItem => (
                                   <li key={cartItem.name} className="py-6 flex">
-                                    <div className="ml-4 flex-1 flex flex-col">
+                                    <div className="flex-1 flex flex-col">
                                       <div>
                                         <div className="flex justify-between text-base font-medium text-gray-900">
                                           <h3>
-                                            <a href={cartItem.name}>{cartItem.name}</a>
+                                            <span>{cartItem.name}</span>
                                           </h3>
-                                          <p className="ml-4">{cartItem.stockPrice && renderPrice(cartItem.stockPrice)}</p>
+                                            <p className="">{cartItem.stockPrice && renderPrice(cartItem.stockPrice)}</p>
                                         </div>
-                                        <p className="mt-1 text-sm text-gray-500">{cartItem.category}</p>
+                                        <div className="flex justify-between text-sm mt-1 text-gray-500">
+                                        <p className="">{cartItem.category}</p>
+                                            <span>{renderPrice(cartItem.price)}/unité</span>
+                                            </div>
                                       </div>
-                                      <div className="flex-1 flex items-end justify-between text-sm pt-4">
+                                      <div className="flex-1 flex justify-between items-baseline text-sm pt-4">
                                         {/* <p className="text-gray-500">Qty {cartItem.quantity}</p> */}
                                         <div className="flex flex-row items-baseline">
                                           <label htmlFor={`quantity-${cartItem.name}`} className="sr-only">
@@ -143,7 +146,7 @@ const Cart = () => {
                             </div>
 
                             {/* Order summary */}
-                            <div className="mt-10 sm:ml-32 sm:pl-6">
+                            {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>
 
@@ -164,7 +167,7 @@ const Cart = () => {
                                   Valider
                                 </button>
                               </div>
-                            </div>
+                            </div>}
                           </form>
                         </div>
                       </div>