// Import ========================================================================================================================
import App from '@/layouts/aia/app-layout';
import SectionNavigation from '@/components/aia/section-navigation';
import PageMeta from '@/components/aia/page-meta';
import PeopleExecutiveCard from '@/components/aia/people-excutive-card';
import PeopleMemberCard from '@/components/aia/people-member-card';
import { Head } from '@inertiajs/react';
// Type Definitions ========================================================================================================================
type Member = {
id: number;
portrait: string | null;
name: string;
title: string;
text: string;
positions: string[];
member_type: 'board' | 'executive';
sort: number;
status: string;
created_at: string;
updated_at: string;
};
type PeopleProps = {
members: Member[];
};
// Component ========================================================================================================================
export default function People({ members = [] }: PeopleProps) {
// Helper function to get portrait URL with fallback
const getPortraitUrl = (portrait: string | null): string => {
if (!portrait) {
return '/images/img-portrait.png'; // Default placeholder
}
return portrait;
};
// Empty state handling
if (members.length === 0) {
return (
<>
Board Members - Taiwan AI Academy
}
pageMeta={
}
>
No board members available at this time.
);
}
// Split members into sections
const featuredMember = members[0]; // First member - large featured card
const secondaryMembers = members.slice(1, 3); // Next 2 members - medium cards
const regularMembers = members.slice(3); // Remaining members - small grid cards
return (
<>
Board Members - Taiwan AI Academy
}
pageMeta={
}
>
{/* Featured and Secondary Members Section */}
{/* Featured Member - Full Width */}
{/* Secondary Members - Two Columns */}
{secondaryMembers.map((member, index) => (
))}
{/* Regular Members Grid */}
{regularMembers.length > 0 && (