View difference between Paste ID: 7RJeRbj4 and 14SXNcCv

 // pages/cms/products/components/CMSProductForm.tsx
 import clsx from 'clsx';
 import { ChangeEvent, FormEvent, useEffect, useState } from 'react';
 import { Product } from '@/model/product';
 
 export interface CMSProductFormProps {
   activeItem: Partial<Product> | null;
   onClose: () => void;
   onAdd: (product: Partial<Product>) => void;
   onEdit: (product: Partial<Product>) => void;
 }
 
 const initialState: Partial<Product> = {
   name: '', cost: 0, description: ''
 }
 
 export function CMSProductForm(props: CMSProductFormProps) {
   const [formData, setFormData] = useState(initialState);
   const [dirty, setDirty] = useState<boolean>(false);
 
   useEffect(() => {
     if (props.activeItem?.id) {
       setFormData({ ...props.activeItem })
     } else {
       setFormData(initialState)
     }
   }, [props.activeItem])
 
   function changeHandler(e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {
     const value = e.currentTarget.value;
     const name = e.currentTarget.name;
     setFormData(s => ({ ...s, [name]: value }));
     setDirty(true);
   }
 
   function saveHandler(e: FormEvent<HTMLFormElement>) {
     e.preventDefault();
     if (props.activeItem?.id) {
       props.onEdit(formData);
     } else {
       props.onAdd(formData);
     }
   }
 
   const isNameValid = formData.name?.length;
   const isCostValid = formData.cost! > 0;
   const isDescValid = formData.description?.length;
 
   const isValid = isNameValid && isCostValid && isDescValid;
 
   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}
     )}>
 
       <form onSubmit={saveHandler}>
         <div className="flex justify-around h-16">
           <button
             className="text-white w-1/2 bg-green-500 hover:bg-green-600 disabled:opacity-30"
             disabled={!isValid}
             type="submit"
           >SAVE</button>
           <button
             className="text-white w-1/2 bg-slate-500 hover:bg-slate-600"
             onClick={props.onClose}
             type="button"
           >CLOSE</button>
         </div>
 
         {
           formData.img &&
             <img src={formData.img} alt={formData.name} className="w-full" />
         }
 
         <div className="flex flex-col gap-3 mx-3 mt-16">
           Product Name:
           <input
             className={clsx({ 'error': !isNameValid && dirty})}
             type="text" value={formData?.name} name="name" onChange={changeHandler}
           />
 
           Product Cost:
           <input
             className={clsx({ 'error': !isCostValid && dirty})}
             type="number" value={formData?.cost} name="cost" onChange={changeHandler}
           />
 
           Description
           <textarea
             className={clsx({ 'error': !isDescValid && dirty})}
             value={formData.description} name="description" onChange={changeHandler}
           ></textarea>
 
         </div>
       </form>
 
 
     </div>
   )
 }