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 + +
+
+
+ ); +}