first commit
This commit is contained in:
DESKTOP-GBA0BK8\Admin
@@ -0,0 +1,172 @@
|
||||
import * as React from "react";
|
||||
import Timeline from "@mui/lab/Timeline";
|
||||
import TimelineItem from "@mui/lab/TimelineItem";
|
||||
import TimelineSeparator from "@mui/lab/TimelineSeparator";
|
||||
import TimelineConnector from "@mui/lab/TimelineConnector";
|
||||
import TimelineContent from "@mui/lab/TimelineContent";
|
||||
import TimelineOppositeContent from "@mui/lab/TimelineOppositeContent";
|
||||
import TimelineDot from "@mui/lab/TimelineDot";
|
||||
import FastfoodIcon from "@mui/icons-material/Fastfood";
|
||||
import LaptopMacIcon from "@mui/icons-material/LaptopMac";
|
||||
import HotelIcon from "@mui/icons-material/Hotel";
|
||||
import RepeatIcon from "@mui/icons-material/Repeat";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import Card from "@mui/material/Card";
|
||||
|
||||
export default function TimelineStyle1() {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
borderBottom: "1px solid #EEF0F7",
|
||||
paddingBottom: "5px",
|
||||
mb: "15px",
|
||||
}}
|
||||
className="for-dark-bottom-border"
|
||||
>
|
||||
Timeline Style 1
|
||||
</Typography>
|
||||
|
||||
<Timeline position="alternate">
|
||||
<TimelineItem>
|
||||
<TimelineOppositeContent
|
||||
sx={{ m: "auto 0" }}
|
||||
align="right"
|
||||
variant="body2"
|
||||
color="text.secondary"
|
||||
>
|
||||
9:30 am
|
||||
</TimelineOppositeContent>
|
||||
|
||||
<TimelineSeparator>
|
||||
<TimelineConnector />
|
||||
<TimelineDot>
|
||||
<FastfoodIcon />
|
||||
</TimelineDot>
|
||||
<TimelineConnector />
|
||||
</TimelineSeparator>
|
||||
|
||||
<TimelineContent sx={{ py: "12px", px: 2 }}>
|
||||
<Typography variant="h6" mb="5px">
|
||||
Eat
|
||||
</Typography>
|
||||
|
||||
<Typography mb="5px">Because you need strength</Typography>
|
||||
|
||||
<Typography mb="5px">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</Typography>
|
||||
</TimelineContent>
|
||||
</TimelineItem>
|
||||
|
||||
<TimelineItem>
|
||||
<TimelineOppositeContent
|
||||
sx={{ m: "auto 0" }}
|
||||
variant="body2"
|
||||
color="text.secondary"
|
||||
>
|
||||
10:00 am
|
||||
</TimelineOppositeContent>
|
||||
|
||||
<TimelineSeparator>
|
||||
<TimelineConnector />
|
||||
<TimelineDot color="primary">
|
||||
<LaptopMacIcon />
|
||||
</TimelineDot>
|
||||
<TimelineConnector />
|
||||
</TimelineSeparator>
|
||||
|
||||
<TimelineContent sx={{ py: "12px", px: 2 }}>
|
||||
<Typography variant="h6" mb="5px">
|
||||
Code
|
||||
</Typography>
|
||||
<Typography mb="5px">Because it's awesome!</Typography>
|
||||
<Typography mb="5px">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
|
||||
accusantium doloremque laudantium.
|
||||
</Typography>
|
||||
</TimelineContent>
|
||||
</TimelineItem>
|
||||
|
||||
<TimelineItem>
|
||||
<TimelineOppositeContent
|
||||
sx={{ m: "auto 0" }}
|
||||
align="right"
|
||||
variant="body2"
|
||||
color="text.secondary"
|
||||
>
|
||||
12:30 pm
|
||||
</TimelineOppositeContent>
|
||||
|
||||
<TimelineSeparator>
|
||||
<TimelineConnector />
|
||||
<TimelineDot color="primary" variant="outlined">
|
||||
<HotelIcon />
|
||||
</TimelineDot>
|
||||
<TimelineConnector sx={{ bgcolor: "secondary.main" }} />
|
||||
</TimelineSeparator>
|
||||
|
||||
<TimelineContent sx={{ py: "12px", px: 2 }}>
|
||||
<Typography variant="h6" mb="5px">
|
||||
Sleep
|
||||
</Typography>
|
||||
|
||||
<Typography mb="5px">Because you need rest</Typography>
|
||||
|
||||
<Typography mb="5px">
|
||||
But I must explain to you how all this mistaken idea of
|
||||
denouncing pleasure and praising.
|
||||
</Typography>
|
||||
</TimelineContent>
|
||||
</TimelineItem>
|
||||
|
||||
<TimelineItem>
|
||||
<TimelineOppositeContent
|
||||
sx={{ m: "auto 0" }}
|
||||
align="right"
|
||||
variant="body2"
|
||||
color="text.secondary"
|
||||
>
|
||||
9:30 am
|
||||
</TimelineOppositeContent>
|
||||
|
||||
<TimelineSeparator>
|
||||
<TimelineConnector sx={{ bgcolor: "secondary.main" }} />
|
||||
<TimelineDot color="secondary">
|
||||
<RepeatIcon />
|
||||
</TimelineDot>
|
||||
<TimelineConnector />
|
||||
</TimelineSeparator>
|
||||
|
||||
<TimelineContent sx={{ py: "12px", px: 2 }}>
|
||||
<Typography variant="h6" mb="5px">
|
||||
Repeat
|
||||
</Typography>
|
||||
|
||||
<Typography mb="5px">
|
||||
Because this is the life you love!
|
||||
</Typography>
|
||||
|
||||
<Typography mb="5px">
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui
|
||||
blanditiis praesentium!
|
||||
</Typography>
|
||||
</TimelineContent>
|
||||
</TimelineItem>
|
||||
</Timeline>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,140 @@
|
||||
import * as React from "react";
|
||||
import Timeline from "@mui/lab/Timeline";
|
||||
import TimelineItem from "@mui/lab/TimelineItem";
|
||||
import TimelineSeparator from "@mui/lab/TimelineSeparator";
|
||||
import TimelineConnector from "@mui/lab/TimelineConnector";
|
||||
import TimelineContent from "@mui/lab/TimelineContent";
|
||||
import TimelineDot from "@mui/lab/TimelineDot";
|
||||
import TimelineOppositeContent, {
|
||||
timelineOppositeContentClasses,
|
||||
} from "@mui/lab/TimelineOppositeContent";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
|
||||
export default function TimelineStyle2() {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
borderBottom: "1px solid #EEF0F7",
|
||||
paddingBottom: "5px",
|
||||
mb: "15px",
|
||||
}}
|
||||
className="for-dark-bottom-border"
|
||||
>
|
||||
Timeline Style 2
|
||||
</Typography>
|
||||
|
||||
<Timeline
|
||||
sx={{
|
||||
[`& .${timelineOppositeContentClasses.root}`]: {
|
||||
flex: 0.2,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<TimelineItem>
|
||||
<TimelineOppositeContent color="textSecondary">
|
||||
Jan 15, 2023 (09:30 am)
|
||||
</TimelineOppositeContent>
|
||||
|
||||
<TimelineSeparator>
|
||||
<TimelineDot />
|
||||
<TimelineConnector />
|
||||
</TimelineSeparator>
|
||||
|
||||
<TimelineContent>
|
||||
<Typography variant="h6" mb="5px">
|
||||
First Event
|
||||
</Typography>
|
||||
<Typography mb="5px">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat.
|
||||
</Typography>
|
||||
</TimelineContent>
|
||||
</TimelineItem>
|
||||
|
||||
<TimelineItem>
|
||||
<TimelineOppositeContent color="textSecondary">
|
||||
Jan 16, 2023 (09:30 am)
|
||||
</TimelineOppositeContent>
|
||||
|
||||
<TimelineSeparator>
|
||||
<TimelineDot />
|
||||
<TimelineConnector />
|
||||
</TimelineSeparator>
|
||||
|
||||
<TimelineContent>
|
||||
<Typography variant="h6" mb="5px">
|
||||
Second Event
|
||||
</Typography>
|
||||
<Typography mb="5px">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat.
|
||||
</Typography>
|
||||
</TimelineContent>
|
||||
</TimelineItem>
|
||||
|
||||
<TimelineItem>
|
||||
<TimelineOppositeContent color="textSecondary">
|
||||
Jan 17, 2023 (09:30 am)
|
||||
</TimelineOppositeContent>
|
||||
|
||||
<TimelineSeparator>
|
||||
<TimelineDot />
|
||||
<TimelineConnector />
|
||||
</TimelineSeparator>
|
||||
|
||||
<TimelineContent>
|
||||
<Typography variant="h6" mb="5px">
|
||||
Third Event
|
||||
</Typography>
|
||||
<Typography mb="5px">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat.
|
||||
</Typography>
|
||||
</TimelineContent>
|
||||
</TimelineItem>
|
||||
|
||||
<TimelineItem>
|
||||
<TimelineOppositeContent color="textSecondary">
|
||||
Jan 18, 2023 (09:30 am)
|
||||
</TimelineOppositeContent>
|
||||
|
||||
<TimelineSeparator>
|
||||
<TimelineDot />
|
||||
</TimelineSeparator>
|
||||
|
||||
<TimelineContent>
|
||||
<Typography variant="h6" mb="5px">
|
||||
Fourth Event
|
||||
</Typography>
|
||||
<Typography mb="5px">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
|
||||
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
|
||||
quae ab illo inventore veritatis et quasi architecto beatae
|
||||
vitae dicta sunt explicabo.
|
||||
</Typography>
|
||||
</TimelineContent>
|
||||
</TimelineItem>
|
||||
</Timeline>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user