apps/web: extract content to Form component

add mobile layout

apps/web/app/ius/[slug]/page.tsx

@@ -1,7 +1,6 @@
 import * as apiIUS from '@/api/ius/query';
 import type { Request } from '@/api/ius/types';
-import { mapFieldTypeElement } from '@/config/elements';
-import { Background, Button, Content, ElementContainer } from 'ui';
+import { Form } from '@/components/Form';
 
 type Props = {
   params: { slug: string };
@@ -9,47 +8,12 @@ type Props = {
 };
 
 export default async function Page(props: Props) {
-  const { data, metaData } = await getData({
+  const data = await getData({
     searchParams: props.searchParams,
     slug: props.params.slug,
   });
 
-  return (
-    <Content>
-      <Background>
-        <div className="grid auto-rows-auto grid-cols-2 gap-2 ">
-          {Object.keys(metaData).map((name) => {
-            const { fieldType, visible } = metaData[name];
-
-            if (!visible) return false;
-
-            const Element = mapFieldTypeElement[fieldType];
-
-            return (
-              <ElementContainer
-                key={name}
-                id={name}
-                title={fieldType === 'CHECKBOX' ? '' : metaData[name].label}
-              >
-                <Element
-                  id={name}
-                  required={metaData[name].required}
-                  defaultValue={data[name]}
-                  disabled={metaData[name].disabled}
-                  title={metaData[name].label}
-                />
-              </ElementContainer>
-            );
-          })}
-        </div>
-        <div className="grid grid-cols-3 gap-5 pt-3">
-          <Button>Сохранить</Button>
-          <Button>Возврат на доработку</Button>
-          <Button color="danger">Отмена</Button>
-        </div>
-      </Background>
-    </Content>
-  );
+  return <Form {...data} />;
 }
 
 async function getData(params: Request) {

apps/web/app/layout.tsx

@@ -2,7 +2,7 @@ import './globals.css';
 import { Auth, Logo } from '@/components/layout';
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
-import { Header } from 'ui';
+import { Content, Header } from 'ui';
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -19,7 +19,7 @@ export default function RootLayout({ children }: { readonly children: React.Reac
           <Logo />
           <Auth />
         </Header>
-        {children}
+        <Content>{children}</Content>
       </body>
     </html>
   );

apps/web/components/Form.tsx

@@ -0,0 +1,45 @@
+import type { ResponseGetData, ResponseMetaData } from '@/api/ius/types';
+import { mapFieldTypeElement } from '@/config/elements';
+import { Background, Button, ElementContainer } from 'ui';
+
+type Props = {
+  readonly data: ResponseGetData;
+  readonly metaData: ResponseMetaData;
+};
+
+export function Form({ data, metaData }: Props) {
+  return (
+    <Background>
+      <div className="grid auto-rows-auto grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-3 ">
+        {Object.keys(metaData).map((name) => {
+          const { fieldType, visible } = metaData[name];
+
+          if (!visible) return false;
+
+          const Element = mapFieldTypeElement[fieldType];
+
+          return (
+            <ElementContainer
+              key={name}
+              id={name}
+              title={fieldType === 'CHECKBOX' ? '' : metaData[name].label}
+            >
+              <Element
+                id={name}
+                required={metaData[name].required}
+                defaultValue={data[name]}
+                disabled={metaData[name].disabled}
+                title={metaData[name].label}
+              />
+            </ElementContainer>
+          );
+        })}
+      </div>
+      <div className="grid grid-cols-1 gap-5 pt-3 lg:grid-cols-3">
+        <Button>Сохранить</Button>
+        <Button>Возврат на доработку</Button>
+        <Button color="danger">Отмена</Button>
+      </div>
+    </Background>
+  );
+}

packages/ui/background.tsx

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

packages/ui/container.tsx

@@ -4,7 +4,7 @@ export type ContainerProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren;
 
 export function ElementContainer({ children, id, title, ...props }: ContainerProps) {
   return (
-    <div {...props} className="flex flex-col">
+    <div {...props} className="flex flex-col justify-center">
       <label
         htmlFor={id}
         className="mb-1 block overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium text-black text-opacity-90"