Settings card

import { BuildingsIcon } from '@phosphor-icons/react';
import { SettingsCard, TextField } from '@arbol-ai/ui';

<SettingsCard
  className="max-w-xl"
  description="How your organization appears to patients and in every app."
  icon={<BuildingsIcon />}
  title="Company"
>
  <TextField defaultValue="Clínica Norte" label="Name" />
  <TextField defaultValue="NIT 900.123.456-7" label="Tax ID" />
</SettingsCard>

import { IdentificationCardIcon } from '@phosphor-icons/react';
import { useState } from 'react';
import { Button, Property, PropertyList, SettingsCard, TextField } from '@arbol-ai/ui';

const PatientData = () => {
  const [isEditing, setIsEditing] = useState(false);
  const [phone, setPhone] = useState('+57 300 555 0101');
  const [draft, setDraft] = useState(phone);
  return (
    <SettingsCard
      action={
        isEditing ? null : (
          <Button
            onPress={() => {
              setDraft(phone);
              setIsEditing(true);
            }}
            size="sm"
            variant="outline"
          >
            Edit
          </Button>
        )
      }
      className="max-w-xl"
      description="Filled in when booking; correct them here."
      footer={
        isEditing ? (
          <>
            <Button
              onPress={() => {
                setPhone(draft);
                setIsEditing(false);
              }}
              size="sm"
            >
              Save changes
            </Button>
            <Button
              onPress={() => {
                setIsEditing(false);
              }}
              size="sm"
              variant="ghost"
            >
              Cancel
            </Button>
          </>
        ) : undefined
      }
      icon={<IdentificationCardIcon />}
      title="Patient data"
    >
      {isEditing ? (
        <TextField label="Phone" onChange={setDraft} value={draft} />
      ) : (
        <PropertyList columns={2}>
          <Property label="Document">CC 1.020.304.050</Property>
          <Property label="Phone">{phone}</Property>
        </PropertyList>
      )}
    </SettingsCard>
  );
};

<PatientData />