Avatar

import { Avatar } from "@nili/ui"

export function Example() {
  return (
    <>
      <Avatar size="3xl" name="Ada Lovelace" />
      <Avatar size="xl" name="Ada Lovelace" />
      <Avatar size="md" name="Ada Lovelace" />
      <Avatar size="2xs" name="Ada Lovelace" />
    </>
  )
}

import { Avatar } from "@nili/ui"

export function Example() {
  return (
    <>
      {/* initials from the name */}
      <Avatar name="Ada Lovelace" />

      {/* explicit initials */}
      <Avatar name="محمد رضایی" initials="م‌ر" />

      {/* an image, with initials behind it */}
      <Avatar name="Grace Hopper" src="/avatars/grace.png" />

      {/* the silhouette */}
      <Avatar name="" placeholder />
    </>
  )
}

import { Avatar } from "@nili/ui"

export function Example() {
  return (
    <>
      <Avatar name="Ada Lovelace" tone="soft" />
      <Avatar name="Grace Hopper" tone="blue" />
      <Avatar name="Radia Perlman" tone="pink" />
    </>
  )
}

import { Avatar, Icon } from "@nili/ui"
import { RiBuilding2Line } from "@remixicon/react"

export function Example() {
  return (
    <>
      <Avatar name="Ada Lovelace" bottomStatus="online" statusLabel="Online" />
      <Avatar name="Ada Lovelace" bottomStatus="busy" statusLabel="Busy" />
      <Avatar name="Ada Lovelace" topStatus="verified" statusLabel="Verified" />
      <Avatar
        name="Apex Financial"
        bottomStatus="company"
        companyIcon={<Icon icon={RiBuilding2Line} />}
        statusLabel="Company account"
      />
    </>
  )
}

import { AvatarGroup } from "@nili/ui"

const team = [
  { id: "a", name: "Ada Lovelace", tone: "blue" },
  { id: "b", name: "Grace Hopper", tone: "purple" },
  { id: "c", name: "Katherine Johnson", tone: "green" },
  { id: "d", name: "Radia Perlman", tone: "pink" },
]

export function Example() {
  return (
    <>
      <AvatarGroup items={team} label="Team members" />
      <AvatarGroup items={team} max={3} label="Team members" />
      <AvatarGroup items={team} max={2} overflowCount={24} label="Team" />
    </>
  )
}

import { CompactAvatarGroup } from "@nili/ui"

export function Example() {
  return (
    <>
      <CompactAvatarGroup items={team} max={3} label="Assignees" />
      <CompactAvatarGroup items={team} max={3} appearance="stroke" label="Assignees" />
    </>
  )
}

import { FlatAvatar } from "@nili/ui"

export function Example() {
  return (
    <>
      <FlatAvatar size="2xl" background={4} hair={2} outfit={1} label="" />

      {/* derived from an id — same user, same face, every time */}
      <FlatAvatar
        size="xl"
        background={userId % 8}
        hair={userId % 6}
        eye={userId % 4}
        label=""
      />
    </>
  )
}