code handover

src/components/cards/ComponentHeader.js

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