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,47 +1,32 @@
 <!DOCTYPE html>
-<html lang='en'>
+<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='/'>
-
-        <link href='%PUBLIC_URL%/assets/tailwind-base.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'>
+    <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 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/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" />

-        <link href='%PUBLIC_URL%/assets/fonts/inter/inter.css' rel='stylesheet'>
-        <link href='%PUBLIC_URL%/assets/fonts/meteocons/style.css' rel='stylesheet'>
-
-        <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.
-
-          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>
+    <noscript id="emotion-insertion-point"></noscript>
+    <title>Rental Calculator</title>

    <!-- FUSE Splash Screen CSS -->
    <style>
@@ -56,7 +41,7 @@
        right: 0;
        bottom: 0;
        background-color: #111827;
-                color: #F9FAFB;
+        color: #f9fafb;
        z-index: 999999;
        pointer-events: none;
        opacity: 1;
@@ -80,7 +65,7 @@
      #spinner > div {
        width: 12px;
        height: 12px;
-                background-color: #1E96F7;
+        background-color: #1e96f7;
        border-radius: 100%;
        display: inline-block;
        -webkit-animation: fuse-bouncedelay 1s infinite ease-in-out both;
@@ -98,58 +83,47 @@
      }

      @-webkit-keyframes fuse-bouncedelay {
-                0%, 80%, 100% {
-                    -webkit-transform: scale(0)
+        0%,
+        80%,
+        100% {
+          -webkit-transform: scale(0);
        }
        40% {
-                    -webkit-transform: scale(1.0)
+          -webkit-transform: scale(1);
        }
      }

      @keyframes fuse-bouncedelay {
-                0%, 80%, 100% {
+        0%,
+        80%,
+        100% {
          -webkit-transform: scale(0);
          transform: scale(0);
        }
        40% {
-                    -webkit-transform: scale(1.0);
-                    transform: scale(1.0);
+          -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>

-    <noscript>
-        You need to enable JavaScript to run this app.
-    </noscript>
-
-    <div id='root' class='flex'>
+    <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 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 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>
 </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