Proyectos de Subversion LeadersLinked - SPA

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

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

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

const StyledBreadcrumb = styled(Chip)(({ theme }) => {
  const backgroundColor =
    theme.palette.mode === 'light'
      ? theme.palette.grey[100]
      : theme.palette.grey[800]

  return {
    backgroundColor,
    height: theme.spacing(3),
    color: theme.palette.text.primary,
    fontWeight: theme.typography.fontWeightRegular,
    '&:hover, &:focus': {
      backgroundColor: emphasize(backgroundColor, 0.06)
    },
    '&:active': {
      display: 'none',
      boxShadow: theme.shadows[1],
      backgroundColor: emphasize(backgroundColor, 0.12)
    }
  }
})

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')

  if (isLoading) return null

  return (
    <Breadcrumbs aria-label='breadcrumb'>
      <StyledBreadcrumb to='/' component={Link} label='Inicio' />

      {Object.entries(data).map(([href, label]) => (
        <StyledBreadcrumb
          key={`${href}-${label}`}
          to={href}
          component={Link}
          label={label}
        />
      ))}
    </Breadcrumbs>
  )
}

export default PoliciesLayout