Record layout

import { PencilSimpleIcon } from '@phosphor-icons/react';
import { ButtonLink, Card, CardAction, CardContent, CardHeader, CardTitle, Link, Property, PropertyList, RecordLayout } from '@arbol-ai/ui';

<RecordLayout
  aside={
    <Card className="gap-4 py-5">
      <CardHeader className="px-5">
        <CardTitle level={2}>Settings</CardTitle>
        <CardAction>
          <ButtonLink href="#/record-layout" size="sm" variant="ghost">
            <PencilSimpleIcon aria-hidden /> Edit
          </ButtonLink>
        </CardAction>
      </CardHeader>
      <CardContent className="px-5">
        <PropertyList>
          <Property label="Agent">
            <Link href="#/record-layout">Front desk</Link>
          </Property>
          <Property label="Line">+57 601 555 0101</Property>
          <Property label="Contact hours">Weekdays, 8:00 to 18:00</Property>
          <Property label="Retries">Two, an hour apart</Property>
        </PropertyList>
      </CardContent>
    </Card>
  }
  asideLabel="Campaign details"
>
  <p className="text-muted-foreground rounded-card border p-6 text-sm">
    812 reached · 164 booked · 66% answered
  </p>
  <p className="text-muted-foreground rounded-card border p-6 text-sm">
    The recipients table goes here.
  </p>
</RecordLayout>