Avatar

import { Avatar, AvatarBadge, AvatarFallback } from 'ferry-ui'

export default function AvatarHero() {
  return (
    <div className="flex items-center gap-3">
      <Avatar>
        <AvatarFallback>MC</AvatarFallback>
        <AvatarBadge className="bg-success" role="img" aria-label="Online" />
      </Avatar>
      <div className="flex flex-col">
        <span className="text-sm font-medium text-foreground">Maya Chen</span>
        <span className="text-[13px] text-foreground-light">maya@example.com</span>
      </div>
    </div>
  )
}

import { Avatar, AvatarFallback, AvatarImage } from 'ferry-ui'
import { User } from 'lucide-react'

export default function AvatarFallbackDemo() {
  return (
    <>
      <Avatar>
        {/* This picture cannot load: the initials stay in view. */}
        <AvatarImage src="data:image/png;base64,AA==" alt="Sam Patel" />
        <AvatarFallback>SP</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarFallback>AL</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarFallback>
          <User className="size-4" />
        </AvatarFallback>
      </Avatar>
    </>
  )
}

import { Avatar, AvatarFallback } from 'ferry-ui'

const SIZES = ['sm', 'md', 'lg'] as const

export default function AvatarSizes() {
  return (
    <>
      {SIZES.map((size) => (
        <Avatar key={size} size={size}>
          <AvatarFallback>JR</AvatarFallback>
        </Avatar>
      ))}
    </>
  )
}

import { Avatar, AvatarFallback } from 'ferry-ui'
import { Building2 } from 'lucide-react'

export default function AvatarOrganization() {
  return (
    <div className="flex items-center gap-3">
      <Avatar className="rounded-md">
        <AvatarFallback className="bg-primary-soft text-primary">
          <Building2 className="size-4" />
        </AvatarFallback>
      </Avatar>
      <div className="flex flex-col">
        <span className="text-sm font-medium text-foreground">Acme</span>
        <span className="text-[13px] text-foreground-light">12 members</span>
      </div>
    </div>
  )
}

import { Avatar, AvatarBadge, AvatarFallback } from 'ferry-ui'
import { Check } from 'lucide-react'

export default function AvatarWithBadge() {
  return (
    <>
      <Avatar size="lg">
        <AvatarFallback>PN</AvatarFallback>
        <AvatarBadge className="bg-success" role="img" aria-label="Online" />
      </Avatar>
      <Avatar size="lg">
        <AvatarFallback>AW</AvatarFallback>
        <AvatarBadge className="bg-warning" role="img" aria-label="Away" />
      </Avatar>
      <Avatar size="lg">
        <AvatarFallback>OB</AvatarFallback>
        <AvatarBadge className="bg-foreground-muted" role="img" aria-label="Offline" />
      </Avatar>
      <Avatar size="lg">
        <AvatarFallback>DK</AvatarFallback>
        <AvatarBadge role="img" aria-label="Verified">
          <Check />
        </AvatarBadge>
      </Avatar>
    </>
  )
}

import { Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount } from 'ferry-ui'

const MEMBERS = [
  { name: 'Maya Chen', initials: 'MC' },
  { name: 'Jordan Reyes', initials: 'JR' },
  { name: 'Priya Nair', initials: 'PN' },
  { name: 'Lucas Martin', initials: 'LM' },
]

export default function AvatarGroupDemo() {
  return (
    <AvatarGroup>
      {MEMBERS.map((member) => (
        <Avatar key={member.name}>
          <AvatarFallback>{member.initials}</AvatarFallback>
        </Avatar>
      ))}
      <AvatarGroupCount>+5</AvatarGroupCount>
    </AvatarGroup>
  )
}

import { Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount } from 'ferry-ui'
import { Plus } from 'lucide-react'

const MEMBERS = [
  { name: 'Maya Chen', initials: 'MC' },
  { name: 'Jordan Reyes', initials: 'JR' },
  { name: 'Priya Nair', initials: 'PN' },
]

export default function AvatarGroupIcon() {
  return (
    <AvatarGroup>
      {MEMBERS.map((member) => (
        <Avatar key={member.name} size="sm">
          <AvatarFallback>{member.initials}</AvatarFallback>
        </Avatar>
      ))}
      <AvatarGroupCount>
        <Plus aria-hidden="true" />
        <span className="sr-only">12 more members</span>
      </AvatarGroupCount>
    </AvatarGroup>
  )
}