View difference between Paste ID: 1F6Jhd6D and K3zW9DuM

 // ======================================================
-// pages/cms/products/components/CMSProductsList.tsx
+// pages/cms/products/components/CMSProductForm.tsx
 // ======================================================
 
 import { Product } from '@/model/product';
 import clsx from 'clsx';
 
-interface CMSProductsListProps {
+export interface CMSProductFormProps {
-  items: Product[];
+
   onClose: () => void;
-  onEditItem: (product: Partial<Product>) => void;
+
-  onDeleteItem: (id: string) => void;
+
 export function CMSProductForm(
   props: CMSProductFormProps
-export function CMSProductsList(props: CMSProductsListProps) {
+) {
   return (
-    <div className="mt-12">
+    <div className={clsx(
-      <table className="table-auto w-full hover">
+      'fixed bg-slate-200 z-10 text-black top-0 w-96  h-full transition-all',
-        <thead>
+      {'-right-96': !props.activeItem, 'right-0': props.activeItem}
-        <tr>
+    )}>
-          <th className="text-left">PRODUCTS</th>
+
-          <th className="text-left">IMAGE</th>
+      <div className="flex justify-around h-16">
-          <th>COST</th>
+        <button
-          <th>DELETE</th>
+          className="text-white w-1/2 bg-green-500 hover:bg-green-600"
-        </tr>
+          onClick={props.onClose}
-        </thead>
+        >SAVE</button>
         <button
-        <tbody>
+          className="text-white w-1/2 bg-slate-500 hover:bg-slate-600"
-        {
+          onClick={props.onClose}
-          props.items.map(item => {
+        >CLOSE</button>
-            return (
+      </div>
-              <tr
+
-                key={item.id}
+      {props.activeItem?.name}
-                className={clsx(
+
-                  'cursor-pointer',
+
-                  { 'bg-sky-200 text-black pointer-events-none': item.id === props.activeItem?.id }
+
-                )}
+
-                onClick={() => {
+
-                  props.onEditItem(item)
+
-                }}
+
-              >
+
-                <td>{item.name}</td>
+
-                <td>
+
-                  { item.tmb && <img src={item.tmb} alt={item.name} className="h-16 rounded-xl"/>}
+
-                </td>
+
-                <td className="text-center">€ {item.cost}</td>
+
-                <td className="text-center">
+
-                  <i
+
-                    className="fa fa-trash"
+
-                    onClick={(e) => {
+import { CMSProductForm } from './components/CMSProductForm';
-                      e.stopPropagation()
+
-                      props.onDeleteItem(item.id)
+
-                    }}
+
-                  />
+
-                </td>
+
-              </tr>
+
-            )
+
-          })
+
-        }
+
-        </tbody>
+
-      </table>
+
       <h1 className="title">CMS</h1>
 
       {state.pending && <Spinner />}
       {state.error && <ServerError message={state.error} />}
 
       <CMSProductForm
         activeItem={state.activeItem}
         onClose={actions.resetActiveItem}
       />
 
       <CMSProductsList
         items={state.products}
         activeItem={state.activeItem}
         onEditItem={actions.setActiveItem}
         onDeleteItem={actions.deleteProduct}
       />
 
     </div>
   )
 }