tabler/preview/pages/avatars.astro

---
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 people from '@data/people.json'
import { site } from '@shared/lib/site'
import { firstLetters } from '@shared/lib/string-format'

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

// themeColors keys (blue..cyan).
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" pageHeader="Avatars">
  <div class="row row-cards">
    <div class="col-4">
      <Card>
        <CardBody>
          <CardTitle as="h2">Default avatar</CardTitle>
          <Avatar />
        </CardBody>
      </Card>
    </div>
    <div class="col-4">
      <Card>
        <CardBody>
          <CardTitle as="h2">Avatar with icon</CardTitle>

          <div class="avatar-list">
            {iconIcons.map((icon) => <Avatar icon={icon} />)}
          </div>
        </CardBody>
      </Card>
    </div>
    <div class="col-4">
      <Card>
        <CardBody>
          <CardTitle as="h2">Avatar with icon</CardTitle>

          <div class="avatar-list">
            {colors.map((color) => <Avatar icon="user" color={color} />)}
          </div>
        </CardBody>
      </Card>
    </div>
    <div class="col-4">
      <Card>
        <CardBody>
          <CardTitle as="h2">Simple avatar</CardTitle>
          <div class="avatar-list">
            {people8.map((person) => <Avatar person={person} />)}
          </div>
        </CardBody>
      </Card>
    </div>
    <div class="col-4">
      <Card>
        <CardBody>
          <CardTitle as="h2">Avatar placeholder</CardTitle>
          <div class="avatar-list">
            {people8.map((person) => <Avatar placeholder={firstLetters(person.full_name)} />)}
          </div>
        </CardBody>
      </Card>
    </div>
    <div class="col-4">
      <Card>
        <CardBody>
          <CardTitle as="h2">Avatar shapes</CardTitle>
          <div class="avatar-list">
            <Avatar />
            <Avatar class="rounded-circle" />
            <Avatar class="rounded-0" />
          </div>
        </CardBody>
      </Card>
    </div>
    <div class="col-6">
      <Card>
        <CardBody>
          <CardTitle as="h2">Avatar sizes</CardTitle>
          <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-6">
      <Card>
        <CardBody>
          <CardTitle as="h2">Avatar lists</CardTitle>
          <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-4">
      <Card>
        <CardBody>
          <CardTitle as="h2">Avatar placeholder</CardTitle>
          {uploadSizes.map((size) => <AvatarUpload size={size} />)}
        </CardBody>
      </Card>
    </div>
    <div class="col-4">
      <Card>
        <CardBody>
          <CardTitle as="h2">Avatar statuses</CardTitle>
          {statusColors.map((color, i) => <Avatar personId={i + 1} class="rounded-circle" status={color} />)}
        </CardBody>
      </Card>
    </div>
    <div class="col-4">
      <Card>
        <CardBody>
          <CardTitle as="h2">Avatar brands</CardTitle>
          {brands.map((brand, i) => <Avatar personId={i + 1} brand={brand} />)}
        </CardBody>
      </Card>
    </div>
  </div>
</DefaultLayout>