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 colors from '@styles/config/colors';

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 StyledPoliciesPage = styled('div')`
  h1 {
    margin-bottom: 1rem;
  }

  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-bottom: 0.5rem;
  }

  > p {
    margin-bottom: 0.5rem;
  }

  table {
    background-color: ${colors.main};

    &,
    tr,
    td {
      border: 1px solid ${colors.border.primary};
    }

    td {
      padding: 5px;
    }
  }
`;

const PoliciesLayout = ({ children, title }) => {
  return (
    <>
      <PoliciesNavigation />
      <Typography variant='h1'>{title}</Typography>
      <StyledPoliciesPage>{children}</StyledPoliciesPage>
    </>
  );
};

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

  if (isLoading) 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;