-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.tsx
47 lines (40 loc) · 1.07 KB
/
index.tsx
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
42
43
44
45
46
47
import React from "react";
import styled from "styled-components";
import Bullet, { SideProp, VariantProp } from "./bullet";
import { borderBox } from "../../../styles/common-style";
const Wrapper = styled.div`
${borderBox}
display: flex;
flex-direction: column;
`;
interface TimelineItem extends SideProp, VariantProp {
title: string;
party: string;
subtitle: string;
}
const StyledBullet = styled(Bullet)`
position: relative;
transform: translateX(
${({ rightSided }) => (rightSided ? "calc(50% - 8px)" : "calc(-50% + 8px)")}
);
`;
const LastBullet = styled(StyledBullet)`
height: unset;
flex-basis: auto;
flex-grow: 0;
`;
interface TimelineProps {
items: [TimelineItem, ...TimelineItem[]];
}
const Timeline: React.FC<TimelineProps> = ({ items, ...props }) => {
const lastItem = items[items.length - 1];
return (
<Wrapper {...props}>
{items.slice(0, -1).map((item, i) => (
<StyledBullet key={i} line {...item} isLast={false} />
))}
<LastBullet {...lastItem} isLast={true} />
</Wrapper>
);
};
export default Timeline;