fix(multiple sources): structure update, added page template

created DefaultPage template for setting "flex w-full flex-col items-center justify-between" div.
juunie-roh · Dec 14, 2023 · 5100951 · 5100951
1 parent 6cd5b6e
commit 5100951
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 23 deletions.
diff --git a/src/pages/about.tsx b/src/pages/about.tsx
@@ -1,7 +1,7 @@
 import Image from 'next/image';
 
 import { Meta } from '@/layouts/Meta';
-import { Main } from '@/templates/Main';
+import { DefaultPage, Main } from '@/templates';
 
 const About = () => (
   <Main
@@ -12,7 +12,7 @@ const About = () => (
       />
     }
   >
-    <div className="flex w-full flex-col items-center justify-between">
+    <DefaultPage>
       <div className="relative z-[-1] flex place-items-baseline before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-transparent before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px]">
         <p className="mr-3 text-lg text-gray-600">This Project is built with</p>
         <Image
@@ -90,7 +90,7 @@ const About = () => (
           </p>
         </a>
       </div>
-    </div>
+    </DefaultPage>
   </Main>
 );
 

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,5 +1,5 @@
 import { Meta } from '@/layouts/Meta';
-import { Main } from '@/templates/Main';
+import { DefaultPage, Main } from '@/templates';
 
 const Index = () => (
   <Main
@@ -10,23 +10,26 @@ const Index = () => (
       />
     }
   >
-    <p>
-      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis
-      delectus dolore inventore repellendus suscipit maiores veritatis
-      doloribus, architecto deleniti error ratione libero vero autem est
-      temporibus fugiat sunt ut eos.
-    </p>
-    <p>
-      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic dolores quos
-      voluptatibus tenetur cumque, unde porro quaerat veritatis similique
-      possimus cupiditate. Doloribus expedita iure qui delectus dolorem optio
-      magni repellendus?
-    </p>
-    <p>
-      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem dolor
-      nostrum fuga et. Aliquid, vitae totam. Ad eligendi voluptatem debitis
-      atque fuga! Molestiae, sequi eos natus ex necessitatibus corrupti ratione.
-    </p>
+    <DefaultPage>
+      <p>
+        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis
+        delectus dolore inventore repellendus suscipit maiores veritatis
+        doloribus, architecto deleniti error ratione libero vero autem est
+        temporibus fugiat sunt ut eos.
+      </p>
+      <p>
+        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic dolores
+        quos voluptatibus tenetur cumque, unde porro quaerat veritatis similique
+        possimus cupiditate. Doloribus expedita iure qui delectus dolorem optio
+        magni repellendus?
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem dolor
+        nostrum fuga et. Aliquid, vitae totam. Ad eligendi voluptatem debitis
+        atque fuga! Molestiae, sequi eos natus ex necessitatibus corrupti
+        ratione.
+      </p>
+    </DefaultPage>
   </Main>
 );
 

diff --git a/src/templates/DefaultPage.tsx b/src/templates/DefaultPage.tsx
@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+
+type IDefaultPageProps = {
+  children: ReactNode;
+};
+
+const DefaultPage = (props: IDefaultPageProps) => {
+  return (
+    <div className="flex w-full flex-col items-center justify-between">
+      {props.children}
+    </div>
+  );
+};
+
+export { DefaultPage };
diff --git a/src/templates/Main.tsx b/src/templates/Main.tsx
@@ -37,8 +37,8 @@ const Main = (props: IMainProps) => {
                     <li
                       className={`${
                         router.pathname === menu.path
-                          ? 'underline underline-offset-2 '
-                          : ''
+                          ? 'text-gray-900 underline underline-offset-2 '
+                          : 'text-gray-700 '
                       }inline-block rounded-lg px-2 hover:bg-gray-400 hover:text-gray-900`}
                       key={menu.id}
                     >

diff --git a/src/templates/index.ts b/src/templates/index.ts
@@ -0,0 +1,4 @@
+import { DefaultPage } from './DefaultPage';
+import { Main } from './Main';
+
+export { DefaultPage, Main };