50 lines
1.3 KiB
JavaScript
50 lines
1.3 KiB
JavaScript
import PropTypes from 'prop-types';
|
|
|
|
// material-ui
|
|
import { Box, Grid, Link, Stack, Typography } from '@mui/material';
|
|
|
|
// assets
|
|
import { GlobalOutlined, NodeExpandOutlined } from '@ant-design/icons';
|
|
|
|
// ==============================|| COMPONENTS - BREADCRUMBS ||============================== //
|
|
|
|
const ComponentHeader = ({ title, caption, directory, link }) => (
|
|
<Box sx={{ pl: 3 }}>
|
|
<Stack spacing={1.25}>
|
|
<Typography variant="h2">{title}</Typography>
|
|
{caption && (
|
|
<Typography variant="h6" color="textSecondary">
|
|
{caption}
|
|
</Typography>
|
|
)}
|
|
</Stack>
|
|
<Grid container spacing={0.75} sx={{ mt: 1.75 }}>
|
|
{directory && (
|
|
<Grid item xs={12}>
|
|
<Typography variant="caption" color="textSecondary">
|
|
<NodeExpandOutlined style={{ marginRight: 10 }} />
|
|
{directory}
|
|
</Typography>
|
|
</Grid>
|
|
)}
|
|
{link && (
|
|
<Grid item xs={12}>
|
|
<Link variant="caption" color="primary" href={link} target="_blank">
|
|
<GlobalOutlined style={{ marginRight: 10 }} />
|
|
{link}
|
|
</Link>
|
|
</Grid>
|
|
)}
|
|
</Grid>
|
|
</Box>
|
|
);
|
|
|
|
ComponentHeader.propTypes = {
|
|
title: PropTypes.string,
|
|
caption: PropTypes.string,
|
|
directory: PropTypes.string,
|
|
link: PropTypes.string
|
|
};
|
|
|
|
export default ComponentHeader;
|