feat: add layout2 to theme and layouts configs

feat: create home page and add it to routes config
feat: create layout2 regular components
2023-06-07 21:55:56 +01:00 · 2023-06-07 21:55:32 +01:00 · 2023-06-07 21:55:00 +01:00 · 2023-06-07 21:54:10 +01:00 · 2023-06-07 21:53:50 +01:00 · 2023-06-05 21:27:33 +01:00
17 changed files with 343 additions and 152 deletions
--- a/public/index.html
+++ b/public/index.html
@@ -1,155 +1,129 @@
 <!DOCTYPE html>
-<html lang='en'>
-    <head>
-        <meta charset='utf-8'>
-        <meta name='description' content='Fuse React - Material design admin template with pre-built apps and pages'>
-        <meta name='keywords'
-              content='React,Redux,Material UI Next,Material,Material Design,Google Material Design,HTML,CSS,Firebase,Authentication,Material Redux Theme,Material Redux Template'>
-        <meta name='author' content='Withinpixels'>
-        <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
-        <meta name='theme-color' content='#000000'>
-        <base href='/'>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="description" content="Rental Calculator" />
+    <meta name="keywords" content="Real estate" />
+    <meta name="author" content="Withinpixels" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta name="theme-color" content="#000000" />
+    <base href="/" />

-        <link href='%PUBLIC_URL%/assets/tailwind-base.css' rel='stylesheet'>
+    <link href="%PUBLIC_URL%/assets/tailwind-base.css" rel="stylesheet" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <!--<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">-->
+    <!--        You can choose main icon from variety of the material ui icon fonts-->
+    <link
+      href="%PUBLIC_URL%/assets/fonts/material-design-icons/MaterialIconsOutlined.css"
+      rel="stylesheet"
+    />
+    <!--        <link href="%PUBLIC_URL%/assets/fonts/material-design-icons/MaterialIcons.css" rel="stylesheet">-->
+    <!--        <link href="%PUBLIC_URL%/assets/fonts/material-design-icons/MaterialIconsRound.css" rel="stylesheet">-->
+    <!--        <link href="%PUBLIC_URL%/assets/fonts/material-design-icons/MaterialIconsSharp.css" rel="stylesheet">-->
+    <!--        <link href="%PUBLIC_URL%/assets/fonts/material-design-icons/MaterialIconsTwoTone.css" rel="stylesheet">-->
+    <link href="%PUBLIC_URL%/assets/fonts/inter/inter.css" rel="stylesheet" />
+    <link href="%PUBLIC_URL%/assets/fonts/meteocons/style.css" rel="stylesheet" />

-        <!--
-          manifest.json provides metadata used when your web app is added to the
-          homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-        -->
-        <link rel='manifest' href='%PUBLIC_URL%/manifest.json'>
-        <link rel='shortcut icon' href='%PUBLIC_URL%/favicon.ico'>
+    <noscript id="emotion-insertion-point"></noscript>
+    <title>Rental Calculator</title>

-        <!--<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">-->
+    <!-- FUSE Splash Screen CSS -->
+    <style>
+      body #fuse-splash-screen {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: #111827;
+        color: #f9fafb;
+        z-index: 999999;
+        pointer-events: none;
+        opacity: 1;
+        visibility: visible;
+        transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
+      }

-        <!--        You can choose main icon from variety of the material ui icon fonts-->
-        <link href='%PUBLIC_URL%/assets/fonts/material-design-icons/MaterialIconsOutlined.css' rel='stylesheet'>
-        <!--        <link href="%PUBLIC_URL%/assets/fonts/material-design-icons/MaterialIcons.css" rel="stylesheet">-->
-        <!--        <link href="%PUBLIC_URL%/assets/fonts/material-design-icons/MaterialIconsRound.css" rel="stylesheet">-->
-        <!--        <link href="%PUBLIC_URL%/assets/fonts/material-design-icons/MaterialIconsSharp.css" rel="stylesheet">-->
-        <!--        <link href="%PUBLIC_URL%/assets/fonts/material-design-icons/MaterialIconsTwoTone.css" rel="stylesheet">-->
+      body #fuse-splash-screen img {
+        width: 120px;
+        max-width: 120px;
+      }

-        <link href='%PUBLIC_URL%/assets/fonts/inter/inter.css' rel='stylesheet'>
-        <link href='%PUBLIC_URL%/assets/fonts/meteocons/style.css' rel='stylesheet'>
+      #spinner {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-top: 40px;
+        width: 56px;
+      }

-        <noscript id='emotion-insertion-point'></noscript>
-        <!--
-          Notice the use of %PUBLIC_URL% in the tags above.
-          It will be replaced with the URL of the `public` folder during the build.
-          Only files inside the `public` folder can be referenced from the HTML.
+      #spinner > div {
+        width: 12px;
+        height: 12px;
+        background-color: #1e96f7;
+        border-radius: 100%;
+        display: inline-block;
+        -webkit-animation: fuse-bouncedelay 1s infinite ease-in-out both;
+        animation: fuse-bouncedelay 1s infinite ease-in-out both;
+      }

-          Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-          work correctly both with client-side routing and a non-root public URL.
-          Learn how to configure a non-root public URL by running `npm run build`.
-        -->
-        <title>Fuse React - Material Design Admin Template</title>
+      #spinner .bounce1 {
+        -webkit-animation-delay: -0.32s;
+        animation-delay: -0.32s;
+      }

-        <!-- FUSE Splash Screen CSS -->
-        <style>
-            body #fuse-splash-screen {
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-                justify-content: center;
-                position: fixed;
-                top: 0;
-                left: 0;
-                right: 0;
-                bottom: 0;
-                background-color: #111827;
-                color: #F9FAFB;
-                z-index: 999999;
-                pointer-events: none;
-                opacity: 1;
-                visibility: visible;
-                transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
-            }
+      #spinner .bounce2 {
+        -webkit-animation-delay: -0.16s;
+        animation-delay: -0.16s;
+      }

-            body #fuse-splash-screen img {
-                width: 120px;
-                max-width: 120px;
-            }
+      @-webkit-keyframes fuse-bouncedelay {
+        0%,
+        80%,
+        100% {
+          -webkit-transform: scale(0);
+        }
+        40% {
+          -webkit-transform: scale(1);
+        }
+      }

-            #spinner {
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                margin-top: 40px;
-                width: 56px;
-            }
+      @keyframes fuse-bouncedelay {
+        0%,
+        80%,
+        100% {
+          -webkit-transform: scale(0);
+          transform: scale(0);
+        }
+        40% {
+          -webkit-transform: scale(1);
+          transform: scale(1);
+        }
+      }
+    </style>
+    <!-- / FUSE Splash Screen CSS -->
+  </head>
+  <body>
+    <noscript> You need to enable JavaScript to run this app. </noscript>

-            #spinner > div {
-                width: 12px;
-                height: 12px;
-                background-color: #1E96F7;
-                border-radius: 100%;
-                display: inline-block;
-                -webkit-animation: fuse-bouncedelay 1s infinite ease-in-out both;
-                animation: fuse-bouncedelay 1s infinite ease-in-out both;
-            }
-
-            #spinner .bounce1 {
-                -webkit-animation-delay: -0.32s;
-                animation-delay: -0.32s;
-            }
-
-           #spinner .bounce2 {
-                -webkit-animation-delay: -0.16s;
-                animation-delay: -0.16s;
-            }
-
-            @-webkit-keyframes fuse-bouncedelay {
-                0%, 80%, 100% {
-                    -webkit-transform: scale(0)
-                }
-                40% {
-                    -webkit-transform: scale(1.0)
-                }
-            }
-
-            @keyframes fuse-bouncedelay {
-                0%, 80%, 100% {
-                    -webkit-transform: scale(0);
-                    transform: scale(0);
-                }
-                40% {
-                    -webkit-transform: scale(1.0);
-                    transform: scale(1.0);
-                }
-            }
-
-
-        </style>
-        <!-- / FUSE Splash Screen CSS -->
-    </head>
-    <body>
-
-    <noscript>
-        You need to enable JavaScript to run this app.
-    </noscript>
-
-    <div id='root' class='flex'>
-        <!-- FUSE Splash Screen -->
-        <div id='fuse-splash-screen'>
-            <div class='logo'>
-                <img width='128' src='assets/images/logo/logo.svg' alt='logo'>
-            </div>
-            <div id='spinner'>
-                <div class='bounce1'></div>
-                <div class='bounce2'></div>
-                <div class='bounce3'></div>
-            </div>
+    <div id="root" class="flex">
+      <!-- FUSE Splash Screen -->
+      <div id="fuse-splash-screen">
+        <div class="logo">
+          <img width="128" src="assets/images/logo/logo.svg" alt="logo" />
        </div>
-        <!-- / FUSE Splash Screen -->
+        <div id="spinner">
+          <div class="bounce1"></div>
+          <div class="bounce2"></div>
+          <div class="bounce3"></div>
+        </div>
+      </div>
+      <!-- / FUSE Splash Screen -->
    </div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-    </body>
+  </body>
 </html>
--- a/src/app/configs/navigation-i18n/en.js
+++ b/src/app/configs/navigation-i18n/en.js
@@ -1,8 +1,8 @@
-const en = {
+const locale = {
  dashboard: 'Dashboard',
  favorites: 'Favorites',
  history: 'History',
  profile: 'My profile',
 };

-export default en;
+export default locale;
--- a/src/app/configs/routesConfig.js
+++ b/src/app/configs/routesConfig.js
@@ -4,17 +4,13 @@ import { Navigate } from 'react-router-dom';
 import settingsConfig from 'app/configs/settingsConfig';
 import Error404Page from '../main/404/Error404Page';
 import navigationPagesConfigs from '../main/navigationPages/navigationPagesConfig';
-import authPagesConfig from '../main/authPages/authPagesConfig';
+import authPagesConfigs from '../main/authPages/authPagesConfigs';
+import HomeConfig from '../main/home/HomeConfig';

-const routeConfigs = [...navigationPagesConfigs, ...authPagesConfig];
+const routeConfigs = [...navigationPagesConfigs, ...authPagesConfigs, HomeConfig];

 const routes = [
  ...FuseUtils.generateRoutesFromConfigs(routeConfigs, settingsConfig.defaultAuth),
-  {
-    path: '/',
-    element: <Navigate to="/" />,
-    auth: settingsConfig.defaultAuth,
-  },
  {
    path: 'loading',
    element: <FuseLoading />,
--- a/src/app/main/authPages/authPagesConfigs.js
+++ b/src/app/main/authPages/authPagesConfigs.js
@@ -2,6 +2,6 @@ import SignInConfig from './sign-in/SignInConfig';
 import SignOutConfig from './sign-out/SignOutConfig';
 import SignUpConfig from './sign-up/SignUpConfig';

-const authPagesConfig = [SignInConfig, SignOutConfig, SignUpConfig];
+const authPagesConfigs = [SignInConfig, SignOutConfig, SignUpConfig];

-export default authPagesConfig;
+export default authPagesConfigs;
--- a/src/app/main/home/Home.js
+++ b/src/app/main/home/Home.js
@@ -0,0 +1,7 @@
+import { memo } from 'react';
+
+function Home(props) {
+  return <div>Heeeeelloooooo!</div>;
+}
+
+export default memo(Home);
--- a/src/app/main/home/HomeConfig.js
+++ b/src/app/main/home/HomeConfig.js
@@ -0,0 +1,23 @@
+import i18next from 'i18next';
+
+import Home from './Home';
+import en from './i18n/en';
+
+i18next.addResourceBundle('en', 'homePage', en);
+
+const HomeConfig = {
+  settings: {
+    layout: {
+      config: {},
+      style: 'layout2',
+    },
+  },
+  routes: [
+    {
+      path: '/',
+      element: <Home />,
+    },
+  ],
+};
+
+export default HomeConfig;
--- a/src/app/main/home/HomePage.js
+++ b/src/app/main/home/HomePage.js
--- a/src/app/main/home/i18n/en.js
+++ b/src/app/main/home/i18n/en.js
@@ -0,0 +1,3 @@
+const locale = {};
+
+export default locale;
--- a/src/app/theme-layouts/layout2/Layout2.js
+++ b/src/app/theme-layouts/layout2/Layout2.js
@@ -0,0 +1,32 @@
+import FuseSuspense from '@fuse/core/FuseSuspense';
+import AppContext from 'app/AppContext';
+import { selectFuseCurrentLayoutConfig } from 'app/store/fuse/settingsSlice';
+import i18next from 'i18next';
+import { memo, useContext } from 'react';
+import { useSelector } from 'react-redux';
+import { useRoutes } from 'react-router-dom';
+import FooterLayout2 from './components/FooterLayout2';
+import HeaderLayout2 from './components/HeaderLayout2';
+
+import en from './i18n/en';
+
+i18next.addResourceBundle('en', 'layout2', en);
+
+function Layout2(props) {
+  const config = useSelector(selectFuseCurrentLayoutConfig);
+  const appContext = useContext(AppContext);
+  const { routes } = appContext;
+
+  return (
+    <>
+      {config.header.display && <HeaderLayout2 />}
+      <main id="fuse-main" className="flex flex-col min-h-full min-w-full mt-72">
+        <FuseSuspense>{useRoutes(routes)}</FuseSuspense>
+        {props.children}
+      </main>
+      {config.footer.display && <FooterLayout2 />}
+    </>
+  );
+}
+
+export default memo(Layout2);
--- a/src/app/theme-layouts/layout2/Layout2Config.js
+++ b/src/app/theme-layouts/layout2/Layout2Config.js
@@ -0,0 +1,37 @@
+const config = {
+  title: 'Layout 2 - Regular',
+  defaults: {
+    header: {
+      display: true,
+    },
+    footer: {
+      display: true,
+    },
+  },
+  form: {
+    mode: {
+      title: 'Mode',
+      type: 'radio',
+      options: [
+        {
+          name: 'Boxed',
+          value: 'boxed',
+        },
+        {
+          name: 'Full Width',
+          value: 'fullwidth',
+        },
+        {
+          name: 'Container',
+          value: 'container',
+        },
+      ],
+    },
+    containerWidth: {
+      title: 'Container Width (px)',
+      type: 'number',
+    },
+  },
+};
+
+export default config;
--- a/src/app/theme-layouts/layout2/components/FooterLayout2.js
+++ b/src/app/theme-layouts/layout2/components/FooterLayout2.js
@@ -0,0 +1,52 @@
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import linksConfigLayout2 from './linksLayout2Config';
+
+function FooterLayout2() {
+  const { t } = useTranslation('layout2');
+
+  return (
+    <footer className="w-full bg-gray-900">
+      <div className="flex gap-96 max-w-screen-2xl px-10 py-52">
+        <ul className="flex flex-col gap-16 mr-96">
+          <li>
+            <Link to="/">
+              <img
+                className="max-w-[88px] max-h-[45px]"
+                src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Instagram_icon.png/600px-Instagram_icon.png"
+                alt={t('logo_alt')}
+              />
+            </Link>
+          </li>
+          <li>
+            <a
+              className="text-lg leading-5 text-white"
+              href="mailto:propertyinform@gmail.com"
+              target="_blank"
+              rel="noreferrer"
+            >
+              propertyinform@gmail.com
+            </a>
+          </li>
+          <li>
+            <a className="text-lg leading-5 text-white" href="tel:(123) 456-78-90">
+              (123) 456-78-90
+            </a>
+          </li>
+        </ul>
+        <ul className="flex flex-col gap-16 mt-96">
+          {linksConfigLayout2.map((path) => (
+            <li key={path}>
+              <Link className="text-lg leading-5 text-white no-underline" to={`/${path}`}>
+                {t(path)}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </footer>
+  );
+}
+
+export default memo(FooterLayout2);
--- a/src/app/theme-layouts/layout2/components/HeaderLayout2.js
+++ b/src/app/theme-layouts/layout2/components/HeaderLayout2.js
@@ -0,0 +1,48 @@
+import FuseSvgIcon from '@fuse/core/FuseSvgIcon/FuseSvgIcon';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import linksConfigLayout2 from './linksLayout2Config';
+
+function HeaderLayout2() {
+  const { t } = useTranslation('layout2');
+
+  return (
+    <header className="fixed z-50 flex items-center justify-center w-full h-72 px-10 bg-white">
+      <div className="flex justify-between max-w-screen-2xl w-full">
+        <Link to="/">
+          <img
+            className="max-w-[88px] max-h-[45px]"
+            src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Instagram_icon.png/600px-Instagram_icon.png"
+            alt={t('logo_alt')}
+          />
+        </Link>
+        <nav className="flex gap-72 items-center">
+          {linksConfigLayout2.map((path) => (
+            <Link
+              className="text-lg leading-5 text-slate-800 no-underline"
+              to={`/${path}`}
+              key={path}
+            >
+              {t(path)}
+            </Link>
+          ))}
+        </nav>
+        <div className="flex gap-32 items-center">
+          <Link className="text-indigo-400" to="/sign-up">
+            {t('sign_up')}
+          </Link>
+          <Link
+            className="flex gap-7 items-center px-24 py-10 text-lg leading-5 text-white bg-indigo-400 rounded-2xl"
+            to="/sign-in"
+          >
+            <span>{t('sign_in')}</span>
+            <FuseSvgIcon>heroicons-outline:login</FuseSvgIcon>
+          </Link>
+        </div>
+      </div>
+    </header>
+  );
+}
+
+export default memo(HeaderLayout2);
--- a/src/app/theme-layouts/layout2/components/linksLayout2Config.js
+++ b/src/app/theme-layouts/layout2/components/linksLayout2Config.js
@@ -0,0 +1,3 @@
+const linksConfigLayout2 = ['rent-and-buy', 'about-us', 'blog', 'contacts'];
+
+export default linksConfigLayout2;
--- a/src/app/theme-layouts/layout2/i18n/en.js
+++ b/src/app/theme-layouts/layout2/i18n/en.js
@@ -0,0 +1,11 @@
+const locale = {
+  'rent-and-buy': 'Rent&Buy Analysis',
+  'about-us': 'About Us',
+  blog: 'Blog',
+  contacts: 'Contacts',
+  sign_up: 'Log In',
+  sign_in: 'Register',
+  logo_alt: 'Logo',
+};
+
+export default locale;
--- a/src/app/theme-layouts/themeLayoutConfigs.js
+++ b/src/app/theme-layouts/themeLayoutConfigs.js
@@ -1,7 +1,9 @@
 import layout1 from './layout1/Layout1Config';
+import layout2 from './layout2/Layout2Config';

 const themeLayoutConfigs = {
  layout1,
+  layout2,
 };

 export default themeLayoutConfigs;
--- a/src/app/theme-layouts/themeLayouts.js
+++ b/src/app/theme-layouts/themeLayouts.js
@@ -1,7 +1,9 @@
 import layout1 from './layout1/Layout1';
+import layout2 from './layout2/Layout2';

 const themeLayouts = {
  layout1,
+  layout2,
 };

 export default themeLayouts;
--- a/src/styles/app-base.css
+++ b/src/styles/app-base.css
@@ -1,5 +1,5 @@

-/*@tailwind base;*/
+@tailwind base;

 /**
 * Custom base styles
@@ -49,6 +49,7 @@ html, body {

 #root {
    display: flex;
+    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
Author	SHA1	Message	Date
evgeniywas	dc1ded81b8	feat: add layout2 to theme and layouts configs	2023-06-07 21:55:56 +01:00
evgeniywas	85706a5819	feat: create home page and add it to routes config	2023-06-07 21:55:32 +01:00
evgeniywas	260d853f30	feat: create layout2 regular components	2023-06-07 21:55:00 +01:00
evgeniywas	fd7fda2f77	refactor: add tailwind prefligt base styles	2023-06-07 21:54:10 +01:00
evgeniywas	72f295df61	refactor: clear index.html	2023-06-07 21:53:50 +01:00
evgeniywas	2c73035c63	refactor: rename HomePage to Home	2023-06-05 21:27:33 +01:00
evgeniywas	9f90a14e16	refactor: update authPagesConfigs name to plural form	2023-06-05 18:18:45 +01:00