index.tsx
1.61 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
"use client"
import { Timeline as TimelineComponent, TimelineConnector, TimelineContent, TimelineDot, TimelineItem, TimelineOppositeContent, TimelineSeparator } from '@mui/lab';
import { Typography, Paper } from '@mui/material';
const MILESTONES = [
{ year: '2015', content: 'Canrd established', color: 'indigo' },
{ year: '2017', content: 'National high-tech enterprise', color: 'blue' },
{ year: '2018', content: 'Customers exceed 2000+', color: 'indigo' },
{ year: '2020', content: 'Customized division and Testing division (Xia Men) established', color: 'blue' },
{ year: '2021', content: 'Equipment division launched', color: 'indigo' },
{ year: '2022', content: 'R&D center (Houjie) and Pack division started', color: 'blue' },
];
const Timeline = () => {
const isMobile = false
return <TimelineComponent orientation={isMobile ? 'vertical' : 'horizontal'}>
{MILESTONES.map((milestone, index) => (
<TimelineItem key={index}>
<TimelineOppositeContent>
<Typography variant="body1" color="textSecondary">
<strong>{milestone.year}</strong>
</Typography>
</TimelineOppositeContent>
<TimelineSeparator>
<TimelineDot color={milestone.color} />
{index < MILESTONES.length - 1 && <TimelineConnector />}
</TimelineSeparator>
<TimelineContent>
<Paper elevation={3} className="p-3">
<Typography variant="h6" component="h1">
{milestone.content}
</Typography>
</Paper>
</TimelineContent>
</TimelineItem>
))}
</TimelineComponent>
}
export default Timeline