Card Component (Card.tsx)

Relevant source files

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

• components/Card.tsx
• App.tsx
• constants.ts
• components/Section.tsx
• index.html

The Card component is a reusable functional React component designed to display a block of content with a title within a styled container. It serves as a fundamental UI element for presenting information in a visually distinct and organized manner, such as project objectives or key features. The component is styled using Tailwind CSS, featuring a shadow, hover effects, and a colored top border for brand consistency.

The primary use case observed in the application is within the App.tsx main component, where it is used inside a Section to render a list of project objectives. The data for these cards is sourced from the projectObjectives array in constants.ts.

Component Definition and Properties

The Card component is defined as a standard React functional component that accepts a title and children as props.

Sources: components/Card.tsx:3-7

Props Interface (CardProps)

The component's properties are defined by the CardProps interface.

Props Table

Prop	Type	Description
title	string	The text to be displayed as the card's title.
children	React.ReactNode	The content to be rendered inside the card body.

Sources: components/Card.tsx:3-6

Component Code

// components/Card.tsx:7-14
export const Card: React.FC<CardProps> = ({ title, children }) => {
  return (
    <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 border-t-4 border-brand-secondary">
      <h3 className="text-xl font-bold text-brand-primary mb-3">{title}</h3>
      <div className="text-gray-600">{children}</div>
    </div>
  );
};

Sources: components/Card.tsx:7-14

Structure and Styling

The component consists of a main div container that wraps a h3 element for the title and a div for the child content. Styling is applied directly via Tailwind CSS classes.

• Container (div): The main card element with a white background, padding, rounded corners, a box shadow, and a yellow top border (border-brand-secondary). It also has a transition effect that intensifies the shadow on hover.
• Title (h3): A bold, large text element styled with the primary brand color (text-brand-primary).
• Content (div): A container for the child elements, with a standard gray text color.

The brand colors brand-primary and brand-secondary are defined in the tailwind.config script within the main index.html file.

Class	Purpose
bg-white	Sets a white background.
p-6	Applies padding.
rounded-lg	Applies rounded corners.
shadow-md	Applies a medium box shadow.
hover:shadow-xl	Applies a larger shadow on hover.
transition-shadow	Smoothly animates the shadow change.
border-t-4	Adds a 4px top border.
border-brand-secondary	Colors the top border with the secondary brand color (#FFC72C).
text-brand-primary	Colors the title text with the primary brand color (#005A9C).

Sources: components/Card.tsx:9-12, index.html:15-19

Usage Example

The Card component is used in App.tsx to display the project's objectives. It is rendered within a Section component, iterating over an array of projectObjectives imported from constants.ts.

Component Hierarchy

The following diagram illustrates how the Card component fits into the overall application structure when displaying project objectives.

Data Flow

Data flows from a constant array into the App component, which then passes the relevant pieces of data as props to each Card instance.

Code Implementation

In App.tsx, the projectObjectives array is mapped, and for each object in the array, a Card component is created. The obj.title is passed as the title prop, and the obj.description is passed as a child paragraph element.

// App.tsx:34-40
<Section title="วัตถุประสงค์โครงการ">
  <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
    {projectObjectives.map((obj, index) => (
      <Card key={index} title={`(${index + 1}) ${obj.title}`}>
        <p>{obj.description}</p>
      </Card>
    ))}
  </div>
</Section>

The data itself is defined in constants.ts:

// constants.ts:3-10
export const projectObjectives = [
  {
    title: "พัฒนาระบบ AI",
    description: "เพื่อช่วยในการประเมินและรับแจ้งเหตุฉุกเฉินได้อย่างรวดเร็วและมีประสิทธิภาพ"
  },
  // ... more objectives
];

Sources: App.tsx:34-40, constants.ts:3-19

Conclusion

The Card component is a simple yet essential building block in the "AI for Thai EMS" application's frontend. It provides a consistent and reusable pattern for displaying titled sections of content. Its reliance on props for content and Tailwind CSS for styling makes it both flexible and easy to maintain, contributing to a clean and modular component architecture.