feat(form): ✨ enhance form layout and functionality

* Add FormerButtonArea component for action buttons
* Introduce FormerLayoutTop and FormerLayoutBottom for structured layout
* Update Former types to include new properties
* Implement dynamic ID generation for forms
* Refactor example to demonstrate new layout features
* Mark tasks as completed in todo.md

src/Former/FormerButtonArea.tsx

@@ -0,0 +1,46 @@
+import { Group, Button } from '@mantine/core';
+import { IconX, IconDeviceFloppy } from '@tabler/icons-react';
+import { useFormerStore } from './Former.store';
+
+export const FormerButtonArea = () => {
+  const { save, onClose, buttonAreaGroupProps } = useFormerStore((state) => ({
+    save: state.save,
+    onClose: state.onClose,
+    buttonAreaGroupProps: state.layout?.buttonAreaGroupProps,
+  }));
+
+  return (
+    <Group
+      justify="center"
+      w="100%"
+      p="xs"
+      style={{ boxShadow: '2px 2px 5px rgba(47, 47, 47, 0.1)' }}
+      {...buttonAreaGroupProps}
+    >
+      <Group justify="space-evenly" grow>
+        {typeof onClose === 'function' && (
+          <Button
+            color="orange"
+            leftSection={<IconX />}
+            size="sm"
+            px="md"
+            onClick={() => onClose()}
+            miw={'8rem'}
+          >
+            Close
+          </Button>
+        )}
+        <Button
+          color="green"
+          leftSection={<IconDeviceFloppy />}
+          size="sm"
+          px="md"
+          onClick={() => save()}
+          miw={'8rem'}
+        >
+          Save
+        </Button>
+      </Group>
+    </Group>
+  );
+};