Add component preview pages

madebyais · Jul 16, 2021 · 9e0dfde · 9e0dfde
1 parent a089a2c
commit 9e0dfde
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -18,6 +18,10 @@ For base css style, you can go to [TailwindCSS](https://tailwindcss.com/) docume
 - Login using Google
 - Login using Facebook
 
+#### Navigation Bar
+- 4 plug-n-play top navigation bar types
+- 1 plug-n-play footer
+
 ### Getting Started
 
 Before getting started, you can clone this project or run following command:
@@ -42,6 +46,10 @@ yarn dev
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
+### Component Preview
+
+After you run the dev server, you can access [http://localhost:3000/components](http://localhost:3000/components) to preview plug-n-play components included in this project. Or you can access to `pages/components` to view more detail in code.
+
 ### Custom Theme
 
 You can customize the theme color and others based on [Antd Custom Theme](https://ant.design/docs/react/customize-theme)

diff --git a/pages/components/_layout.tsx b/pages/components/_layout.tsx
@@ -0,0 +1,32 @@
+import Head from "next/head";
+import Link from "next/link";
+import { FC } from "react";
+
+const LayoutComponentPreview: FC = ({ children }) => {
+  return (
+    <div className={`w-full h-screen bg-gray-100`}>
+      <Head>
+        <title>Component Preview</title>
+      </Head>
+
+      <main className={`grid grid-cols-8`}>
+        <div className={`bg-white h-screen col-span-1 p-5 border-r`}>
+          <div className={`font-bold uppercase mb-10`}>Component Preview</div>
+          <Menu title={`Top Navigation Bar`} href={`/components/top-navbar`} />
+          <Menu title={`Footer`} href={`/components/footer`} />
+        </div>
+        <div className={`h-screen col-span-7 p-5 overflow-y-scroll`}>
+          {children}
+        </div>
+      </main>
+    </div>
+  )
+}
+
+const Menu = ({ title, href }: any) => (
+  <Link href={href}>
+    <div className={`cursor-pointer block mb-2`}>{title}</div>
+  </Link>
+)
+
+export default LayoutComponentPreview
diff --git a/pages/components/footer.tsx b/pages/components/footer.tsx
@@ -0,0 +1,11 @@
+import { Footer1 } from "components/footer";
+import LayoutComponentPreview from "./_layout";
+
+export default function HeaderPreviewPage() {
+  return (
+    <LayoutComponentPreview>
+      <div className={`mb-10 text-lg font-bold uppercase`}>Footer</div>
+      <div className={`bg-white mb-10 pb-5`}><Footer1 /></div>
+    </LayoutComponentPreview>
+  )
+}
diff --git a/pages/components/index.tsx b/pages/components/index.tsx
@@ -0,0 +1,9 @@
+import LayoutComponentPreview from "./_layout";
+
+export default function ComponentPreviewPage() {
+  return (
+    <LayoutComponentPreview>
+      test
+    </LayoutComponentPreview>
+  )
+}
diff --git a/pages/components/top-navbar.tsx b/pages/components/top-navbar.tsx
@@ -0,0 +1,14 @@
+import { TopNavBar1, TopNavBar2, TopNavBar3, TopNavBar4 } from "components/navbar";
+import LayoutComponentPreview from "./_layout";
+
+export default function HeaderPreviewPage() {
+  return (
+    <LayoutComponentPreview>
+      <div className={`mb-10 text-lg font-bold uppercase`}>Top Navigation Bar</div>
+      <div className={`bg-white mb-10`}><TopNavBar1 /></div>
+      <div className={`bg-white mb-10`}><TopNavBar2 /></div>
+      <div className={`bg-white mb-10`}><TopNavBar3 /></div>
+      <div className={`bg-white pt-5 mb-10`}><TopNavBar4 /></div>
+    </LayoutComponentPreview>
+  )
+}