React Pro - Real World App - Ch9. 08. Product Form: creare un side panel con transitions

// ======================================================
// pages/cms/products/components/CMSProductForm.tsx
// ======================================================

import { Product } from '@/model/product';
import clsx from 'clsx';

export interface CMSProductFormProps {
  activeItem: Partial<Product> | null;
  onClose: () => void;
}

export function CMSProductForm(
  props: CMSProductFormProps
) {
  return (
    <div className={clsx(
      'fixed bg-slate-200 z-10 text-black top-0 w-96  h-full transition-all',
      {'-right-96': !props.activeItem, 'right-0': props.activeItem}
    )}>

      <div className="flex justify-around h-16">
        <button
          className="text-white w-1/2 bg-green-500 hover:bg-green-600"
          onClick={props.onClose}
        >SAVE</button>
        <button
          className="text-white w-1/2 bg-slate-500 hover:bg-slate-600"
          onClick={props.onClose}
        >CLOSE</button>
      </div>

      {props.activeItem?.name}

    </div>
  )
}






// ======================================================
//pages/cms/products/CMSProductsPage.tsx
// ======================================================
import { useEffect } from 'react';
import { useProductsService } from '@/services/products';
import { ServerError, Spinner } from '@/shared/';
import { CMSProductForm } from './components/CMSProductForm';
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} />}

      <CMSProductForm
        activeItem={state.activeItem}
        onClose={actions.resetActiveItem}
      />

      <CMSProductsList
        items={state.products}
        activeItem={state.activeItem}
        onEditItem={actions.setActiveItem}
        onDeleteItem={actions.deleteProduct}
      />

    </div>
  )
}