PatientCard.BirthDate

A compound component for displaying patient birth date and age information with calendar icon support. Provides flexible date formatting and age calculation for healthcare applications.

Basic ExampleCopy Anchor Link

import { PatientCard } from "@ovok/native";
import * as React from "react";

const birthDate = "1990-01-01";

const BasicAgeDisplay = () => (
  <PatientCard.BirthDate>
    <PatientCard.BirthDate.Icon />
    <PatientCard.BirthDate.Text birthDate={birthDate} variant="both" />
  </PatientCard.BirthDate>
);

export default BasicAgeDisplay;

PropsCopy Anchor Link

Every prop, with its type and description, is listed in the @ovok/native/patient API reference.

Compound ComponentsCopy Anchor Link

• PatientCard.BirthDate.Icon - Calendar icon component
• PatientCard.BirthDate.Text - Date and age text display component

LocalizationCopy Anchor Link

The component uses these translation keys:

{
  "patient-card": {
    "age-years": "{{age}} years old",
    "birth-date-with-age": "{{date}} ({{age}} years old)"
  }
}

StylingCopy Anchor Link

Theme Colors UsedCopy Anchor Link

• theme.colors.onSurfaceVariant - Icon and text color
• theme.spacing(1) - Gap between icon and text
• theme.fonts.bodyMedium - Text typography

Date CalculationCopy Anchor Link

• Uses date-fns for reliable age calculation
• Handles timezone differences appropriately
• Supports various date format patterns
• Provides localized age display with translations