apps/web: add back button

apps/web/app/layout.tsx

@@ -1,5 +1,6 @@
 import './globals.css';
 import { Auth, Logo } from '@/components/layout';
+import { Controls } from '@/components/layout/controls';
 import type { Metadata } from 'next';
 import localFont from 'next/font/local';
 import { Content, Header } from 'ui';
@@ -51,7 +52,10 @@ export default function RootLayout({ children }: { readonly children: React.Reac
           <Logo />
           <Auth />
         </Header>
-        <Content>{children}</Content>
+        <div className="flex flex-col items-center ">
+          <Controls />
+          <Content>{children}</Content>
+        </div>
       </body>
     </html>
   );

apps/web/components/layout/controls.tsx

@@ -0,0 +1,35 @@
+'use client';
+import { useRouter } from 'next/navigation';
+
+export function Controls() {
+  const router = useRouter();
+
+  return (
+    <div className="lg:w-standard flex w-full flex-row px-5 pt-5">
+      <button
+        className="flex flex-row gap-2"
+        type="button"
+        onClick={(e) => {
+          e.preventDefault();
+          router.back();
+        }}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth="1.5"
+          stroke="currentColor"
+          className="h-6 w-6"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M6.75 15.75L3 12m0 0l3.75-3.75M3 12h18"
+          />
+        </svg>
+        Назад
+      </button>
+    </div>
+  );
+}

apps/web/tailwind.config.ts

@@ -18,6 +18,11 @@ const config: Config = {
     '../../packages/ui/**/*.{js,ts,jsx,tsx,mdx}',
   ],
   theme: {
+    extend: {
+      width: {
+        standard: '1104px',
+      },
+    },
     // extend: {
     //   colors: {
     //     primary: COLORS.COLOR_PRIMARY,

packages/ui/background.tsx

@@ -4,7 +4,7 @@ import { cva } from 'class-variance-authority';
 import { forwardRef, type HTMLAttributes } from 'react';
 
 const variants = cva(
-  'grid w-full gap-2 rounded-sm border border-slate-100 bg-white p-5 lg:w-[1104px]'
+  'grid w-full gap-2 rounded-sm border border-slate-100 bg-white p-5 lg:w-standard'
 );
 
 export type BackgroundProps = HTMLAttributes<HTMLDivElement> & VariantProps<typeof variants>;

packages/ui/header.tsx

@@ -7,7 +7,7 @@ type Props = {
 export function Header({ children }: Props) {
   return (
     <header className="sticky top-0 flex h-16 w-full justify-center border-b border-slate-100 bg-white bg-opacity-80 backdrop-blur-sm">
-      <div className="m-0 flex w-full items-center justify-between px-5 lg:w-[1104px]">
+      <div className="lg:w-standard m-0 flex w-full items-center justify-between px-5">
         {children}
       </div>
     </header>