Header Component (Header.tsx)

The Header.tsx file defines a stateless React functional component that renders the main application header. Its primary role is to provide consistent branding and navigation context at the top of the user interface. The header is designed to be sticky, remaining visible as the user scrolls. It displays the logo and name of the National Institute for Emergency Medicine (NIEM) and the title of the application.

This component is a purely presentational element, meaning it does not manage any internal state or handle complex logic. It is integrated into the main application shell in App.tsx, appearing on every page.

Sources: components/Header.tsx, App.tsx:14

Component Structure

The Header component is composed of a single <header> element containing two main child <div> elements, structured using a flexbox layout.

1. Branding Section: The left side of the header, containing the NIEM logo and the institute's name in both Thai and English.
2. Title Section: The right side of the header, which displays the application's title, "AI in Emergency Medical Services". This section is responsive and is hidden on small screens.

Sources: components/Header.tsx:5-18

JSX Breakdown

The following diagram illustrates the JSX structure of the Header component.

This diagram shows the nested structure of the elements within the Header component.

Sources: components/Header.tsx:5-18

Styling and Layout

The component relies heavily on Tailwind CSS for styling and layout. Key styling features include:

• Sticky Positioning: The classes sticky top-0 z-50 ensure the header remains fixed to the top of the viewport during scrolling, with a z-index to keep it above other content.
• Appearance: bg-white shadow-md gives the header a white background and a subtle shadow, visually lifting it off the page content.
• Flexbox Layout: flex items-center justify-between arranges the branding and title sections on opposite ends of the header and vertically aligns their content.
• Responsive Design: The hidden md:block classes on the title section make it visible only on medium-sized screens and larger, adapting the layout for mobile devices.
• Custom Theming: The header uses custom theme colors like text-brand-primary. These colors are defined within a <script> tag in index.html.

Custom Theme Colors

The application defines custom brand colors in index.html which are then used by Tailwind CSS.

Sources: index.html:17-21, components/Header.tsx:11, components/Section.tsx:9

Integration

The Header component is imported and rendered once within the main App component. It is placed at the very top of the main div, ensuring it appears before all other page content.

The diagram below shows the component hierarchy, starting from the application's entry point.

This diagram illustrates that Header.tsx is a direct child of App.tsx and sits at the same level as the main content area and the footer.

Sources: App.tsx:2,14, index.tsx:3,12

Code Snippet: Usage in App.tsx

This snippet from App.tsx shows how the Header component is rendered.

// App.tsx
import React from 'react';
import { Header } from './components/Header';
// ... other imports

const App: React.FC = () => {
  return (
    <div className="min-h-screen bg-gray-50 text-gray-800 font-sans">
      <Header />
      <main className="container mx-auto px-4 py-8 md:py-12">
        {/* ... page content ... */}
      </main>
      {/* ... footer and other components ... */}
    </div>
  );
};

Sources: App.tsx:2,12-15

Conclusion

The Header.tsx component is a fundamental building block of the application's user interface. It is a simple, static, and reusable component that provides consistent branding across the site. Its implementation demonstrates effective use of Tailwind CSS for styling, layout, and responsiveness, and its integration into App.tsx establishes the overall page structure.

Sources: components/Header.tsx, App.tsx