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