DetailsCard

DetailsCard
├── DetailsCardHeader
│   ├── DetailsCardTitle
│   └── DetailsCardDescription
└── DetailsCardBody
    ├── DetailsCardRow
    │   ├── DetailsCardIcon
    │   ├── DetailsCardLabel
    │   └── DetailsCardValue
    └── DetailsCardRowGroup
        └── DetailsCardRow

import {
  Avatar,
  AvatarFallback,
} from "@giddaa-housing/ui/avatar";
import {
  DetailsCard,
  DetailsCardBody,
  DetailsCardHeader,
  DetailsCardLabel,
  DetailsCardRow,
  DetailsCardTitle,
  DetailsCardValue,
} from "@giddaa-housing/ui/details-card";

<DetailsCard>
  <DetailsCardHeader>
    <DetailsCardTitle>Personal details</DetailsCardTitle>
    <Avatar className="mt-gdt-md" size="sm">
      <AvatarFallback>SW</AvatarFallback>
    </Avatar>
  </DetailsCardHeader>
  <DetailsCardBody>
    <DetailsCardRow>
      <DetailsCardLabel>Status</DetailsCardLabel>
      <DetailsCardValue>Verified</DetailsCardValue>
    </DetailsCardRow>
  </DetailsCardBody>
</DetailsCard>;