60 lines
2.4 KiB
JavaScript
60 lines
2.4 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;
|