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.text.primary

  return {

    backgroundColor,

    height: theme.spacing(3),

    color: theme.palette.background.default,

    fontWeight: theme.typography.fontWeightRegular,

    '&:hover, &:focus': {

      backgroundColor: emphasize(backgroundColor, 0.06)

    },

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

  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