Skip to content

Commit b745c70

Browse files
alexbaumgertneralexbaumgertner
committed
Start working on time history component
1 parent 515abd1 commit b745c70

File tree

5 files changed

+253
-2
lines changed

5 files changed

+253
-2
lines changed

‎components/TimeHistory/TimeHistory.module.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.component {
2+
display: flex;
3+
flex-direction: column;
4+
gap: 16px;
5+
}

‎components/TimeHistory/TimeHistory.stories.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
3+
import TimeHistory from "./TimeHistory";
4+
import {
5+
KHRUSHCHEV_LIFE_BAR,
6+
PINK_FLOYD_LIFE_BAR,
7+
} from "../../utils/mocks/TimeSpanBar.mock";
8+
9+
const meta: Meta<typeof TimeHistory> = {
10+
title: "Components/TimeHistory",
11+
component: TimeHistory,
12+
parameters: {
13+
layout: "fullscreen",
14+
},
15+
};
16+
17+
export default meta;
18+
19+
type Story = StoryObj<typeof TimeHistory>;
20+
21+
export const Default: Story = {
22+
args: {
23+
historyItems: [{ ...KHRUSHCHEV_LIFE_BAR }, { ...PINK_FLOYD_LIFE_BAR }],
24+
range: {
25+
start: new Date("1983-01-01"),
26+
end: new Date("2025-01-01"),
27+
},
28+
},
29+
};

‎components/TimeHistory/TimeHistory.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { TimeSpanBarProps, TimeSpanBar } from "../TimeSpanBar/TimeSpanBar";
2+
3+
import styles from "./TimeHistory.module.css";
4+
5+
export interface TimeHistoryProps {
6+
historyItems: TimeSpanBarProps[];
7+
range: {
8+
start: Date;
9+
end: Date;
10+
};
11+
}
12+
13+
const TimeHistory = ({ historyItems, range }: TimeHistoryProps) => {
14+
return (
15+
<div className={styles.component}>
16+
{historyItems.map((item) => (
17+
<TimeSpanBar {...item} />
18+
))}
19+
</div>
20+
);
21+
};
22+
23+
export default TimeHistory;

‎components/TimeSpanBar/TimeSpanBar.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ type Location = {
88
longitude: number;
99
};
1010

11-
type TimeSpanBarProps = {
11+
export interface TimeSpanBarProps {
1212
start: {
1313
date: Date;
1414
location?: Location;
@@ -27,7 +27,7 @@ type TimeSpanBarProps = {
2727
}[];
2828
header: string;
2929
image: string;
30-
};
30+
}
3131

3232
const TimeSpanBar = ({
3333
start,

‎utils/mocks/TimeSpanBar.mock.ts‎

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
import { TimeSpanBarProps } from "../../components/TimeSpanBar/TimeSpanBar";
2+
3+
export const KHRUSHCHEV_LIFE_BAR: TimeSpanBarProps = {
4+
header: "Хрущёв, Никита Сергеевич",
5+
image:
6+
"https://upload.wikimedia.org/wikipedia/commons/c/c5/Bundesarchiv_Bild_183-B0628-0015-035%2C_Nikita_S._Chruschtschow.jpg?uselang=ru",
7+
start: {
8+
date: new Date("1894-04-15"),
9+
location: {
10+
name: "Moscow",
11+
latitude: 55.7558,
12+
longitude: 37.6173,
13+
},
14+
},
15+
end: {
16+
date: new Date("1971-09-11"),
17+
location: {
18+
name: "Moscow",
19+
latitude: 55.7558,
20+
longitude: 37.6173,
21+
},
22+
},
23+
events: [
24+
{
25+
name: "Event 1",
26+
info: {
27+
date: new Date("2024-02-15"),
28+
image:
29+
"https://upload.wikimedia.org/wikipedia/commons/thumb/3/37/NikitaNina.JPG/440px-NikitaNina.JPG",
30+
location: {
31+
name: "Moscow",
32+
latitude: 55.7558,
33+
longitude: 37.6173,
34+
},
35+
},
36+
},
37+
{
38+
name: "Event 2",
39+
info: {
40+
date: new Date("2024-04-20"),
41+
image:
42+
"https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Joseph_Stalin_and_Nikita_Khrushchev%2C_1936.jpg/440px-Joseph_Stalin_and_Nikita_Khrushchev%2C_1936.jpg",
43+
location: {
44+
name: "Moscow",
45+
latitude: 55.7558,
46+
longitude: 37.6173,
47+
},
48+
},
49+
},
50+
{
51+
name: "Event 3",
52+
info: {
53+
date: new Date("2024-06-10"),
54+
image:
55+
"https://upload.wikimedia.org/wikipedia/commons/d/dc/Nikita_Khrushchev-TIME-1953.jpg",
56+
location: {
57+
name: "Moscow",
58+
latitude: 55.7558,
59+
longitude: 37.6173,
60+
},
61+
},
62+
},
63+
{
64+
name: "Event 4",
65+
info: {
66+
date: new Date("2024-08-30"),
67+
image:
68+
"https://upload.wikimedia.org/wikipedia/commons/thumb/3/37/NikitaNina.JPG/440px-NikitaNina.JPG",
69+
location: {
70+
name: "Moscow",
71+
latitude: 55.7558,
72+
longitude: 37.6173,
73+
},
74+
},
75+
},
76+
{
77+
name: "Event 5",
78+
info: {
79+
date: new Date("2024-10-15"),
80+
image:
81+
"https://upload.wikimedia.org/wikipedia/commons/thumb/3/37/NikitaNina.JPG/440px-NikitaNina.JPG",
82+
location: {
83+
name: "Moscow",
84+
latitude: 55.7558,
85+
longitude: 37.6173,
86+
},
87+
},
88+
},
89+
],
90+
};
91+
92+
export const PINK_FLOYD_LIFE_BAR: TimeSpanBarProps = {
93+
header: "Pink Floyd",
94+
image: "https://en.wikipedia.org/wiki/File:Pink_Floyd_-_all_members.jpg",
95+
start: {
96+
date: new Date("1965-01-01"),
97+
},
98+
end: {
99+
date: new Date("1985-01-01"),
100+
},
101+
events: [
102+
{
103+
name: "Formation",
104+
info: {
105+
date: new Date("1965-02-15"),
106+
location: {
107+
name: "London",
108+
latitude: 51.5074,
109+
longitude: -0.0799,
110+
},
111+
image:
112+
"https://media.pitchfork.com/photos/592f53a09937e767378adf04/2:1/w_2240,c_limit/ea5185fb.jpg",
113+
},
114+
},
115+
{
116+
name: "A Saucerful of Secrets",
117+
info: {
118+
date: new Date("1968-02-15"),
119+
location: {
120+
name: "London",
121+
latitude: 51.5074,
122+
longitude: -0.0799,
123+
},
124+
image:
125+
"https://upload.wikimedia.org/wikipedia/en/5/54/Saucerful_of_secrets2.jpg",
126+
},
127+
},
128+
{
129+
name: "The Dark Side of the Moon",
130+
info: {
131+
date: new Date("1973-03-01"),
132+
location: {
133+
name: "London",
134+
latitude: 51.5074,
135+
longitude: -0.0799,
136+
},
137+
image:
138+
"https://upload.wikimedia.org/wikipedia/en/3/3b/Dark_Side_of_the_Moon.png",
139+
},
140+
},
141+
{
142+
name: "Wish You Were Here",
143+
info: {
144+
date: new Date("1975-09-12"),
145+
location: {
146+
name: "London",
147+
latitude: 51.5074,
148+
longitude: -0.0799,
149+
},
150+
image:
151+
"https://upload.wikimedia.org/wikipedia/en/8/8c/Wish_you_were_here_by_Pink_Floyd_banner.png",
152+
},
153+
},
154+
{
155+
name: "Animals",
156+
info: {
157+
date: new Date("1977-01-21"),
158+
location: {
159+
name: "London",
160+
latitude: 51.5074,
161+
longitude: -0.0799,
162+
},
163+
image:
164+
"https://upload.wikimedia.org/wikipedia/en/7/74/Pink_Floyd-Animals-Frontal.jpg",
165+
},
166+
},
167+
{
168+
name: "The Wall",
169+
info: {
170+
date: new Date("1979-11-30"),
171+
location: {
172+
name: "London",
173+
latitude: 51.5074,
174+
longitude: -0.0799,
175+
},
176+
image:
177+
"https://upload.wikimedia.org/wikipedia/en/thumb/1/13/PinkFloydWallCoverOriginalNoText.jpg/440px-PinkFloydWallCoverOriginalNoText.jpg",
178+
},
179+
},
180+
{
181+
name: "The Final Cut",
182+
info: {
183+
date: new Date("1983-03-21"),
184+
location: {
185+
name: "London",
186+
latitude: 51.5074,
187+
longitude: -0.0799,
188+
},
189+
image:
190+
"https://upload.wikimedia.org/wikipedia/en/e/e4/FloydFC-Cover01.jpg",
191+
},
192+
},
193+
],
194+
};

0 commit comments

Comments
 (0)