View difference between Paste ID: K3zW9DuM and F8SWEeiA

-// pages/cms/products/CMSProductsPage.tsx
+// ======================================================
 // pages/cms/products/components/CMSProductsList.tsx
 // ======================================================
 
 import clsx from 'clsx';
 import { Product } from '@/model/product';
 
 interface CMSProductsListProps {
   items: Product[];
   activeItem: Partial<Product> | null;
   onEditItem: (product: Partial<Product>) => void;
   onDeleteItem: (id: string) => void;
 }
 
 export function CMSProductsList(props: CMSProductsListProps) {
   return (
     <div className="mt-12">
       <table className="table-auto w-full hover">
         <thead>
         <tr>
-      <div className="mt-12">
+          <th className="text-left">PRODUCTS</th>
-        <table className="table-auto w-full hover">
+          <th className="text-left">IMAGE</th>
-          <thead>
+          <th>COST</th>
-              <tr>
+          <th>DELETE</th>
-                <th className="text-left">PRODUCTS</th>
+        </tr>
-                <th className="text-left">IMAGE</th>
+        </thead>
-                <th>COST</th>
+
-                <th>DELETE</th>
+        <tbody>
         {
-          </thead>
+          props.items.map(item => {
             return (
-          <tbody>
+              <tr
-          {
+                key={item.id}
-            state.products.map(item => {
+                className={clsx(
-              return (
+                  'cursor-pointer',
-                <tr
+                  { 'bg-sky-200 text-black pointer-events-none': item.id === props.activeItem?.id }
-                  key={item.id}
+                )}
-                  className={clsx(
+                onClick={() => {
-                    'cursor-pointer',
+                  props.onEditItem(item)
-                    { 'bg-sky-200 text-black pointer-events-none': item.id === state.activeItem?.id }
+                }}
-                  )}
+              >
-                  onClick={() => {
+                <td>{item.name}</td>
-                    actions.setActiveItem(item)
+                <td>
-                  }}
+                  { item.tmb && <img src={item.tmb} alt={item.name} className="h-16 rounded-xl"/>}
-                >
+                </td>
-                  <td>{item.name}</td>
+                <td className="text-center">€ {item.cost}</td>
-                  <td>
+                <td className="text-center">
-                    { item.tmb && <img src={item.tmb} alt={item.name} className="h-16 rounded-xl"/>}
+                  <i
-                  </td>
+                    className="fa fa-trash"
-                  <td className="text-center">€ {item.cost}</td>
+                    onClick={(e) => {
-                  <td className="text-center">
+                      e.stopPropagation()
-                    <i
+                      props.onDeleteItem(item.id)
-                      className="fa fa-trash"
+                    }}
-                      onClick={(e) => {
+                  />
-                        e.stopPropagation()
+                </td>
-                        actions.deleteProduct(item.id)
+
-                      }}
+            )
-                    />
+          })
-                  </td>
+        }
-                </tr>
+        </tbody>
-              )
+      </table>
-            })
+
-          }
+
-          </tbody>
+
-        </table>
+
-      </div>
+
 
 
 
 
 // ======================================================
 //pages/cms/products/CMSProductsPage.tsx
 // ======================================================
 import { useEffect } from 'react';
 import { useProductsService } from '@/services/products';
 import { ServerError, Spinner } from '@/shared/';
 import { CMSProductsList } from './components/CMSProductsList';
 
 export function CMSProductsPage() {
   const { state, actions } = useProductsService();
 
   useEffect(() => {
     actions.getProducts()
   }, [])
 
   return (
     <div>
       <h1 className="title">CMS</h1>
 
       {state.pending && <Spinner />}
       {state.error && <ServerError message={state.error} />}
 
       <CMSProductsList
         items={state.products}
         activeItem={state.activeItem}
         onEditItem={actions.setActiveItem}
         onDeleteItem={actions.deleteProduct}
       />
 
       <pre>{JSON.stringify(state.activeItem, null, 2)}</pre>
     </div>
   )
 }