Proyectos de Subversion LeadersLinked - SPA

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

import useFetch from '../../hooks/useFetch'

import styles from './PoliciesLayout.module.scss'

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

const PoliciesLayout = ({ children, title }) => {
  return (
    <Container className={styles.policies__page}>
      <PoliciesNavigation />

      <Typography variant='h1'>{title}</Typography>
      {children}
    </Container>
  )
}

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

  if (isLoading) return null

  return (
    <StyledBreadcrumbs sx={{ mb: 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