123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960 |
- 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']}) => {
- const matches = useMediaQuery('(max-width:899px)');
- let arr = links.map(i => {
- let link = Array.from(i).map(j => j === ' ' ? '-' : j).join('').toLowerCase()
- return <Link
- style={{
- color: "#fff",
- textDecoration: "none",
- fontSize: "13px"
- }}
- to={`/${link}`}> {i.toUpperCase()}
- </Link>
- });
- arr.unshift(<Link style={{
- color: "#fff",
- textDecoration: "none",
- fontSize: "13px"
- }} to="/"> MAIN PAGE </Link>)
- return (
- <article
- style={{
- background: `url(${background}) center repeat`,
- padding: "40px 0",
- height: "260px",
- display: "flex",
- flexDirection: "column",
- justifyContent: "center",
- alignItems: "center",
- position: "relative"
- }}
- >
- <Typography
- fontWeight={300}
- color="#fff"
- variant={matches ? "h4" : "h3"}
- >
- {links[links.length-1].toUpperCase()}
- </Typography>
- <Stack
- spacing={2}
- position="absolute"
- bottom="50px"
- >
- <Breadcrumbs color="#fff" separator="›" aria-label="breadcrumb">
- {arr}
- </Breadcrumbs>
- </Stack>
- </article>
- );
- }
- export default Breadcrumb;
|