37 lines
1.2 KiB
JavaScript
37 lines
1.2 KiB
JavaScript
import {
|
|
TimelineConnector,
|
|
TimelineContent,
|
|
TimelineDot,
|
|
TimelineItem,
|
|
TimelineOppositeContent,
|
|
TimelineSeparator,
|
|
} from "@mui/lab";
|
|
import DoneIcon from "@mui/icons-material/Done";
|
|
import { Typography } from "@mui/material";
|
|
|
|
const DoneTimeLine = ({ date, primaryLabel, secondaryLabel, position }) => {
|
|
return (
|
|
<TimelineItem>
|
|
<TimelineOppositeContent sx={{ m: "auto 0" }} align="right" variant="body2" color="text.secondary">
|
|
{date}
|
|
</TimelineOppositeContent>
|
|
<TimelineSeparator>
|
|
<TimelineDot color={"success"}>
|
|
<DoneIcon />
|
|
</TimelineDot>
|
|
{position !== "end" && <TimelineConnector />}
|
|
</TimelineSeparator>
|
|
<TimelineContent sx={{ py: "12px", px: 2 }}>
|
|
<Typography variant="h6" component="span">
|
|
{primaryLabel}
|
|
</Typography>
|
|
<Typography variant="body2" color={"gray"}>
|
|
{secondaryLabel}
|
|
</Typography>
|
|
</TimelineContent>
|
|
</TimelineItem>
|
|
);
|
|
};
|
|
|
|
export default DoneTimeLine;
|