From ef391a00e8d3950f1e8370e6dc14d0da3b5dc705 Mon Sep 17 00:00:00 2001
From: vchikalkin <djchikalkin@gmail.com>
Date: Tue, 11 Feb 2025 18:36:41 +0300
Subject: [PATCH] use Container in pages

---
 apps/web/app/(main)/profile/[telegramId]/page.tsx     |  5 +++--
 apps/web/app/(main)/profile/page.tsx                  |  5 +++--
 apps/web/app/(main)/profile/schedule/page.tsx         | 11 +++++++----
 apps/web/components/layout/container.tsx              |  8 ++++++--
 .../schedule/time-slots/components/add-slot-form.tsx  |  2 +-
 .../schedule/time-slots/components/slots-list.tsx     |  4 ++--
 6 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/apps/web/app/(main)/profile/[telegramId]/page.tsx b/apps/web/app/(main)/profile/[telegramId]/page.tsx
index c8bc6a1..3f6e7b6 100644
--- a/apps/web/app/(main)/profile/[telegramId]/page.tsx
+++ b/apps/web/app/(main)/profile/[telegramId]/page.tsx
@@ -1,4 +1,5 @@
 import { getProfile } from '@/actions/profile';
+import { Container } from '@/components/layout';
 import { PageHeader } from '@/components/navigation';
 import { ContactDataCard, PersonCard } from '@/components/profile';
 import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query';
@@ -19,10 +20,10 @@ export default async function ProfilePage(props: Readonly<Props>) {
   return (
     <HydrationBoundary state={dehydrate(queryClient)}>
       <PageHeader title="Профиль контакта" />
-      <div className="space-y-4">
+      <Container className="px-0">
         <PersonCard telegramId={telegramId} />
         <ContactDataCard telegramId={telegramId} />
-      </div>
+      </Container>
     </HydrationBoundary>
   );
 }
diff --git a/apps/web/app/(main)/profile/page.tsx b/apps/web/app/(main)/profile/page.tsx
index 15ef539..68a88dd 100644
--- a/apps/web/app/(main)/profile/page.tsx
+++ b/apps/web/app/(main)/profile/page.tsx
@@ -1,4 +1,5 @@
 import { getProfile } from '@/actions/profile';
+import { Container } from '@/components/layout';
 import { LinksCard, PersonCard, ProfileDataCard } from '@/components/profile';
 import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query';
 
@@ -12,11 +13,11 @@ export default async function ProfilePage() {
 
   return (
     <HydrationBoundary state={dehydrate(queryClient)}>
-      <div className="space-y-4">
+      <Container className="px-0">
         <PersonCard />
         <ProfileDataCard />
         <LinksCard />
-      </div>
+      </Container>
     </HydrationBoundary>
   );
 }
diff --git a/apps/web/app/(main)/profile/schedule/page.tsx b/apps/web/app/(main)/profile/schedule/page.tsx
index 98a518c..e5c85af 100644
--- a/apps/web/app/(main)/profile/schedule/page.tsx
+++ b/apps/web/app/(main)/profile/schedule/page.tsx
@@ -1,4 +1,5 @@
 import { HorizontalDivider } from '@/components/common/divider';
+import { Container } from '@/components/layout';
 import { PageHeader } from '@/components/navigation';
 import { AddSlotForm, SlotsCalendar, SlotsList } from '@/components/schedule';
 import { ScheduleSlotsProvider } from '@/context/schedule-slots';
@@ -7,10 +8,12 @@ export default function SchedulePage() {
   return (
     <ScheduleSlotsProvider>
       <PageHeader title="График работы" />
-      <SlotsCalendar />
-      <SlotsList />
-      <HorizontalDivider className="px-4" />
-      <AddSlotForm />
+      <Container className="px-0">
+        <SlotsCalendar />
+        <SlotsList />
+        <HorizontalDivider className="px-4" />
+        <AddSlotForm />
+      </Container>
     </ScheduleSlotsProvider>
   );
 }
diff --git a/apps/web/components/layout/container.tsx b/apps/web/components/layout/container.tsx
index 5617a63..34834bf 100644
--- a/apps/web/components/layout/container.tsx
+++ b/apps/web/components/layout/container.tsx
@@ -1,5 +1,9 @@
+import { cn } from '@repo/ui/lib/utils';
 import { type PropsWithChildren } from 'react';
 
-export function Container({ children }: Readonly<PropsWithChildren>) {
-  return <div className="space-y-4 px-4">{children}</div>;
+export function Container({
+  children,
+  className,
+}: Readonly<PropsWithChildren> & { readonly className?: string }) {
+  return <div className={cn('space-y-4 px-4', className)}>{children}</div>;
 }
diff --git a/apps/web/components/schedule/time-slots/components/add-slot-form.tsx b/apps/web/components/schedule/time-slots/components/add-slot-form.tsx
index 230ca7e..cb6f127 100644
--- a/apps/web/components/schedule/time-slots/components/add-slot-form.tsx
+++ b/apps/web/components/schedule/time-slots/components/add-slot-form.tsx
@@ -33,7 +33,7 @@ export const AddSlotForm = withContext(ContextProvider)(function () {
   };
 
   return (
-    <div className="p-4">
+    <div className="px-4">
       <form className="grid grid-cols-[1fr_1fr_auto] items-center gap-2" onSubmit={handleSubmit}>
         <AddTimePair />
         <Button className="rounded-full" type="submit">
diff --git a/apps/web/components/schedule/time-slots/components/slots-list.tsx b/apps/web/components/schedule/time-slots/components/slots-list.tsx
index 20fb0d9..c838e10 100644
--- a/apps/web/components/schedule/time-slots/components/slots-list.tsx
+++ b/apps/web/components/schedule/time-slots/components/slots-list.tsx
@@ -8,13 +8,13 @@ export function SlotsList() {
 
   if (isLoading)
     return (
-      <div className="flex items-center justify-center p-4">
+      <div className="flex items-center justify-center px-4">
         <Loader className="animate-spin" />
       </div>
     );
 
   return (
-    <div className="flex flex-col gap-4 p-4">
+    <div className="flex flex-col gap-4 px-4">
       {slots?.map((slot) => {
         if (!slot?.documentId) return null;