|
@@ -0,0 +1,60 @@
|
|
|
+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;
|