From fd3ef3fb9c7f821238949825dfa086bdb04f6465 Mon Sep 17 00:00:00 2001 From: Maximus Date: Wed, 17 Aug 2022 16:56:37 +0300 Subject: [PATCH 1/3] added RouterLink component setup route system --- src/components/typography/RouterLink.tsx | 1 + src/index.tsx | 26 +++++++++++++++--------- 2 files changed, 17 insertions(+), 10 deletions(-) create mode 100644 src/components/typography/RouterLink.tsx 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 From 414e7e62d8180d5e27eb1c38980cb26e59840c0a Mon Sep 17 00:00:00 2001 From: Maximus Date: Wed, 17 Aug 2022 18:53:07 +0300 Subject: [PATCH 2/3] closed #62 Created footer --- src/assets/svg/facebook.svg | 3 + src/assets/svg/instagram.svg | 3 + src/assets/svg/rmProps.sh | 6 ++ src/components/parts/Footer.tsx | 108 ++++++++++++++++++++++++++++++++ 4 files changed, 120 insertions(+) create mode 100644 src/assets/svg/facebook.svg create mode 100644 src/assets/svg/instagram.svg create mode 100644 src/assets/svg/rmProps.sh create mode 100644 src/components/parts/Footer.tsx 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..be26882 --- /dev/null +++ b/src/components/parts/Footer.tsx @@ -0,0 +1,108 @@ +import React, { useMemo, useState } 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: "#", enabled: true }, + { label: "about freeland", url: "/about", enabled: true }, + { label: "help", url: "#", enabled: true }, + { label: "contact us", url: "#", enabled: true }, +]; + +const secondaryLinks = [ + { index: 1, label: "Terms of Use", url: "#", enabled: true }, + { index: 2, label: "Privacy Policy", url: "#", enabled: true }, + { index: 3, label: "Cookies Policy", url: "#", 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 + +
+
+
+ ); +} From f56ae412357ae6b80923b5594f9173ab51c00c63 Mon Sep 17 00:00:00 2001 From: Maximus Date: Thu, 18 Aug 2022 11:39:50 +0300 Subject: [PATCH 3/3] modified footer add router and default link --- src/components/parts/Footer.tsx | 31 +++++++++++++++++++------------ 1 file changed, 19 insertions(+), 12 deletions(-) diff --git a/src/components/parts/Footer.tsx b/src/components/parts/Footer.tsx index be26882..dcc3331 100644 --- a/src/components/parts/Footer.tsx +++ b/src/components/parts/Footer.tsx @@ -1,4 +1,4 @@ -import React, { useMemo, useState } from "react"; +import React, { useMemo } from "react"; /* -------------------------------------------------------------------------- */ /* Import Components */ /* -------------------------------------------------------------------------- */ @@ -12,16 +12,16 @@ import Link from "components/typography/Link"; /* -------------------------------------------------------------------------- */ const mainLinks = [ - { label: "account settings", url: "#", enabled: true }, + { label: "account settings", url: "/account/settings", enabled: true }, { label: "about freeland", url: "/about", enabled: true }, - { label: "help", url: "#", enabled: true }, - { label: "contact us", url: "#", 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: "#", enabled: true }, - { index: 2, label: "Privacy Policy", url: "#", enabled: true }, - { index: 3, label: "Cookies Policy", url: "#", enabled: true }, + { 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 }, ]; /* -------------------------------------------------------------------------- */ @@ -76,16 +76,23 @@ export function Footer() {
- - Freeland - + + + Freeland + +
{mainLinksPart}
- - {" "} + + + + + {" "} + +