feat: setup basic component structure

Author: stampaaaron

.eslintrc.js

@@ -28,5 +28,6 @@ module.exports = {
     'react/require-default-props': 'off',
     'react/jsx-fragments': ['error', 'element'],
     'react/no-unknown-property': ['error', { ignore: ['css'] }],
+    'react/jsx-props-no-spreading': 'off',
   },
 };

src/components/Timeline.stories.mdx

@@ -3,4 +3,4 @@ import { Timeline } from './Timeline';
 
 <Meta title="Timeline" component={Timeline} />
 
-<Timeline />
+<Timeline items={[{ title: 'test', date: new Date() }]} />

src/components/Timeline.tsx

@@ -1,3 +1,9 @@
-export function Timeline() {
-  return <p>working</p>;
+import { TimelineItem, TimelineItemProps } from './TimelineItem';
+
+export type TimelineProps = {
+  items: TimelineItemProps[];
+};
+
+export function Timeline({ items }: TimelineProps) {
+  return items.map((item) => <TimelineItem key={item.date.toISOString()} {...item} />);
 }

src/components/TimelineItem.tsx

@@ -0,0 +1,17 @@
+import { PropsWithChildren } from 'react';
+
+export type TimelineItemProps = PropsWithChildren<{
+  className?: string;
+  date: Date;
+  title: string;
+}>;
+
+export function TimelineItem({ className, title, date, children }: TimelineItemProps) {
+  return (
+    <div className={className}>
+      <p>{date.toISOString()}</p>
+      <p>{title}</p>
+      {children}
+    </div>
+  );
+}