fix: flex col ≠ flex row

nodejs · Sep 24, 2024 · 85e4004 · 85e4004
1 parent f37e28b
commit 85e4004
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 14 deletions.
diff --git a/apps/site/app/[locale]/error.tsx b/apps/site/app/[locale]/error.tsx
@@ -6,14 +6,14 @@ import { useTranslations } from 'next-intl';
 import type { FC } from 'react';
 
 import Button from '@/components/Common/Button';
-import HomeLayout from '@/layouts/Home';
+import GlowingBackdropLayout from '@/layouts/GlowingBackdrop';
 
 const ErrorPage: FC<{ error: Error }> = ({ error }) => {
   captureException(error);
   const t = useTranslations();
 
   return (
-    <HomeLayout>
+    <GlowingBackdropLayout>
       500
       <h1 className="special -mt-4">
         {t('layouts.error.internalServerError.title')}
@@ -25,7 +25,7 @@ const ErrorPage: FC<{ error: Error }> = ({ error }) => {
         {t('layouts.error.backToHome')}
         <ArrowRightIcon />
       </Button>
-    </HomeLayout>
+    </GlowingBackdropLayout>
   );
 };
 

diff --git a/apps/site/app/[locale]/not-found.tsx b/apps/site/app/[locale]/not-found.tsx
@@ -6,13 +6,13 @@ import { useTranslations } from 'next-intl';
 import type { FC } from 'react';
 
 import Button from '@/components/Common/Button';
-import HomeLayout from '@/layouts/Home';
+import GlowingBackdropLayout from '@/layouts/GlowingBackdrop';
 
 const NotFoundPage: FC = () => {
   const t = useTranslations();
 
   return (
-    <HomeLayout>
+    <GlowingBackdropLayout>
       404
       <h1 className="special -mt-4">{t('layouts.error.notFound.title')}</h1>
       <div className="my-4 flex items-center justify-center">
@@ -30,7 +30,7 @@ const NotFoundPage: FC = () => {
         {t('layouts.error.backToHome')}
         <ArrowRightIcon />
       </Button>
-    </HomeLayout>
+    </GlowingBackdropLayout>
   );
 };
 

diff --git a/apps/site/app/global-error.tsx b/apps/site/app/global-error.tsx
@@ -6,7 +6,7 @@ import type { FC } from 'react';
 
 import Button from '@/components/Common/Button';
 import BaseLayout from '@/layouts/Base';
-import HomeLayout from '@/layouts/Home';
+import GlowingBackdropLayout from '@/layouts/GlowingBackdrop';
 
 const GlobalErrorPage: FC<{ error: Error }> = ({ error }) => {
   captureException(error);
@@ -15,7 +15,7 @@ const GlobalErrorPage: FC<{ error: Error }> = ({ error }) => {
     <html>
       <body>
         <BaseLayout>
-          <HomeLayout>
+          <GlowingBackdropLayout>
             500
             <h1 className="special -mt-4">Internal Server Error</h1>
             <p className="-mt-4 max-w-sm text-center text-lg">
@@ -25,7 +25,7 @@ const GlobalErrorPage: FC<{ error: Error }> = ({ error }) => {
               Back to Home
               <ArrowRightIcon />
             </Button>
-          </HomeLayout>
+          </GlowingBackdropLayout>
         </BaseLayout>
       </body>
     </html>

diff --git a/apps/site/components/withLayout.tsx b/apps/site/components/withLayout.tsx
@@ -5,15 +5,15 @@ import ArticlePageLayout from '@/layouts/ArticlePage';
 import BlogLayout from '@/layouts/Blog';
 import DefaultLayout from '@/layouts/Default';
 import DownloadLayout from '@/layouts/Download';
-import HomeLayout from '@/layouts/Home';
+import GlowingBackdropLayout from '@/layouts/GlowingBackdrop';
 import LearnLayout from '@/layouts/Learn';
 import PostLayout from '@/layouts/Post';
 import SearchLayout from '@/layouts/Search';
 import type { Layouts } from '@/types';
 
 const layouts = {
   about: AboutLayout,
-  home: HomeLayout,
+  home: props => <GlowingBackdropLayout kind="home" {...props} />,
   learn: LearnLayout,
   page: DefaultLayout,
   'blog-post': PostLayout,

diff --git a/apps/site/layouts/Home.tsx → apps/site/layouts/GlowingBackdrop.tsx b/apps/site/layouts/Home.tsx → apps/site/layouts/GlowingBackdrop.tsx
@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import type { FC, PropsWithChildren } from 'react';
 
 import GlowingBackdrop from '@/components/Common/GlowingBackdrop';
@@ -6,16 +7,29 @@ import WithNavBar from '@/components/withNavBar';
 
 import styles from './layouts.module.css';
 
-const HomeLayout: FC<PropsWithChildren> = ({ children }) => (
+type GlowingBackdropLayoutProps = PropsWithChildren<{
+  kind?: 'home';
+}>;
+
+const GlowingBackdropLayout: FC<GlowingBackdropLayoutProps> = ({
+  kind,
+  children,
+}) => (
   <>
     <WithNavBar />
     <div className={styles.centeredLayout}>
       <GlowingBackdrop />
 
-      <main className={styles.homeLayout}>{children}</main>
+      <main
+        className={classNames({
+          [styles.homeLayout]: kind === 'home',
+        })}
+      >
+        {children}
+      </main>
     </div>
     <WithFooter />
   </>
 );
 
-export default HomeLayout;
+export default GlowingBackdropLayout;