Meeting Detail Card
Data Display
Dashboard
Detailed meeting information card with attendees, location, and action buttons.
Preview
Meeting details with full information
Weekly Team Sync
10:00 AM - 11:00 AM
Zoom Meeting
JD
MK
+3
Props
Component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
title* | string | — | Meeting title |
time* | string | — | Time range (e.g., "10:00 AM - 11:00 AM") |
location | string | — | Meeting location or platform |
isRecurring | boolean | false | Show recurring badge |
attendees | Attendee[] | — | List of meeting attendees |
videoLink | string | — | Video meeting link |
onJoin | () => void | — | Callback for join button |
onEdit | () => void | — | Callback for edit button |
onDelete | () => void | — | Callback for delete action |
reminder | string | — | Reminder time setting |
className | string | — | Additional CSS classes |
Usage
Import and implementation examples
import { MeetingDetailCard } from '@/components/ui/meeting-detail-card'
<MeetingDetailCard
title="Weekly Team Sync"
time="10:00 AM - 11:00 AM"
location="Zoom Meeting"
isRecurring={true}
attendees={[
{ id: 1, name: 'John Doe', initials: 'JD' },
{ id: 2, name: 'Mary Kim', initials: 'MK' },
{ id: 3, name: 'Alice Lee', initials: 'AL' },
]}
videoLink="https://zoom.us/j/123456789"
reminder="15 minutes before"
onJoin={() => window.open(videoLink)}
onEdit={() => openEditModal()}
onDelete={() => confirmDelete()}
/>This block is self-contained (no UI component dependencies)
Features
Built-in functionality
- Full details: Complete meeting information at a glance
- Attendees: Avatar list with overflow indicator
- Video link: Quick join button for video meetings
- Recurrence: Badge indicator for recurring meetings
- Reminders: Display reminder settings
- Action buttons: Join, edit, and delete actions
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
role="article" for card containeraria-label for action buttonsaria-describedby for meeting detailsKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Navigate between action buttons |
| Enter | Activate focused button |
Notes
- Screen readers announce meeting details
- Attendee count is accessible
- Action buttons have clear labels