64 lines
1.7 KiB
TypeScript
64 lines
1.7 KiB
TypeScript
import { Box, Card, CardContent, Typography } from "@mui/material";
|
|
import React from "react";
|
|
import Breadcrumbs from "@mui/material/Breadcrumbs";
|
|
import Link from "@mui/material/Link";
|
|
import HomeIcon from "@mui/icons-material/Home";
|
|
|
|
// function handleClick(event: React.MouseEvent<HTMLDivElement, MouseEvent>) {
|
|
// event.preventDefault();
|
|
// console.info('You clicked a breadcrumb.');
|
|
// }
|
|
|
|
const TitleHeader = () => {
|
|
return (
|
|
<Box width={"100%"}>
|
|
<Card sx={{ boxShadow: "none", borderRadius: "12px" }}>
|
|
<CardContent
|
|
sx={{
|
|
paddingBlock: 1,
|
|
paddingInline: 2,
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
"&:last-child": {
|
|
paddingBottom: 1,
|
|
},
|
|
}}
|
|
>
|
|
<Typography variant="h6" color="text.primary" fontWeight={"bold"}>
|
|
Products
|
|
</Typography>
|
|
<Breadcrumbs aria-label="breadcrumb">
|
|
<Link
|
|
fontSize={"small"}
|
|
fontWeight={"medium"}
|
|
underline="hover"
|
|
color="inherit"
|
|
href="/"
|
|
sx={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: 2,
|
|
}}
|
|
>
|
|
<HomeIcon fontSize="small" />
|
|
Page
|
|
</Link>
|
|
<Link
|
|
fontSize={"small"}
|
|
fontWeight={"medium"}
|
|
underline="hover"
|
|
color="inherit"
|
|
href="/material-ui/getting-started/installation/"
|
|
>
|
|
Product Table
|
|
</Link>
|
|
</Breadcrumbs>
|
|
</CardContent>
|
|
</Card>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default TitleHeader;
|