From 3092c0b1e868a5ebdda3fb123e088f63367c6b07 Mon Sep 17 00:00:00 2001
From: aruay99 <aruaiberdk@gmail.com>
Date: Sat, 18 Nov 2023 05:44:39 +0600
Subject: [PATCH 1/3] fix: fix table layout

---
 src/features/products/components/Product.tsx  | 20 ++++++++++++-------
 .../products/components/ProductsList.tsx      |  2 +-
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/features/products/components/Product.tsx b/src/features/products/components/Product.tsx
index 1025ceca..a1401114 100644
--- a/src/features/products/components/Product.tsx
+++ b/src/features/products/components/Product.tsx
@@ -11,17 +11,23 @@ interface Props {
 export function Product({ product, pending, actions }: Props) {
   return (
     <>
-      <div
+      <table
         className={twJoin(
-          'space-x-24 flex items-center',
+          ' layout-fixed w-full border-collapse',
           pending && 'opacity-50',
         )}
       >
-        <span className={'color-gray'}>x{product.quantity}</span>
-        <span>{product.name}</span>
-        <span>{product.brand}</span>
-      </div>
-      {actions}
+        <tbody>
+          <tr className="border-b white-space-nowrap">
+            <td className="p-4 text-gray-500 text-left">x{product.quantity}</td>
+            <td className="p-4 truncate break-all text-left">{product.name}</td>
+            <td className="p-4 truncate break-all items-left">
+              {product.brand}
+            </td>
+            <td className="items-right">{actions}</td>
+          </tr>
+        </tbody>
+      </table>
     </>
   );
 }
diff --git a/src/features/products/components/ProductsList.tsx b/src/features/products/components/ProductsList.tsx
index d419dc78..101f3b75 100644
--- a/src/features/products/components/ProductsList.tsx
+++ b/src/features/products/components/ProductsList.tsx
@@ -22,7 +22,7 @@ export function ProductsList() {
           {products!.map((product) => (
             <li
               key={product.id}
-              className="flex justify-between p-4 items-center border-t-1 border-solid border-#ddd first:border-none"
+              className="flex mx-2 ietms-left border-t-1 border-solid border-#ddd first:border-none"
             >
               <Product
                 product={product}

From b8e06e64a1ce4f5736740e35d0783a9e2e0c6ae3 Mon Sep 17 00:00:00 2001
From: aruay99 <aruaiberdk@gmail.com>
Date: Sat, 18 Nov 2023 18:05:17 +0600
Subject: [PATCH 2/3] fix:ui fixes

---
 .../products/components/DeleteProduct.tsx        |  1 +
 src/features/products/components/Product.tsx     | 16 ++++++++++------
 .../products/components/ProductsList.tsx         |  4 ++--
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/features/products/components/DeleteProduct.tsx b/src/features/products/components/DeleteProduct.tsx
index 61c62c14..8d2bc5cd 100644
--- a/src/features/products/components/DeleteProduct.tsx
+++ b/src/features/products/components/DeleteProduct.tsx
@@ -24,6 +24,7 @@ export function DeleteProduct({
         disabled
           ? 'bg-red-3 text-red-1'
           : 'hover:bg-red-6 bg-red-5 text-white ',
+        'sm:w-24 md:w-32 lg:w-32 xl:w-32 hidden sm:inline md:inline lg:inline xl:inline',
       )}
       disabled={disabled}
     >
diff --git a/src/features/products/components/Product.tsx b/src/features/products/components/Product.tsx
index a1401114..57f54e68 100644
--- a/src/features/products/components/Product.tsx
+++ b/src/features/products/components/Product.tsx
@@ -13,18 +13,22 @@ export function Product({ product, pending, actions }: Props) {
     <>
       <table
         className={twJoin(
-          ' layout-fixed w-full border-collapse',
+          ' mx-4 layout-fixed w-full border-collapse',
           pending && 'opacity-50',
         )}
       >
         <tbody>
-          <tr className="border-b white-space-nowrap">
-            <td className="p-4 text-gray-500 text-left">x{product.quantity}</td>
-            <td className="p-4 truncate break-all text-left">{product.name}</td>
-            <td className="p-4 truncate break-all items-left">
+          <tr className="border-b">
+            <td className="p-4 text-gray-500 items-left w-16">
+              x{product.quantity}
+            </td>
+            <td className="p-4 truncate break-all items-left w-64">
+              {product.name}
+            </td>
+            <td className="p-4 truncate break-all items-left w-64">
               {product.brand}
             </td>
-            <td className="items-right">{actions}</td>
+            <td className="p-4 items-left w-32">{actions}</td>
           </tr>
         </tbody>
       </table>
diff --git a/src/features/products/components/ProductsList.tsx b/src/features/products/components/ProductsList.tsx
index 101f3b75..7a82d53e 100644
--- a/src/features/products/components/ProductsList.tsx
+++ b/src/features/products/components/ProductsList.tsx
@@ -22,7 +22,7 @@ export function ProductsList() {
           {products!.map((product) => (
             <li
               key={product.id}
-              className="flex mx-2 ietms-left border-t-1 border-solid border-#ddd first:border-none"
+              className="border-t-1 border-solid border-#ddd first:border-none"
             >
               <Product
                 product={product}
@@ -31,7 +31,7 @@ export function ProductsList() {
             </li>
           ))}
           {variables.map((variable) => (
-            <li className="flex justify-between p-4 items-center border-t-1 border-solid border-#ddd">
+            <li className="border-t-1 border-solid border-#ddd">
               <Product
                 product={{
                   id: products!.length,

From 0a8c46ce831a47ceb1f2896a1740b1bc43b13d1a Mon Sep 17 00:00:00 2001
From: aruay99 <aruaiberdk@gmail.com>
Date: Sat, 18 Nov 2023 20:49:30 +0600
Subject: [PATCH 3/3] feat:add table haeders that still need to be fixed

---
 tsconfig.node.json => .json                   |  0
 src/features/products/components/Product.tsx  | 33 ++++++++-----------
 .../products/components/ProductsList.tsx      | 23 +++++++++----
 3 files changed, 30 insertions(+), 26 deletions(-)
 rename tsconfig.node.json => .json (100%)

diff --git a/tsconfig.node.json b/.json
similarity index 100%
rename from tsconfig.node.json
rename to .json
diff --git a/src/features/products/components/Product.tsx b/src/features/products/components/Product.tsx
index 57f54e68..820e281a 100644
--- a/src/features/products/components/Product.tsx
+++ b/src/features/products/components/Product.tsx
@@ -11,26 +11,19 @@ interface Props {
 export function Product({ product, pending, actions }: Props) {
   return (
     <>
-      <table
-        className={twJoin(
-          ' mx-4 layout-fixed w-full border-collapse',
-          pending && 'opacity-50',
-        )}
-      >
-        <tbody>
-          <tr className="border-b">
-            <td className="p-4 text-gray-500 items-left w-16">
-              x{product.quantity}
-            </td>
-            <td className="p-4 truncate break-all items-left w-64">
-              {product.name}
-            </td>
-            <td className="p-4 truncate break-all items-left w-64">
-              {product.brand}
-            </td>
-            <td className="p-4 items-left w-32">{actions}</td>
-          </tr>
-        </tbody>
+      <table className={twJoin(' mx-4 layout-fixed w-full border-collapse')}>
+        <tr className="border-b">
+          <td className="p-4 text-gray-500 items-left w-16">
+            x{product.quantity}
+          </td>
+          <td className="p-4 truncate break-all items-left w-64">
+            {product.name}
+          </td>
+          <td className="p-4 truncate break-all items-left w-64">
+            {product.brand}
+          </td>
+          <td className="p-4 items-left w-32">{actions}</td>
+        </tr>
       </table>
     </>
   );
diff --git a/src/features/products/components/ProductsList.tsx b/src/features/products/components/ProductsList.tsx
index 7a82d53e..3a7bf0a2 100644
--- a/src/features/products/components/ProductsList.tsx
+++ b/src/features/products/components/ProductsList.tsx
@@ -2,6 +2,7 @@ import { useMutationState } from '@tanstack/react-query';
 import { ProductType, useQueryProducts } from '..';
 import { DeleteProduct } from './DeleteProduct';
 import { Product } from './Product';
+import { twJoin } from 'tailwind-merge';
 
 export function ProductsList() {
   const query = useQueryProducts();
@@ -18,9 +19,19 @@ export function ProductsList() {
     <>
       {query.isLoading && <p>Loading...</p>}
       {query.isSuccess && products!.length > 0 && (
-        <ul className="bg-#f9f9f9 border-#ddd border-1 rounded-md">
+        <div className="bg-#f9f9f9 border-#ddd border-1 rounded-md">
+          <table className={twJoin('layout-fixed w-full border-collapse')}>
+            <thead>
+              <tr className="border-b text-gray-500 mx-4">
+                <th className="p-0">Quantity</th>
+                <th className="p-4 w-16">Name</th>
+                <th className="p-4 w-32 ">Brand</th>
+                <th className="p-4 w-64">Actions</th>
+              </tr>
+            </thead>
+          </table>
           {products!.map((product) => (
-            <li
+            <div
               key={product.id}
               className="border-t-1 border-solid border-#ddd first:border-none"
             >
@@ -28,10 +39,10 @@ export function ProductsList() {
                 product={product}
                 actions={<DeleteProduct productId={product.id} />}
               />
-            </li>
+            </div>
           ))}
           {variables.map((variable) => (
-            <li className="border-t-1 border-solid border-#ddd">
+            <div className="border-t-1 border-solid border-#ddd">
               <Product
                 product={{
                   id: products!.length,
@@ -44,9 +55,9 @@ export function ProductsList() {
                   <DeleteProduct disabled productId={products!.length} />
                 }
               />
-            </li>
+            </div>
           ))}
-        </ul>
+        </div>
       )}
       {query.isError && <p>Error: {query.error?.message}</p>}
     </>