feat: containerStyle created

app/page.tsx

@@ -3,6 +3,7 @@ import Toolbar from "@/components/filters/toolbar";
 import CtaBanner from "@/components/cta-banner";
 import { title } from "@/components/primitives";
 import { queryDatabase } from "@/lib/notion";
+import { containerStyle } from "@/styles";
 import { SearchParams } from "@/types/filters";
 import {
   processNotionFilters,
@@ -28,14 +29,18 @@ export default async function Home({ searchParams }: IHomeProps) {
 
   return (
     <>
-      <section className="flex flex-col items-center text-center pt-10 pb-24 px-6 container mx-auto max-w-7xl">
+      <section
+        className={`flex flex-col items-center text-center pt-10 pb-24 ${containerStyle}`}
+      >
         <h1 className={title()}>Find Collaborations,</h1>
         <h1 className={title()}>Collect Kudos</h1>
       </section>
-      <CtaBanner />
+      <section className={containerStyle}>
+        <CtaBanner />
+      </section>
       <div className="flex flex-col pt-10">
         <Toolbar searchParams={searchParams} />
-        <section className="px-6 container mx-auto max-w-7xl">
+        <section className={containerStyle}>
           <ContributionsTable
             items={items}
             queries={{

components/filters/toolbar.tsx

@@ -1,4 +1,5 @@
 "use client";
+import { useRef } from "react";
 import {
   LANGUAGES_OPTIONS,
   INTERESTS_OPTIONS,
@@ -7,11 +8,11 @@ import {
 } from "@/data/filters";
 import { useFilters } from "@/hooks/useFilters";
 import useSticky from "@/hooks/useSticky";
+import { containerStyle } from "@/styles";
 import { SearchParams } from "@/types/filters";
 import CheckboxFilter from "./checkbox-filter";
 import ClearFilters from "./clear-filters";
 import SelectFilter from "./select-filter";
-import { useRef } from "react";
 interface IToolbarProps {
   searchParams: SearchParams;
 }
@@ -40,7 +41,7 @@ const Toolbar = ({ searchParams }: IToolbarProps) => {
       }`}
       ref={toolbarRef}
     >
-      <div className="container mx-auto max-w-7xl px-6 pt-6 flex flex-col gap-4">
+      <div className={`pt-6 flex flex-col gap-4 ${containerStyle}`}>
         <div className="flex flex-col gap-4 items-start overflow-hidden lg:flex-row lg:items-center">
           <div className="flex flex-nowrap overflow-x-auto overflow-y-hidden gap-4 w-full sm:w-auto xl:overflow-visible">
             <SelectFilter

styles/index.ts

@@ -0,0 +1 @@
+export const containerStyle = "px-6 container mx-auto max-w-7xl";