From f8a6d18c3738c55f72eeff37b42c619fe5a3e632 Mon Sep 17 00:00:00 2001
From: Kentai Radiquum <kentai.waah@gmail.com>
Date: Sun, 14 Jul 2024 08:17:52 +0500
Subject: [PATCH] feat: add containers to pages

---
 app/components/Navbar/Navbar.jsx                 | 2 +-
 app/components/RelatedSection/RelatedSection.jsx | 4 ++--
 app/pages/Index.jsx                              | 2 +-
 app/pages/IndexCategory.jsx                      | 2 +-
 app/pages/Login.jsx                              | 2 +-
 app/pages/Search.jsx                             | 4 ++--
 6 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/app/components/Navbar/Navbar.jsx b/app/components/Navbar/Navbar.jsx
index 589a59e..a968f5c 100644
--- a/app/components/Navbar/Navbar.jsx
+++ b/app/components/Navbar/Navbar.jsx
@@ -56,7 +56,7 @@ export const Navbar = () => {
 
   return (
     <header className="fixed bottom-0 left-0 z-50 w-full text-white bg-black sm:sticky sm:top-0">
-      <div className="flex items-center justify-between px-4 py-4">
+      <div className="container flex items-center justify-between px-4 py-4 mx-auto">
         <nav className="flex gap-4">
           {navLinks.map((link) => {
             return <Link key={link.id} href={link.href} className={`flex-col items-center sm:flex-row ${link.mobileMenu ? "hidden sm:flex" : "flex"}`}><span className={`iconify ${pathname == link.href ? link.iconActive : link.icon} w-6 h-6`}></span><span className={`${pathname == link.href ? "font-bold" : ""} text-xs sm:text-base`}>{link.title}</span></Link>;
diff --git a/app/components/RelatedSection/RelatedSection.jsx b/app/components/RelatedSection/RelatedSection.jsx
index 2154764..c3d1be5 100644
--- a/app/components/RelatedSection/RelatedSection.jsx
+++ b/app/components/RelatedSection/RelatedSection.jsx
@@ -10,8 +10,8 @@ export const RelatedSection = (props) => {
   );
   return (
     <section>
-      <div className="flex flex-col justify-between p-4 sm:flex-row">
-        <div className="flex p-4">
+      <div className="flex flex-col justify-between gap-4 p-4 xl:flex-row">
+        <div className="flex items-center justify-center p-4">
           {props.images.map((item) => {
             return (
               <img
diff --git a/app/pages/Index.jsx b/app/pages/Index.jsx
index c9e9ff4..f91075b 100644
--- a/app/pages/Index.jsx
+++ b/app/pages/Index.jsx
@@ -16,7 +16,7 @@ export function IndexPage() {
   const [announceReleasesData] = useFetchReleases("announce");
 
   return (
-    <main className="flex flex-col pt-2 pb-16 sm:pt-4 sm:pb-0">
+    <main className="container flex flex-col pt-2 pb-16 mx-auto sm:pt-4 sm:pb-0">
       {lastReleasesData ? (
         <ReleaseCourusel
           sectionTitle="Последние релизы"
diff --git a/app/pages/IndexCategory.jsx b/app/pages/IndexCategory.jsx
index 265e948..1f813c4 100644
--- a/app/pages/IndexCategory.jsx
+++ b/app/pages/IndexCategory.jsx
@@ -57,7 +57,7 @@ export function IndexCategoryPage(props) {
     );
 
   return (
-    <main className="pt-2 pb-16 sm:pt-4 sm:pb-0">
+    <main className="container pt-2 pb-16 mx-auto sm:pt-4 sm:pb-0">
       {content && (
         <ReleaseSection
           sectionTitle={props.SectionTitleMapping[props.slug]}
diff --git a/app/pages/Login.jsx b/app/pages/Login.jsx
index 3b001c3..d0c25c8 100644
--- a/app/pages/Login.jsx
+++ b/app/pages/Login.jsx
@@ -50,7 +50,7 @@ export function LoginPage() {
   }, [userStore.user]);
 
   return (
-    <main>
+    <main className="container mx-auto">
       <section className="bg-gray-50 dark:bg-gray-900">
         <div className="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
           <div className="w-full bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700">
diff --git a/app/pages/Search.jsx b/app/pages/Search.jsx
index 32d5767..5b9b1cf 100644
--- a/app/pages/Search.jsx
+++ b/app/pages/Search.jsx
@@ -66,10 +66,10 @@ export function SearchPage() {
   if (error) return <div>failed to load</div>;
 
   return (
-    <main className="px-2 pt-2 pb-16 sm:pt-4 sm:pb-0">
+    <main className="container px-2 pt-2 pb-16 mx-auto sm:pt-4 sm:pb-0">
       <div>
         <form
-          className="max-w-md mx-auto"
+          className="max-w-full mx-auto"
           onSubmit={(e) => {
             e.preventDefault();
             setQuery(e.target[0].value.trim());