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;