refactor: break out Section container

components/MyPages/Blocks/Stays/Container/container.module.css

@@ -1,10 +0,0 @@
-.container {
-  display: grid;
-  gap: var(--Spacing-x3);
-}
-
-@media screen and (min-width: 1367px) {
-  .container {
-    gap: var(--Spacing-x7);
-  }
-}

components/MyPages/Blocks/Stays/Container/index.tsx

@@ -1,5 +0,0 @@
-import styles from "./container.module.css"
-
-export default function Container({ children }: React.PropsWithChildren) {
-  return <section className={styles.container}>{children}</section>
-}

components/MyPages/Blocks/Stays/Previous/index.tsx

@@ -1,8 +1,8 @@
 import { serverClient } from "@/lib/trpc/server"
 
-import SectionHeader from "@/components/SectionHeader"
+import SectionContainer from "@/components/Section/Container"
+import SectionHeader from "@/components/Section/Header"
 
-import Container from "../Container"
 import ClientPreviousStays from "./Client"
 
 import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
@@ -18,12 +18,12 @@ export default async function PreviousStays({
     return null
   }
   return (
-    <Container>
+    <SectionContainer>
       <SectionHeader title={title} subtitle={subtitle} link={link} />
       <ClientPreviousStays
         initialPreviousStays={initialPreviousStays}
         lang={lang}
       />
-    </Container>
+    </SectionContainer>
   )
 }

components/MyPages/Blocks/Stays/Soonest/index.tsx

@@ -1,13 +1,12 @@
 import { serverClient } from "@/lib/trpc/server"
 
-import Header from "@/components/SectionHeader"
+import SectionContainer from "@/components/Section/Container"
+import Header from "@/components/Section/Header"
 import Grids from "@/components/TempDesignSystem/Grids"
 
 import StayCard from "../StayCard"
 import EmptyUpcomingStaysBlock from "./EmptyUpcomingStays"
 
-import styles from "./soonest.module.css"
-
 import { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
 
 export default async function SoonestStays({
@@ -22,7 +21,7 @@ export default async function SoonestStays({
   }
 
   return (
-    <section className={styles.container}>
+    <SectionContainer>
       <Header title={title} subtitle={subtitle} link={link} />
       {response.data.length ? (
         <Grids.Stackable>
@@ -37,6 +36,6 @@ export default async function SoonestStays({
       ) : (
         <EmptyUpcomingStaysBlock />
       )}
-    </section>
+    </SectionContainer>
   )
 }

components/MyPages/Blocks/Stays/Soonest/soonest.module.css

@@ -1,4 +0,0 @@
-.container {
-  display: grid;
-  gap: var(--Spacing-x2);
-}

components/MyPages/Blocks/Stays/Upcoming/index.tsx

@@ -1,8 +1,8 @@
 import { serverClient } from "@/lib/trpc/server"
 
-import SectionHeader from "@/components/SectionHeader"
+import SectionContainer from "@/components/Section/Container"
+import SectionHeader from "@/components/Section/Header"
 
-import Container from "../Container"
 import ClientUpcomingStays from "./Client"
 
 import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
@@ -18,12 +18,12 @@ export default async function UpcomingStays({
     return null
   }
   return (
-    <Container>
+    <SectionContainer>
       <SectionHeader title={title} subtitle={subtitle} link={link} />
       <ClientUpcomingStays
         initialUpcomingStays={initialUpcomingStays}
         lang={lang}
       />
-    </Container>
+    </SectionContainer>
   )
 }