Create Event Timeline Component for Festival Timeline

[7alip]

Design

https://motiff.com/file/u4SEUg6y8Q4MmBbKBssdn33?nodeId=2%3A855&type=design

IMAGE

Description

We need to create a new component to display the festival timeline/progress information in a visually appealing way. The component should show the different stages of the festival with their respective dates and descriptions.

Component Details

Location

Create new components in packages/ui/src/components/EventTimeline/{EventTimelineCard,EventTimeline}.tsx

Props Interface

type Event = {
  id: string;
  title: string;
  date: string;
  description: string;
  // status: 'upcoming' | 'current' | 'completed'; Handle this in the component
}

type EventTimelineProps = {
  className?: string;
  events: Event[];
}

Required Features

1. Vertical timeline layout with connected stages
2. Visual indicators for current, completed, and upcoming stages
3. Responsive design that works well on mobile and desktop

Storybook Story

Create a story in packages/ui/src/components/EventTimeline/EventTimeline.stories.tsx with the following variants:

1. Default view
2. Mobile view

Example Usage

<EventTimeline
  events={[
    {
      id: 'application',
      title: 'Application Period',
      date: '1 - 31 March 2025',
      description: 'Applications for festival participation will be accepted...',
    },
    // ... other events
  ]}
/>