Merge pull request 'Create footer' (#83) from feature/footer into develop

Reviewed-on: http://85.143.176.51:3000/free-land/front-end/pulls/83
2022-08-18 09:53:09 +00:00 · 2022-08-18 09:53:09 +00:00 · 68cfb61a1d
commit 68cfb61a1d
parent 43163a19b2 f56ae41235
6 changed files with 144 additions and 10 deletions
--- a/src/assets/svg/facebook.svg
+++ b/src/assets/svg/facebook.svg
@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.8576 1.28333H2.14328C1.66917 1.28333 1.28613 1.66636 1.28613 2.14047V21.8548C1.28613 22.3289 1.66917 22.7119 2.14328 22.7119H21.8576C22.3317 22.7119 22.7147 22.3289 22.7147 21.8548V2.14047C22.7147 1.66636 22.3317 1.28333 21.8576 1.28333ZM21.0004 20.9976H16.0692V14.4137H18.8549L19.2727 11.1806H16.0692V9.11547C16.0692 8.17797 16.329 7.54047 17.671 7.54047H19.3826V4.64761C19.0852 4.60743 18.0701 4.51904 16.8861 4.51904C14.4165 4.51904 12.7263 6.02708 12.7263 8.79404V11.178H9.93524V14.411H12.729V20.9976H3.00042V2.99761H21.0004V20.9976Z" stroke="none"/>
+</svg>
--- a/src/assets/svg/instagram.svg
+++ b/src/assets/svg/instagram.svg
@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.9993 6.50248C8.95911 6.50248 6.50554 8.95605 6.50554 11.9962C6.50554 15.0364 8.95911 17.49 11.9993 17.49C15.0395 17.49 17.493 15.0364 17.493 11.9962C17.493 8.95605 15.0395 6.50248 11.9993 6.50248ZM11.9993 15.5668C10.0332 15.5668 8.42876 13.9623 8.42876 11.9962C8.42876 10.0302 10.0332 8.4257 11.9993 8.4257C13.9654 8.4257 15.5698 10.0302 15.5698 11.9962C15.5698 13.9623 13.9654 15.5668 11.9993 15.5668ZM17.718 4.99712C17.0082 4.99712 16.435 5.57034 16.435 6.28016C16.435 6.98998 17.0082 7.5632 17.718 7.5632C18.4279 7.5632 19.0011 6.99266 19.0011 6.28016C19.0013 6.11161 18.9682 5.94467 18.9038 5.78891C18.8394 5.63315 18.7449 5.49163 18.6258 5.37244C18.5066 5.25326 18.3651 5.15876 18.2093 5.09436C18.0535 5.02995 17.8866 4.99691 17.718 4.99712ZM22.7082 11.9962C22.7082 10.5177 22.7216 9.05248 22.6386 7.57659C22.5555 5.8623 22.1645 4.34087 20.9109 3.0873C19.6546 1.83105 18.1359 1.44266 16.4216 1.35962C14.943 1.27659 13.4779 1.28998 12.002 1.28998C10.5234 1.28998 9.05822 1.27659 7.58233 1.35962C5.86804 1.44266 4.34661 1.83373 3.09304 3.0873C1.83679 4.34355 1.4484 5.8623 1.36536 7.57659C1.28233 9.05516 1.29572 10.5203 1.29572 11.9962C1.29572 13.4721 1.28233 14.94 1.36536 16.4159C1.4484 18.1302 1.83947 19.6516 3.09304 20.9052C4.34929 22.1614 5.86804 22.5498 7.58233 22.6328C9.0609 22.7159 10.5261 22.7025 12.002 22.7025C13.4805 22.7025 14.9457 22.7159 16.4216 22.6328C18.1359 22.5498 19.6573 22.1587 20.9109 20.9052C22.1672 19.6489 22.5555 18.1302 22.6386 16.4159C22.7243 14.94 22.7082 13.4748 22.7082 11.9962ZM20.3511 18.3123C20.1555 18.7998 19.9198 19.1641 19.5422 19.5391C19.1645 19.9168 18.8029 20.1525 18.3154 20.348C16.9064 20.9078 13.5609 20.7819 11.9993 20.7819C10.4377 20.7819 7.08947 20.9078 5.68054 20.3507C5.19304 20.1552 4.82875 19.9194 4.45375 19.5418C4.07608 19.1641 3.84036 18.8025 3.64483 18.315C3.08768 16.9034 3.21358 13.5578 3.21358 11.9962C3.21358 10.4346 3.08768 7.08641 3.64483 5.67748C3.84036 5.18998 4.07608 4.8257 4.45375 4.4507C4.83143 4.0757 5.19304 3.8373 5.68054 3.64177C7.08947 3.08462 10.4377 3.21052 11.9993 3.21052C13.5609 3.21052 16.9091 3.08462 18.318 3.64177C18.8055 3.8373 19.1698 4.07302 19.5448 4.4507C19.9225 4.82837 20.1582 5.18998 20.3538 5.67748C20.9109 7.08641 20.785 10.4346 20.785 11.9962C20.785 13.5578 20.9109 16.9034 20.3511 18.3123Z" stroke="none"/>
+</svg>
--- a/src/assets/svg/rmProps.sh
+++ b/src/assets/svg/rmProps.sh
@ -0,0 +1,6 @@
+#!/bin/bash
+ls *.svg | while read filename; do
+sed -i '1 s/width=\"..\" height=\"..\" //' $filename; 
+sed -i 's/fill=\"#262626\"/stroke="none"/' $filename;
+sed -i 's/stroke=\"#262626\"/fill="none"/' $filename 
+done 
--- a/src/components/parts/Footer.tsx
+++ b/src/components/parts/Footer.tsx
@ -0,0 +1,115 @@
+import React, { useMemo } from "react";
+/* -------------------------------------------------------------------------- */
+/*                              Import Components                             */
+/* -------------------------------------------------------------------------- */
+import Typography from "components/typography/Typography";
+import { SVGFacebook, SVGInstagram, SVGCircle } from "components/icons";
+import { RouterLink } from "components/typography/RouterLink";
+import Link from "components/typography/Link";
+
+/* -------------------------------------------------------------------------- */
+/*                                Define consts                               */
+/* -------------------------------------------------------------------------- */
+
+const mainLinks = [
+  { label: "account settings", url: "/account/settings", enabled: true },
+  { label: "about freeland", url: "/about", enabled: true },
+  { label: "help", url: "/help", enabled: true },
+  { label: "contact us", url: "/contact-us", enabled: true },
+];
+
+const secondaryLinks = [
+  { index: 1, label: "Terms of Use", url: "/terms-of-use", enabled: true },
+  { index: 2, label: "Privacy Policy", url: "/privacy-policy", enabled: true },
+  { index: 3, label: "Cookies Policy", url: "/cookies-policy", enabled: true },
+];
+
+/* -------------------------------------------------------------------------- */
+/*                           Difine parts of footer                           */
+/* -------------------------------------------------------------------------- */
+
+/* -------------------- Icons with social networks icons -------------------- */
+const circleDivider = (
+  <SVGCircle className="fill-gray-500 stroke-gray-500 w-1.5 h-1.5 mx-2" />
+);
+
+/* -------------------------------------------------------------------------- */
+/*                           Define component footer                          */
+/* -------------------------------------------------------------------------- */
+
+export function Footer() {
+  /* -------------------------- Part with main links -------------------------- */
+  const mainLinksPart = useMemo(
+    () =>
+      mainLinks.map((link) => (
+        <RouterLink
+          key={link.url}
+          className="py-1 md:py-2 text-gray-900 px-4"
+          enabled={link.enabled}
+          to={link.url}
+        >
+          <Typography className="" fontWeightVariant="semibold" htmlTag="p">
+            {link.label.toUpperCase()}
+          </Typography>
+        </RouterLink>
+      )),
+    mainLinks
+  );
+  /* ------------------------ Part with secondary links ----------------------- */
+  const secondaryLinksPart = useMemo(
+    () =>
+      secondaryLinks.map((link) => (
+        <div className="flex flex-row items-center">
+          {link.index != 1 && circleDivider}
+          <RouterLink key={link.url} enabled={link.enabled} to={link.url}>
+            {link.label}
+          </RouterLink>
+        </div>
+      )),
+    secondaryLinks
+  );
+
+  /* -------------------------------------------------------------------------- */
+  /*                         Implement footer component                         */
+  /* -------------------------------------------------------------------------- */
+  return (
+    <div className="lg:px-12 px-2 sm:px-8 md:px-4 pb-2 md:pt-4 pt-2 lg:pt-5 bg-gray-200">
+      <section className="w-full grid grid-cols-2 md:grid-rows-2 sm:grid-flow-row-dense sm:grid-rows-2 justify-items-between md:justify-between mb-2 md: items-center md:flex-row md:flex">
+        <div className="sm:col-span-1">
+          <RouterLink to="/">
+            <Typography className="text-2xl" fontWeightVariant="semibold">
+              Freeland
+            </Typography>
+          </RouterLink>
+        </div>
+        <div className="order-last md:order-none justify-center justify-items-center items-center flex flex-col col-span-4 sm:flex sm:flex-row text-sm">
+          {mainLinksPart}
+        </div>
+        <div className="flex flex-row sm:col-span-1 justify-end">
+          <Link href="https://www.facebook.com">
+            <SVGFacebook className="w-5 h-5 fill-gray-900 stroke-gray-900 mr-2" />
+          </Link>
+          <Link href="https://www.instagram/com">
+            {" "}
+            <SVGInstagram className="w-5 h-5 fill-gray-900 stroke-gray-900 ml-2 " />
+          </Link>
+        </div>
+      </section>
+      <section className="w-full flex flex-col md:flex-row text-gray-500 text-xs justify-between">
+        <div className="flex flex-col md:flex-row justify-center items-center">
+          <Typography>
+            @ Copyright 2022 Freeland - All rights reserved
+          </Typography>
+          <div className="hidden md:flex">{circleDivider}</div>
+          <div className="flex flex-row items-center">{secondaryLinksPart}</div>
+        </div>
+        <div className="flex flex-row justify-center md:justify-end">
+          Supported by
+          <Typography className="ml-1 lg:ml-2" fontWeightVariant="bold">
+            Comfortel
+          </Typography>
+        </div>
+      </section>
+    </div>
+  );
+}
--- a/src/components/typography/RouterLink.tsx
+++ b/src/components/typography/RouterLink.tsx
@ -0,0 +1 @@
+export { NavLink as RouterLink } from "react-router-dom";
--- a/src/index.tsx
+++ b/src/index.tsx
@ -1,16 +1,22 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import "./index.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";

 import "./localization/i18n";
-
-ReactDOM.render(
+const rootElement = document.getElementById("root");
+if (!rootElement) throw new Error("Failed to find the root element");
+const root = ReactDOM.createRoot(rootElement);
+root.render(
  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<App />}></Route>
+      </Routes>
+    </BrowserRouter>
+  </React.StrictMode>
 );

 // If you want to start measuring performance in your app, pass a function
				`@ -0,0 +1 @@`
				`export { NavLink as RouterLink } from "react-router-dom";`