Timeline Component (Timeline.tsx)

Relevant source files

The following files were used as context for generating this wiki page:

• components/Timeline.tsx
• App.tsx
• constants.ts
• types.ts
• components/Section.tsx
• components/Icons.tsx

The Timeline component is a functional React component responsible for rendering a vertical timeline of project events. It is designed to be data-driven, receiving an array of event objects and displaying them sequentially. Each event in the timeline is visualized as a card containing a title, a description, and a progress bar indicating its completion percentage. This component is a key part of the main application page, used to display the project's operational plan.

The component is self-contained and relies on a specific data structure, TimelineEvent, for its content. It is styled using Tailwind CSS classes, ensuring a consistent look and feel with the rest of the application.

Sources: components/Timeline.tsx, App.tsx:73-75

Component Architecture

The Timeline component receives its data via props. The main application component, App.tsx, imports the timelineEvents data from constants.ts and passes it to the Timeline component. The Timeline component then maps over this data to render each event.

Sources: App.tsx:6, 74, components/Timeline.tsx:8

Data Flow

The following diagram illustrates the flow of data from its definition in constants.ts to its rendering by the Timeline component.

This diagram shows that constants.ts is the source of truth for the timeline data, which is then passed down through the App component to be rendered by Timeline.tsx.

Sources: constants.ts:47-58, App.tsx:6, 74, components/Timeline.tsx:8, 12

Component Props

The Timeline component accepts a single prop, events.

Prop	Type	Description
events	TimelineEvent[]	An array of event objects to display.

Sources: components/Timeline.tsx:7-9

The TimelineProps interface is defined as follows:

// components/Timeline.tsx:7-9
interface TimelineProps {
  events: TimelineEvent[];
}

Sources: components/Timeline.tsx:7-9

Data Structure: TimelineEvent

The data for each timeline item is defined by the TimelineEvent interface. This structure ensures that the data passed to the component is consistent.

Sources: types.ts:8-12

Interface Definition

The TimelineEvent interface is defined in types.ts.

Field	Type	Description
title	string	The main title of the timeline event.
description	string	A short description of the event.
percentage	number	The completion percentage (0-100).

Sources: types.ts:8-12

// types.ts:8-12
export interface TimelineEvent {
  title: string;
  description: string;
  percentage: number;
}

Sources: types.ts:8-12

Data Source

The actual data for the timeline is stored in the timelineEvents constant array within constants.ts.

// constants.ts:47-58
export const timelineEvents: TimelineEvent[] = [
  {
    title: "กิจกรรมที่ 1: การศึกษาและวิเคราะห์สถานการณ์ปัจจุบัน (Situation Analysis)",
    description: "รวบรวมข้อมูล, สัมภาษณ์ผู้มีส่วนได้ส่วนเสีย, และวิเคราะห์ปัญหาและความต้องการ",
    percentage: 30
  },
  // ... other events
];

This array is then imported by App.tsx and passed to the Timeline component.

Sources: constants.ts:47-58, App.tsx:6

Rendering Logic

The Timeline component uses a div with a left border (border-l-2 border-brand-secondary) to create the main vertical line of the timeline. It then iterates through the events array using the .map() function.

For each event, it renders:

1. A numbered circle (div) positioned to the left of the timeline's main line. The number corresponds to the event's index in the array.
2. A container div for the event's details, styled as a card with a shadow and border.
3. The event's title and description.
4. A progress bar, which is composed of two nested div elements. The outer div is the gray background, and the inner div has a background color of bg-brand-secondary and its width is set dynamically using an inline style based on the event.percentage.
5. The completion percentage text displayed below the progress bar.

Sources: components/Timeline.tsx:11-28

The following diagram shows the component structure for a single timeline event.

Usage in Application

The Timeline component is used within the main App.tsx file. It is wrapped by a generic Section component, which provides a consistent title and layout for different sections of the page.

// App.tsx:73-75
<Section title="แผนการดำเนินงาน (ตลอดโครงการ)">
  <Timeline events={timelineEvents} />
</Section>

Here, the Section component is given the title "แผนการดำเนินงาน (ตลอดโครงการ)" (Project Timeline), and the Timeline component is rendered as its child, receiving the timelineEvents data.

Sources: App.tsx:73-75, components/Section.tsx:8-11

Conclusion

The Timeline.tsx component is a well-structured, reusable UI element for visualizing sequential, progress-based data. It effectively separates data from presentation, receiving its content via props and focusing solely on rendering. Its integration into App.tsx within a Section component demonstrates a modular approach to building the application's user interface. The use of a clear TimelineEvent type and data sourced from constants.ts makes it easy to manage and update the project's displayed timeline.