diff --git a/src/assets/svg/facebook.svg b/src/assets/svg/facebook.svg new file mode 100644 index 0000000..53f04b9 --- /dev/null +++ b/src/assets/svg/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/instagram.svg b/src/assets/svg/instagram.svg new file mode 100644 index 0000000..27fca3d --- /dev/null +++ b/src/assets/svg/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/rmProps.sh b/src/assets/svg/rmProps.sh new file mode 100644 index 0000000..2162617 --- /dev/null +++ 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 \ No newline at end of file diff --git a/src/components/parts/Footer.tsx b/src/components/parts/Footer.tsx new file mode 100644 index 0000000..dcc3331 --- /dev/null +++ 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 = ( + +); + +/* -------------------------------------------------------------------------- */ +/* Define component footer */ +/* -------------------------------------------------------------------------- */ + +export function Footer() { + /* -------------------------- Part with main links -------------------------- */ + const mainLinksPart = useMemo( + () => + mainLinks.map((link) => ( + + + {link.label.toUpperCase()} + + + )), + mainLinks + ); + /* ------------------------ Part with secondary links ----------------------- */ + const secondaryLinksPart = useMemo( + () => + secondaryLinks.map((link) => ( +
+ {link.index != 1 && circleDivider} + + {link.label} + +
+ )), + secondaryLinks + ); + + /* -------------------------------------------------------------------------- */ + /* Implement footer component */ + /* -------------------------------------------------------------------------- */ + return ( +
+
+
+ + + Freeland + + +
+
+ {mainLinksPart} +
+
+ + + + + {" "} + + +
+
+
+
+ + @ Copyright 2022 Freeland - All rights reserved + +
{circleDivider}
+
{secondaryLinksPart}
+
+
+ Supported by + + Comfortel + +
+
+
+ ); +} diff --git a/src/components/typography/RouterLink.tsx b/src/components/typography/RouterLink.tsx new file mode 100644 index 0000000..2b03587 --- /dev/null +++ b/src/components/typography/RouterLink.tsx @@ -0,0 +1 @@ +export { NavLink as RouterLink } from "react-router-dom"; diff --git a/src/index.tsx b/src/index.tsx index 67c9221..df65e1b 100644 --- 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( - - , - document.getElementById('root') + + + }> + + + ); // If you want to start measuring performance in your app, pass a function