From 3efe7b57a95d075560f6d80549b5b3b8ec61ed8a Mon Sep 17 00:00:00 2001
From: Igor Papandinas <igor.papandinas@posteo.net>
Date: Wed, 17 Jan 2024 19:30:43 +0100
Subject: [PATCH] feat: containerStyle created

---
 app/page.tsx                   | 11 ++++++++---
 components/filters/toolbar.tsx |  5 +++--
 styles/index.ts                |  1 +
 3 files changed, 12 insertions(+), 5 deletions(-)
 create mode 100644 styles/index.ts

diff --git a/app/page.tsx b/app/page.tsx
index 9a0d815..ac3e5af 100644
--- a/app/page.tsx
+++ b/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={{
diff --git a/components/filters/toolbar.tsx b/components/filters/toolbar.tsx
index 0172a25..080db0d 100644
--- a/components/filters/toolbar.tsx
+++ b/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
diff --git a/styles/index.ts b/styles/index.ts
new file mode 100644
index 0000000..1709f11
--- /dev/null
+++ b/styles/index.ts
@@ -0,0 +1 @@
+export const containerStyle = "px-6 container mx-auto max-w-7xl";