Proyectos de Subversion LeadersLinked - SPA

import React from "react";
import { NavLink as Link, useLocation } from "react-router-dom";
import { Typography, styled, Breadcrumbs } from "@mui/material";

import { useFetch } from "@hooks";

import styles from "./PoliciesLayout.module.scss";

const StyledBreadcrumbs = styled(Breadcrumbs)`
  li a {
    padding: 0.3rem 1rem;
    background-color: var(--font-color);
    color: var(--bg-color);
    border-radius: 20px;
    &.active {
      display: none;
    }
  }
`;

const PoliciesLayout = ({ children, title }) => {
  return (
    <>
      <PoliciesNavigation />
      <Typography variant="h1">{title}</Typography>
      <div className={styles.policies__page}>{children}</div>
    </>
  );
};

const PoliciesNavigation = () => {
  const { data, loading } = useFetch("/helpers/footer");
  const { pathname } = useLocation();

  if (loading) return null;

  return (
    <StyledBreadcrumbs sx={{ my: 2 }} aria-label="breadcrumb">
      <Link exact to="/">
        Inicio
      </Link>

      {Object.entries(data).map(([href, label]) => {
        if (pathname.includes(href)) {
          return null;
        }

        return (
          <Link key={`${href}-${label}`} to={href}>
            {label}
          </Link>
        );
      })}
    </StyledBreadcrumbs>
  );
};

export default PoliciesLayout;