Table header

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}
     >

src/features/products/components/Product.tsx

@@ -11,17 +11,20 @@ interface Props {
 export function Product({ product, pending, actions }: Props) {
   return (
     <>
-      <div
-        className={twJoin(
-          'space-x-24 flex items-center',
-          pending && 'opacity-50',
-        )}
-      >
-        <span className={'color-gray'}>x{product.quantity}</span>
-        <span>{product.name}</span>
-        <span>{product.brand}</span>
-      </div>
-      {actions}
+      <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>
     </>
   );
 }

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,20 +19,30 @@ 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="flex justify-between p-4 items-center border-t-1 border-solid border-#ddd first:border-none"
+              className="border-t-1 border-solid border-#ddd first:border-none"
             >
               <Product
                 product={product}
                 actions={<DeleteProduct productId={product.id} />}
               />
-            </li>
+            </div>
           ))}
           {variables.map((variable) => (
-            <li className="flex justify-between p-4 items-center 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>}
     </>