Settings links

import { BuildingsIcon, EnvelopeSimpleIcon, ListChecksIcon, StethoscopeIcon, UsersThreeIcon } from '@phosphor-icons/react';
import { SettingsLink, SettingsLinkGroup } from '@arbol-ai/ui';

<div className="space-y-6">
  <SettingsLinkGroup title="Your organization">
    <SettingsLink
      description="The institution’s name and the functions it uses."
      href="#/settings-links"
      icon={<BuildingsIcon />}
      status="Clínica Norte · 5 functions"
      title="Institution"
    />
    <SettingsLink
      description="Who answers and where: hours, rooms and appointments at a time."
      href="#/settings-links"
      icon={<UsersThreeIcon />}
      status="4 agendas · 1 without hours"
      statusTone="warning"
      title="Professionals and rooms"
    />
    <SettingsLink
      description="Consultations and procedures: length, color and who attends them."
      href="#/settings-links"
      icon={<StethoscopeIcon />}
      status="12 active services"
      title="Services"
    />
  </SettingsLinkGroup>
  <SettingsLinkGroup title="Appointments and patients">
    <SettingsLink
      description="What is asked at each booking: document, phone and your own fields."
      href="#/settings-links"
      icon={<ListChecksIcon />}
      title="Booking details"
    />
    <SettingsLink
      description="What your team and your patients receive by email, WhatsApp or a call."
      href="#/settings-links"
      icon={<EnvelopeSimpleIcon />}
      title="Notifications"
    />
  </SettingsLinkGroup>
</div>

import { PlugsConnectedIcon } from '@phosphor-icons/react';
import { SettingsLink, SettingsLinkGroup } from '@arbol-ai/ui';

<SettingsLinkGroup>
  <SettingsLink
    description="WhatsApp and calls with Arbol, and email."
    href="#/settings-links"
    icon={<PlugsConnectedIcon />}
    title="Integrations"
  />
</SettingsLinkGroup>