66 lines
2.6 KiB
JavaScript
66 lines
2.6 KiB
JavaScript
"use client";
|
|
|
|
import { Box, Typography } from "@mui/material";
|
|
import TextSnippetIcon from "@mui/icons-material/TextSnippet";
|
|
import TravelExploreIcon from "@mui/icons-material/TravelExplore";
|
|
import {
|
|
Timeline,
|
|
TimelineConnector,
|
|
TimelineContent,
|
|
TimelineDot,
|
|
TimelineItem,
|
|
timelineItemClasses,
|
|
TimelineSeparator,
|
|
} from "@mui/lab";
|
|
|
|
const CreateTimeLine = ({ tabState }) => {
|
|
return (
|
|
<Box sx={{ display: "flex", alignItems: "center" }}>
|
|
<Timeline
|
|
position="right"
|
|
sx={{
|
|
[`& .${timelineItemClasses.root}:before`]: { flex: 0, padding: 0 },
|
|
}}
|
|
>
|
|
<TimelineItem>
|
|
<TimelineSeparator>
|
|
<TimelineConnector />
|
|
<TimelineDot sx={{ backgroundColor: "#fff" }}>
|
|
<TravelExploreIcon
|
|
color={tabState === 0 ? "primary" : "error"}
|
|
sx={{ width: "1.5rem", height: "1.5rem" }}
|
|
/>
|
|
</TimelineDot>
|
|
<TimelineConnector />
|
|
</TimelineSeparator>
|
|
<TimelineContent sx={{ py: "12px", px: 2 }}>
|
|
<Typography variant="h6">نقشه</Typography>
|
|
<Typography variant="caption" sx={{ color: "#606060" }}>
|
|
ثبت مختصات محل آزمایش
|
|
</Typography>
|
|
</TimelineContent>
|
|
</TimelineItem>
|
|
<TimelineItem>
|
|
<TimelineSeparator>
|
|
<TimelineConnector />
|
|
<TimelineDot sx={{ backgroundColor: "#fff" }}>
|
|
<TextSnippetIcon
|
|
color={tabState === 1 ? "primary" : "error"}
|
|
sx={{ width: "1.5rem", height: "1.5rem" }}
|
|
/>
|
|
</TimelineDot>
|
|
<TimelineConnector />
|
|
</TimelineSeparator>
|
|
<TimelineContent sx={{ py: "12px", px: 2 }}>
|
|
<Typography variant="h6">مشخصات آزمایش</Typography>
|
|
<Typography variant="caption" sx={{ color: "#606060" }}>
|
|
ثبت مشخصات اولیه
|
|
</Typography>
|
|
</TimelineContent>
|
|
</TimelineItem>
|
|
</Timeline>
|
|
</Box>
|
|
);
|
|
};
|
|
export default CreateTimeLine;
|