View difference between Paste ID: 1muWcMDY and 1F6Jhd6D

-// ======================================================
+
 import clsx from 'clsx';
-// ======================================================
+import { ChangeEvent, FormEvent, useState } from 'react';
 import { Product } from '@/model/product';
 
 export interface CMSProductFormProps {
   activeItem: Partial<Product> | null;
   onClose: () => void;
 }
 
 const initialState: Partial<Product> = {
   name: '', cost: 0, description: ''
-export function CMSProductForm(
+
-  props: CMSProductFormProps
+
-) {
+export function CMSProductForm(props: CMSProductFormProps) {
   const [formData, setFormData] = useState(initialState);
 
   function changeHandler(e: ChangeEvent<HTMLInputElement>) {
     const name = e.currentTarget.value;
     setFormData(s => ({ ...s, name }))
   }
-      <div className="flex justify-around h-16">
+
-        <button
+  function saveHandler(e: FormEvent<HTMLFormElement>) {
-          className="text-white w-1/2 bg-green-500 hover:bg-green-600"
+    e.preventDefault();
-          onClick={props.onClose}
+    console.log(formData)
-        >SAVE</button>
+  }
-        <button
+
-          className="text-white w-1/2 bg-slate-500 hover:bg-slate-600"
+  const isNameValid = formData.name?.length;
-          onClick={props.onClose}
+  const isValid = isNameValid;
-        >CLOSE</button>
+
-      </div>
+
     <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
-//pages/cms/products/CMSProductsPage.tsx
+            className="text-white w-1/2 bg-slate-500 hover:bg-slate-600"
-// ======================================================
+            onClick={props.onClose}
-import { useEffect } from 'react';
+            type="button"
-import { useProductsService } from '@/services/products';
+          >CLOSE</button>
-import { ServerError, Spinner } from '@/shared/';
+        </div>
-import { CMSProductForm } from './components/CMSProductForm';
+
-import { CMSProductsList } from './components/CMSProductsList';
+        <div className="flex flex-col gap-3 mx-3 mt-16">
           Product Name:
-export function CMSProductsPage() {
+          <input
-  const { state, actions } = useProductsService();
+            className={clsx({ 'error': !isNameValid})}
             type="text" value={formData?.name} onChange={changeHandler}
-  useEffect(() => {
+          />
-    actions.getProducts()
+        </div>
-  }, [])
+      </form>
 
       {props.activeItem?.name}
-    <div>
+
-      <h1 className="title">CMS</h1>
+
   )
-      {state.pending && <Spinner />}
+
-      {state.error && <ServerError message={state.error} />}
+