tabler/preview/pages/avatars.astro

---
import { people, personById } from '@shared/lib/people'
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import Avatar from '@ui/Avatar.astro'
import AvatarUpload from '@ui/AvatarUpload.astro'
import AvatarList from '@ui/AvatarList.astro'
import Card from '@ui/Card.astro'
import CardBody from '@ui/CardBody.astro'
import CardTitle from '@ui/CardTitle.astro'
import CardSubtitle from '@ui/CardSubtitle.astro'
import { site } from '@shared/lib/site'
import { firstLetters } from '@shared/lib/string-format'
import DocsLink from '@ui/DocsLink.astro'

const iconIcons = ['user', 'settings', 'car', 'balloon', 'users', 'users-group', 'apps', 'ghost']

const colors = site.themeColors

const people8 = people.slice(0, 8)
const people5 = people.slice(0, 5)
const sizes = ['xxs', 'xs', 'sm', 'md', 'lg', 'xl'] as const
const listSizes = ['xxs', 'xs', 'sm', 'md', 'lg'] as const
const uploadSizes = ['xxs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'] as const
const statusColors = ['red', 'green', 'blue', 'yellow', 'secondary']
const brands = ['netflix', 'amazon', 'messenger', 'figma', 'twitch']
---

<DefaultLayout title="Avatars" pageMenu="base.avatars" description="Avatars display a photo, icon, or initials to represent a person, brand, or status.">
  <DocsLink slot="page-header-actions" path="/ui/components/avatar" />

  <div class="row row-cards">
    <div class="col-sm-6 col-lg-4">
      <Card>
        <CardBody>
          <CardTitle>Default avatar</CardTitle>
          <CardSubtitle>The base <code>.avatar</code> element — a placeholder box for a photo, icon, or initials.</CardSubtitle>
          <Avatar />
        </CardBody>
      </Card>
    </div>
    <div class="col-sm-6 col-lg-4">
      <Card>
        <CardBody>
          <CardTitle>Avatar with icon</CardTitle>
          <CardSubtitle>Put an icon inside the <code>avatar</code> instead of a photo.</CardSubtitle>
          <div class="avatar-list">
            {iconIcons.map((icon) => <Avatar icon={icon} />)}
          </div>
        </CardBody>
      </Card>
    </div>
    <div class="col-sm-6 col-lg-4">
      <Card>
        <CardBody>
          <CardTitle>Avatar icon colors</CardTitle>
          <CardSubtitle>Combine an icon avatar with any theme color.</CardSubtitle>
          <div class="avatar-list">
            {colors.map((color) => <Avatar icon="user" color={color} />)}
          </div>
        </CardBody>
      </Card>
    </div>
    <div class="col-sm-6 col-lg-4">
      <Card>
        <CardBody>
          <CardTitle>Simple avatar</CardTitle>
          <CardSubtitle>Show a photo by setting it as the <code>background-image</code> of the avatar.</CardSubtitle>
          <div class="avatar-list">
            {people8.map((person) => <Avatar person={person} />)}
          </div>
        </CardBody>
      </Card>
    </div>
    <div class="col-sm-6 col-lg-4">
      <Card>
        <CardBody>
          <CardTitle>Avatar placeholder</CardTitle>
          <CardSubtitle>Fall back to initials as the avatar text when there's no photo.</CardSubtitle>
          <div class="avatar-list">
            {people8.map((person) => <Avatar placeholder={firstLetters(person.full_name ?? '')} />)}
          </div>
        </CardBody>
      </Card>
    </div>
    <div class="col-sm-6 col-lg-4">
      <Card>
        <CardBody>
          <CardTitle>Avatar shapes</CardTitle>
          <CardSubtitle>Square by default — add <code>.rounded-circle</code> or <code>.rounded-0</code> to change the shape.</CardSubtitle>
          <div class="avatar-list">
            <Avatar />
            <Avatar class="rounded-circle" />
            <Avatar class="rounded-0" />
          </div>
        </CardBody>
      </Card>
    </div>
    <div class="col-12 col-lg-6">
      <Card>
        <CardBody>
          <CardTitle>Avatar sizes</CardTitle>
          <CardSubtitle>Six sizes from <code>avatar-xxs</code> to <code>avatar-xl</code>, for both photos and placeholders.</CardSubtitle>
          <div class="row">
            <div class="col-6">
              <div class="avatar-list">
                {sizes.map((size) => <Avatar size={size} />)}
              </div>
            </div>
            <div class="col-6">
              <div class="avatar-list">
                {sizes.map((size) => <Avatar placeholder="PK" size={size} />)}
              </div>
            </div>
          </div>
        </CardBody>
      </Card>
    </div>
    <div class="col-12 col-lg-6">
      <Card>
        <CardBody>
          <CardTitle>Avatar lists</CardTitle>
          <CardSubtitle>Stack avatars inside an <code>.avatar-list</code> container to show a group at a glance.</CardSubtitle>
          <div class="row g-3">
            {
              listSizes.map((size) => (
                <>
                  <div class="col-6">
                    <AvatarList stacked={true} size={size}>
                      {people5.map((person) => (
                        <Avatar person={person} />
                      ))}
                      <Avatar icon="plus" link />
                    </AvatarList>
                  </div>
                  <div class="col-6">
                    <AvatarList stacked={true} size={size}>
                      {people5.map((person) => (
                        <Avatar person={person} class="rounded-circle" />
                      ))}
                      <Avatar icon="plus" link class="rounded-circle" />
                    </AvatarList>
                  </div>
                </>
              ))
            }
          </div>
        </CardBody>
      </Card>
    </div>
    <div class="col-sm-6 col-lg-4">
      <Card>
        <CardBody>
          <CardTitle>Avatar upload</CardTitle>
          <CardSubtitle>An upload control styled as an avatar, for profile photo pickers.</CardSubtitle>
          {uploadSizes.map((size) => <AvatarUpload size={size} />)}
        </CardBody>
      </Card>
    </div>
    <div class="col-sm-6 col-lg-4">
      <Card>
        <CardBody>
          <CardTitle>Avatar statuses</CardTitle>
          <CardSubtitle>Add a <code>badge</code> inside the avatar for an online, away, or busy status dot.</CardSubtitle>
          {statusColors.map((color, i) => <Avatar person={personById(i + 1)} class="rounded-circle" status={color} />)}
        </CardBody>
      </Card>
    </div>
    <div class="col-sm-6 col-lg-4">
      <Card>
        <CardBody>
          <CardTitle>Avatar brands</CardTitle>
          <CardSubtitle>Add a recognizable brand icon on top of an avatar.</CardSubtitle>
          {brands.map((brand, i) => <Avatar person={personById(i + 1)} brand={brand} />)}
        </CardBody>
      </Card>
    </div>
  </div>
</DefaultLayout>