12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061 |
- import * as React from 'react';
- import Breadcrumbs from '@mui/material/Breadcrumbs';
- import Link from "react-router-dom/es/Link";
- import Stack from '@mui/material/Stack';
- import {Typography, useMediaQuery} from "@mui/material";
- import background from "../img/breadcrumbs/bg-breadcrumbs.png";
- const Breadcrumb = ({links=['this page'], title}) => {
- const matches = useMediaQuery('(max-width:899px)');
- let arr = links.map(i => {
- let link = Array.from(i).map(j => j === ' ' ? '-' : j).join('').toLowerCase()
- return <Link
- key={i.toString()}
- style={{
- color: "#fff",
- textDecoration: "none",
- fontSize: "11px"
- }}
- to={`/${link}`}> {i.toUpperCase()}
- </Link>
- })
- arr.unshift(<Link style={{
- color: "#fff",
- textDecoration: "none",
- fontSize: "11px"
- }} to="/" key={'homeBreadcrumbs'}> HOME </Link>)
- return (
- <article
- style={{
- background: `url(${background}) center/contain repeat`,
- padding: "40px 0",
- height: "210px",
- display: "flex",
- flexDirection: "column",
- justifyContent: "center",
- alignItems: "center",
- position: "relative"
- }}
- >
- <Typography
- fontWeight={300}
- color="#fff"
- variant={matches ? "h4" : "h3"}
- >
- {title || links[links.length-1].toUpperCase()}
- </Typography>
- <Stack
- spacing={2}
- position="absolute"
- bottom="40px"
- >
- <Breadcrumbs color="#fff" separator="›" aria-label="breadcrumb">
- {arr}
- </Breadcrumbs>
- </Stack>
- </article>
- );
- }
- export default Breadcrumb;
|