packages/ui: add Divider

apps/web: ui improvements

apps/web/components/Form.tsx

@@ -1,6 +1,6 @@
 import type { ResponseGetData, ResponseMetaData } from '@/api/ius/types';
 import { mapFieldTypeElement } from '@/config/elements';
-import { Background, Button, ElementContainer } from 'ui';
+import { Background, Button, Divider, ElementContainer } from 'ui';
 
 type Props = {
   readonly data: ResponseGetData;
@@ -35,7 +35,8 @@ export function Form({ data, metaData }: Props) {
           );
         })}
       </div>
-      <div className="grid grid-cols-1 gap-5 pt-3 lg:grid-cols-3">
+      <Divider />
+      <div className="grid grid-cols-1 gap-2 lg:grid-cols-3">
         <Button>Сохранить</Button>
         <Button>Возврат на доработку</Button>
         <Button color="danger">Отмена</Button>

packages/ui/background.tsx

@@ -2,7 +2,7 @@ import type { PropsWithChildren } from 'react';
 
 export function Background({ children }: PropsWithChildren) {
   return (
-    <div className="w-full rounded-sm border border-slate-100 bg-white p-5 md:w-auto">
+    <div className="grid w-full gap-2 rounded-sm border border-slate-100 bg-white p-5 md:w-auto">
       {children}
     </div>
   );

packages/ui/divider.tsx

@@ -0,0 +1,3 @@
+export function Divider() {
+  return <hr className="my-4 rounded-md border border-y-[1px] bg-gray-300 opacity-30 " />;
+}

packages/ui/index.tsx

@@ -3,5 +3,6 @@ export * from './button';
 export * from './checkbox';
 export * from './container';
 export * from './content';
+export * from './divider';
 export * from './header';
 export * from './input';