116 lines
4.9 KiB
TypeScript
116 lines
4.9 KiB
TypeScript
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>
|
|
);
|
|
}
|