--- /** * MeetingIllustration — a static confirmation card: a short message with * the meeting time highlighted as a colored chip, an attendee row (avatar, * name, role), and a footer with a "join" line and a non-functional * "reschedule" pill. Every visible string is a prop, so the same layout * can illustrate any meeting, invite, or scheduling feature. * * Pure markup and CSS — no client script, no entrance animation. The * footer controls are presentational only (no click handlers exist), so * they render as plain text/elements rather than focusable buttons that * would promise an action they cannot perform. */ /** An attendee shown in the card's avatar row. */ export interface MeetingAttendee { /** Full name shown next to the avatar. */ name: string; /** Short role or title shown under the name. */ role: string; /** Portrait image URL. Defaults to a neutral stock headshot. */ avatarUrl?: string; } interface Props { /** Person the confirmation message greets, e.g. `'Manu'`. */ recipientName?: string; /** Highlighted meeting time range, e.g. `'4 PM to 5 PM'`. */ timeRange?: string; /** Trailing context rendered after the highlighted time, e.g. `'Central Time today'`. */ timeContext?: string; /** Attendee shown under the message. */ attendee?: MeetingAttendee; /** Label for the non-interactive "join" line. */ joinLabel?: string; /** Label for the non-interactive "reschedule" pill. */ rescheduleLabel?: string; /** Additional classes for the root element. */ class?: string; } const { recipientName = 'Manu', timeRange = '4 PM to 5 PM', timeContext = 'Central Time today', attendee = { name: 'Priya Shah', role: 'Senior Design Engineer', avatarUrl: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=64&h=64&fit=crop&crop=faces', }, joinLabel = 'Join meeting', rescheduleLabel = 'Reschedule', class: className, } = Astro.props; ---

Hi {recipientName}! Your meeting has been scheduled for{' '} {timeRange}{' '} {timeContext}.

{attendee.name} {attendee.role}

{joinLabel}

{rescheduleLabel}

Installation

Install dependencies

Add these files

Configuration

Use it