Merge pull request #53 from arifszn/about-page

Add about page
arifszn · May 1, 2023 · 63d96a0 · 63d96a0
2 parents 4ba8544 + 3dbf433
commit 63d96a0
Show file tree

Hide file tree

Showing 11 changed files with 158 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -12,7 +12,7 @@
     ·
     <a href="https://github.com/arifszn/reforge/issues"><b>Report Bug</b></a>
     ·
-    <a href="https://github.com/arifszn/reforge/discussions"><b>Request Feature</b></a>
+    <a href="https://github.com/arifszn/reforge/discussions/categories/ideas"><b>Request Feature</b></a>
   </p>
 </p>
 
@@ -74,6 +74,7 @@ const CONFIG = {
   theme: {
     accentColor: '#30BEB8',
     sidebarLayout: 'mix',
+    showBreadcrumb: true,
   },
   metaTags: {
     title: 'Reforge',

diff --git a/config.ts b/config.ts
@@ -12,6 +12,7 @@ const CONFIG = {
   theme: {
     accentColor: '#30BEB8',
     sidebarLayout: LayoutType.MIX,
+    showBreadcrumb: true,
   },
   metaTags: {
     title: 'Reforge',

diff --git a/global.d.ts b/global.d.ts
@@ -28,6 +28,11 @@ declare const CONFIG: {
      * Sidebar layout
      */
     sidebarLayout: LayoutType;
+
+    /**
+     * Show breadcrumb
+     */
+    showBreadcrumb: boolean;
   };
 
   /**

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "reforge",
   "private": true,
-  "version": "1.0.0",
+  "version": "1.1.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

diff --git a/src/components/auth/AuthLayout.tsx b/src/components/auth/AuthLayout.tsx
@@ -21,12 +21,12 @@ const AuthLayout = () => {
       <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
         <div className="mx-auto max-w-2xl lg:max-w-4xl lg:px-12">
           <section>
-            <div className="flex flex-col items-center justify-center px-6 py-8 mx-auto lg:py-0 mt-12 md:mt-auto md:h-screen">
+            <div className="flex flex-col items-center justify-center px-6 py-8 mx-auto lg:py-0 mt-20 md:mt-auto md:h-screen">
               <div
                 className="bg-white rounded-2xl shadow-2xl w-full sm:w-96"
                 style={{
                   maxWidth: 'calc(100vw - 5rem)',
-                  padding: '2.375rem 2rem 3rem',
+                  padding: '2.375rem 1rem 3rem',
                 }}
               >
                 <div className="p-8 space-y-4 md:space-y-6 md:p-10">

diff --git a/src/components/demo-pages/about.tsx b/src/components/demo-pages/about.tsx
@@ -0,0 +1,131 @@
+import { BreadcrumbProps } from 'antd';
+import BasePageContainer from '../layout/PageContainer';
+import { webRoutes } from '../../routes/web';
+import { Link } from 'react-router-dom';
+import { AiFillGithub, AiOutlineBug, AiOutlineHeart } from 'react-icons/ai';
+import { FaRegLightbulb } from 'react-icons/fa';
+import packageJson from '../../../package.json';
+
+const breadcrumb: BreadcrumbProps = {
+  items: [
+    {
+      key: webRoutes.dashboard,
+      title: <Link to={webRoutes.dashboard}>Dashboard</Link>,
+    },
+    {
+      key: webRoutes.about,
+      title: <Link to={webRoutes.about}>About</Link>,
+    },
+  ],
+};
+
+const About = () => {
+  const packageVersion = packageJson.version;
+
+  return (
+    <BasePageContainer breadcrumb={breadcrumb}>
+      <div className="m-5">
+        <article>
+          <header className="mb-9 space-y-1">
+            <p className="font-display text-sm font-medium text-primary">
+              v{packageVersion}
+            </p>
+            <h1 className="font-display text-3xl tracking-tight text-slate-900">
+              Reforge
+            </h1>
+          </header>
+          <div>
+            <p className="lead">
+              An out-of-box UI solution for enterprise applications as a React
+              boilerplate.{' '}
+            </p>
+            <div className="my-12 grid grid-cols-1 gap-6 sm:grid-cols-2">
+              <div className="group relative rounded-xl border border-slate-200">
+                <div className="absolute -inset-px rounded-xl border-2 border-transparent opacity-0 [background:linear-gradient(var(--quick-links-hover-bg,theme(colors.sky.50)),var(--quick-links-hover-bg,theme(colors.sky.50)))_padding-box,linear-gradient(to_top,theme(colors.indigo.400),theme(colors.cyan.400),theme(colors.sky.500))_border-box] group-hover:opacity-100" />
+                <div className="relative overflow-hidden rounded-xl p-6">
+                  <AiFillGithub className="text-4xl opacity-90" />
+                  <h2 className="mt-4 font-display text-base text-slate-900">
+                    <a
+                      href="https://github.com/arifszn/reforge"
+                      target="_blank"
+                      rel="noreferrer"
+                      className="hover:text-primary"
+                    >
+                      <span className="absolute -inset-px rounded-xl" />
+                      GitHub
+                    </a>
+                  </h2>
+                  <p className="mt-1 text-sm text-slate-700">
+                    Source code of the website.
+                  </p>
+                </div>
+              </div>
+              <div className="group relative rounded-xl border border-slate-200">
+                <div className="absolute -inset-px rounded-xl border-2 border-transparent opacity-0 [background:linear-gradient(var(--quick-links-hover-bg,theme(colors.sky.50)),var(--quick-links-hover-bg,theme(colors.sky.50)))_padding-box,linear-gradient(to_top,theme(colors.indigo.400),theme(colors.cyan.400),theme(colors.sky.500))_border-box] group-hover:opacity-100" />
+                <div className="relative overflow-hidden rounded-xl p-6">
+                  <AiOutlineBug className="text-4xl opacity-90" />
+                  <h2 className="mt-4 font-display text-base text-slate-900">
+                    <a
+                      href="https://github.com/arifszn/reforge/issues"
+                      target="_blank"
+                      rel="noreferrer"
+                      className="hover:text-primary"
+                    >
+                      <span className="absolute -inset-px rounded-xl" />
+                      Report Bug
+                    </a>
+                  </h2>
+                  <p className="mt-1 text-sm text-slate-700">
+                    Something not working? Report a bug.
+                  </p>
+                </div>
+              </div>
+              <div className="group relative rounded-xl border border-slate-200">
+                <div className="absolute -inset-px rounded-xl border-2 border-transparent opacity-0 [background:linear-gradient(var(--quick-links-hover-bg,theme(colors.sky.50)),var(--quick-links-hover-bg,theme(colors.sky.50)))_padding-box,linear-gradient(to_top,theme(colors.indigo.400),theme(colors.cyan.400),theme(colors.sky.500))_border-box] group-hover:opacity-100" />
+                <div className="relative overflow-hidden rounded-xl p-6">
+                  <FaRegLightbulb className="text-4xl opacity-90" />
+                  <h2 className="mt-4 font-display text-base text-slate-900">
+                    <a
+                      href="https://github.com/arifszn/reforge/discussions/categories/ideas"
+                      target="_blank"
+                      rel="noreferrer"
+                      className="hover:text-primary"
+                    >
+                      <span className="absolute -inset-px rounded-xl" />
+                      Request Feature
+                    </a>
+                  </h2>
+                  <p className="mt-1 text-sm text-slate-700">
+                    Need something? Request a new feature.
+                  </p>
+                </div>
+              </div>
+              <div className="group relative rounded-xl border border-slate-200">
+                <div className="absolute -inset-px rounded-xl border-2 border-transparent opacity-0 [background:linear-gradient(var(--quick-links-hover-bg,theme(colors.sky.50)),var(--quick-links-hover-bg,theme(colors.sky.50)))_padding-box,linear-gradient(to_top,theme(colors.indigo.400),theme(colors.cyan.400),theme(colors.sky.500))_border-box] group-hover:opacity-100" />
+                <div className="relative overflow-hidden rounded-xl p-6">
+                  <AiOutlineHeart className="text-4xl opacity-90" />
+                  <h2 className="mt-4 font-display text-base text-slate-900">
+                    <a
+                      href="https://github.com/arifszn/reforge/blob/main/CONTRIBUTING.md"
+                      target="_blank"
+                      rel="noreferrer"
+                      className="hover:text-primary"
+                    >
+                      <span className="absolute -inset-px rounded-xl" />
+                      Contribute
+                    </a>
+                  </h2>
+                  <p className="mt-1 text-sm text-slate-700">
+                    Contribute to this project.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </article>
+      </div>
+    </BasePageContainer>
+  );
+};
+
+export default About;
diff --git a/src/components/layout/PageContainer.tsx b/src/components/layout/PageContainer.tsx
@@ -23,7 +23,7 @@ const BasePageContainer = (props: BasePageContainerProps) => {
     <PageContainer
       header={{
         title: props.title,
-        breadcrumb: props.breadcrumb,
+        breadcrumb: CONFIG.theme.showBreadcrumb ? props.breadcrumb : undefined,
         extra: props.extra,
       }}
       childrenContentStyle={isMobile ? { paddingInline: 15 } : {}}

diff --git a/src/components/layout/sidebar.tsx b/src/components/layout/sidebar.tsx
@@ -1,6 +1,6 @@
 import { webRoutes } from '../../routes/web';
 import { BiHomeAlt2 } from 'react-icons/bi';
-import Icon, { UserOutlined } from '@ant-design/icons';
+import Icon, { UserOutlined, InfoCircleOutlined } from '@ant-design/icons';
 
 export const sidebar = [
   {
@@ -15,4 +15,10 @@ export const sidebar = [
     name: 'Users',
     icon: <UserOutlined />,
   },
+  {
+    path: webRoutes.about,
+    key: webRoutes.about,
+    name: 'About',
+    icon: <InfoCircleOutlined />,
+  },
 ];
diff --git a/src/routes/browserRouter.tsx b/src/routes/browserRouter.tsx
@@ -9,6 +9,7 @@ import loadable from '@loadable/component';
 import ProgressBar from '../components/loader/progressBar';
 import RequireAuth from './requireAuth';
 import Login from '../components/auth/Login';
+import About from '../components/demo-pages/about';
 
 const errorElement = <ErrorPage />;
 const fallbackElement = <ProgressBar />;
@@ -56,6 +57,10 @@ export const browserRouter = createBrowserRouter([
         path: webRoutes.users,
         element: <Users />,
       },
+      {
+        path: webRoutes.about,
+        element: <About />,
+      },
     ],
   },
 

diff --git a/src/routes/web.tsx b/src/routes/web.tsx
@@ -4,4 +4,5 @@ export const webRoutes = {
   logout: '/logout',
   dashboard: '/dashboard',
   users: '/users',
+  about: '/about',
 };