feat(FE-62): add FormActions and FormHeader components for form management

src/components/helper/form/FormActions.tsx

@@ -0,0 +1,82 @@
+import { Icon } from '@iconify/react';
+import { FormikContextType } from 'formik';
+import Button from '@/components/Button';
+import { cn } from '@/lib/helper';
+
+interface FormActionsProps<T> {
+  type: 'add' | 'edit' | 'detail';
+  formik: FormikContextType<T>;
+  editUrl?: string;
+  onDelete?: () => void;
+}
+
+export const FormActions = <T,>({
+  type,
+  formik,
+  editUrl,
+  onDelete,
+}: FormActionsProps<T>) => {
+  return (
+    <div className='flex flex-row justify-between gap-2 flex-wrap'>
+      {type !== 'add' && onDelete && (
+        <div className='flex flex-row justify-start gap-2'>
+          <Button
+            type='button'
+            color='error'
+            onClick={onDelete}
+            className='px-4'
+          >
+            <Icon
+              icon='material-symbols:delete-outline-rounded'
+              width={24}
+              height={24}
+              className='justify-start text-sm'
+            />
+            Delete
+          </Button>
+          {type !== 'edit' && editUrl && (
+            <Button
+              type='button'
+              color='warning'
+              href={editUrl}
+              className='px-4'
+            >
+              <Icon
+                icon='material-symbols:edit-outline'
+                width={24}
+                height={24}
+                className='justify-start text-sm'
+              />
+              Edit
+            </Button>
+          )}
+        </div>
+      )}
+      {type !== 'detail' && (
+        <div
+          className={cn('flex flex-row justify-end gap-2', {
+            'w-full': type === 'add',
+          })}
+        >
+          <Button
+            type='reset'
+            color='warning'
+            className='px-4'
+            onClick={formik.handleReset}
+          >
+            Reset
+          </Button>
+          <Button
+            type='submit'
+            color='primary'
+            className='px-4'
+            isLoading={formik.isSubmitting}
+            disabled={!formik.isValid || formik.isSubmitting}
+          >
+            Submit
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+};

src/components/helper/form/FormHeader.tsx

@@ -0,0 +1,24 @@
+import Button from '@/components/Button';
+import { Icon } from '@iconify/react';
+
+interface FormHeaderProps {
+  type: 'add' | 'edit' | 'detail';
+  title: string;
+  backUrl: string;
+}
+
+export const FormHeader = ({ type, title, backUrl }: FormHeaderProps) => {
+  return (
+    <header className='flex flex-col gap-4'>
+      <Button href={backUrl} variant='link' className='w-fit p-0 text-primary'>
+        <Icon icon='uil:arrow-left' width={24} height={24} />
+        Kembali
+      </Button>
+      <h1 className='text-2xl font-bold text-center'>
+        {type === 'add' && `Tambah ${title}`}
+        {type === 'edit' && `Edit ${title}`}
+        {type === 'detail' && `Detail ${title}`}
+      </h1>
+    </header>
+  );
+};