View difference between Paste ID: 1F6Jhd6D and K3zW9DuM
SHOW: | | - or go back to the newest paste.
1
// ======================================================
2-
// pages/cms/products/components/CMSProductsList.tsx
2+
// pages/cms/products/components/CMSProductForm.tsx
3
// ======================================================
4
5
import { Product } from '@/model/product';
6
import clsx from 'clsx';
7
8-
interface CMSProductsListProps {
8+
export interface CMSProductFormProps {
9-
  items: Product[];
9+
10
  onClose: () => void;
11-
  onEditItem: (product: Partial<Product>) => void;
11+
12-
  onDeleteItem: (id: string) => void;
12+
13
export function CMSProductForm(
14
  props: CMSProductFormProps
15-
export function CMSProductsList(props: CMSProductsListProps) {
15+
) {
16
  return (
17-
    <div className="mt-12">
17+
    <div className={clsx(
18-
      <table className="table-auto w-full hover">
18+
      'fixed bg-slate-200 z-10 text-black top-0 w-96  h-full transition-all',
19-
        <thead>
19+
      {'-right-96': !props.activeItem, 'right-0': props.activeItem}
20-
        <tr>
20+
    )}>
21-
          <th className="text-left">PRODUCTS</th>
21+
22-
          <th className="text-left">IMAGE</th>
22+
      <div className="flex justify-around h-16">
23-
          <th>COST</th>
23+
        <button
24-
          <th>DELETE</th>
24+
          className="text-white w-1/2 bg-green-500 hover:bg-green-600"
25-
        </tr>
25+
          onClick={props.onClose}
26-
        </thead>
26+
        >SAVE</button>
27
        <button
28-
        <tbody>
28+
          className="text-white w-1/2 bg-slate-500 hover:bg-slate-600"
29-
        {
29+
          onClick={props.onClose}
30-
          props.items.map(item => {
30+
        >CLOSE</button>
31-
            return (
31+
      </div>
32-
              <tr
32+
33-
                key={item.id}
33+
      {props.activeItem?.name}
34-
                className={clsx(
34+
35-
                  'cursor-pointer',
35+
36-
                  { 'bg-sky-200 text-black pointer-events-none': item.id === props.activeItem?.id }
36+
37-
                )}
37+
38-
                onClick={() => {
38+
39-
                  props.onEditItem(item)
39+
40-
                }}
40+
41-
              >
41+
42-
                <td>{item.name}</td>
42+
43-
                <td>
43+
44-
                  { item.tmb && <img src={item.tmb} alt={item.name} className="h-16 rounded-xl"/>}
44+
45-
                </td>
45+
46-
                <td className="text-center">€ {item.cost}</td>
46+
47-
                <td className="text-center">
47+
48-
                  <i
48+
49-
                    className="fa fa-trash"
49+
50-
                    onClick={(e) => {
50+
import { CMSProductForm } from './components/CMSProductForm';
51-
                      e.stopPropagation()
51+
52-
                      props.onDeleteItem(item.id)
52+
53-
                    }}
53+
54-
                  />
54+
55-
                </td>
55+
56-
              </tr>
56+
57-
            )
57+
58-
          })
58+
59-
        }
59+
60-
        </tbody>
60+
61-
      </table>
61+
62
      <h1 className="title">CMS</h1>
63
64
      {state.pending && <Spinner />}
65
      {state.error && <ServerError message={state.error} />}
66
67
      <CMSProductForm
68
        activeItem={state.activeItem}
69
        onClose={actions.resetActiveItem}
70
      />
71
72
      <CMSProductsList
73
        items={state.products}
74
        activeItem={state.activeItem}
75
        onEditItem={actions.setActiveItem}
76
        onDeleteItem={actions.deleteProduct}
77
      />
78
79
    </div>
80
  )
81
}
82