My personal website
renderg.host
1import { Heading } from '@/components/Heading/Heading';
2import { Paragraph } from '@/components/Paragraph/Paragraph';
3import { cn } from '@/lib/utils';
4import React from 'react';
5import { timelineStyles } from './Timeline.styles';
6import { TimelineProps } from './Timeline.types';
7
8export const Timeline: React.FC<TimelineProps> = ({ items, className }) => {
9 return (
10 <ol className={cn(timelineStyles.wrapper, className)}>
11 {items.map((item, idx) => (
12 <li key={idx} className={timelineStyles.item}>
13 <div className="flex items-center">
14 <span className={timelineStyles.indicator}></span>
15 <span className={timelineStyles.date}>{item.date}</span>
16 </div>
17 <div className={timelineStyles.contentWrapper}>
18 <Heading level={4} size="sm" className={timelineStyles.title}>
19 {item.title}
20 </Heading>
21 <Paragraph size="sm" className={timelineStyles.description}>
22 {item.description}
23 </Paragraph>
24 </div>
25 </li>
26 ))}
27 </ol>
28 );
29};