Avatar

import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'

export function AvatarWithFallback() {
  return (
    <div className="flex items-center gap-3">
      <Avatar size="lg">
        <AvatarImage src="/avatars/omar-haddad.jpg" alt="Omar Haddad" />
        <AvatarFallback>OH</AvatarFallback>
      </Avatar>
      <div className="flex flex-col">
        <span className="text-sm font-medium">Omar Haddad</span>
        <span className="text-sm text-muted-foreground">No profile photo, showing initials</span>
      </div>
    </div>
  )
}

import { Avatar, AvatarFallback } from '@/components/ui/avatar'

const PEOPLE = [
  { initials: 'SB', name: 'Sofia Berg' },
  { initials: 'MV', name: 'Mikko Virtanen' },
  { initials: 'IH', name: 'Ingrid Hansen' },
]

export function AvatarSizes() {
  return (
    <div className="flex items-end gap-6">
      {(['sm', 'default', 'lg'] as const).map((size, index) => (
        <div key={size} className="flex flex-col items-center gap-2">
          <Avatar size={size}>
            <AvatarFallback>{PEOPLE[index].initials}</AvatarFallback>
          </Avatar>
          <span className="text-xs text-muted-foreground">{size}</span>
        </div>
      ))}
    </div>
  )
}

import { CheckIcon } from 'lucide-react'
import {
  Item,
  ItemContent,
  ItemDescription,
  ItemGroup,
  ItemMedia,
  ItemTitle,
} from '@/components/ui/item'
import { Avatar, AvatarBadge, AvatarFallback } from '@/components/ui/avatar'

const STAFF = [
  { initials: 'IH', name: 'Ingrid Hansen', role: 'Home help coordinator', status: 'Available', badge: 'bg-primary' },
  {
    initials: 'MV',
    name: 'Mikko Virtanen',
    role: 'Care assistant, Norrby',
    status: 'On a visit until 14:30',
    badge: 'bg-chart-4',
  },
  {
    initials: 'SB',
    name: 'Sofia Berg',
    role: 'Care assistant, Centrum',
    status: 'Off today',
    badge: 'bg-muted-foreground',
  },
]

export function AvatarWithBadge() {
  return (
    <ItemGroup className="w-full max-w-sm gap-1">
      {STAFF.map((person) => (
        <Item key={person.name} size="sm">
          <ItemMedia>
            <Avatar size="lg">
              <AvatarFallback>{person.initials}</AvatarFallback>
              <AvatarBadge className={person.badge} />
            </Avatar>
          </ItemMedia>
          <ItemContent>
            <ItemTitle>{person.name}</ItemTitle>
            <ItemDescription>{person.role}</ItemDescription>
          </ItemContent>
          <span className="text-xs text-muted-foreground">{person.status}</span>
        </Item>
      ))}
      <Item size="sm">
        <ItemMedia>
          <Avatar size="lg">
            <AvatarFallback>OH</AvatarFallback>
            <AvatarBadge>
              <CheckIcon />
            </AvatarBadge>
          </Avatar>
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Omar Haddad</ItemTitle>
          <ItemDescription>Unit manager</ItemDescription>
        </ItemContent>
        <span className="text-xs text-muted-foreground">Approved the plan</span>
      </Item>
    </ItemGroup>
  )
}

import { PlusIcon, UsersIcon } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Item, ItemActions, ItemContent, ItemTitle } from '@/components/ui/item'
import { Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount } from '@/components/ui/avatar'

export function AvatarGroup() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-6">
      <div className="flex items-center gap-3">
        <AvatarGroup>
          <Avatar>
            <AvatarFallback>AL</AvatarFallback>
          </Avatar>
          <Avatar>
            <AvatarFallback>IH</AvatarFallback>
          </Avatar>
          <Avatar>
            <AvatarFallback>OH</AvatarFallback>
          </Avatar>
          <AvatarGroupCount>+2</AvatarGroupCount>
        </AvatarGroup>
        <p className="text-sm text-muted-foreground">
          <span className="font-medium text-foreground">5 officers</span> are working on case 2026-04812
        </p>
      </div>
      <Item variant="outline">
        <ItemContent>
          <ItemTitle>Environment and building committee</ItemTitle>
          <AvatarGroup className="mt-1">
            <Avatar size="lg">
              <AvatarFallback>MV</AvatarFallback>
            </Avatar>
            <Avatar size="lg">
              <AvatarFallback>SB</AvatarFallback>
            </Avatar>
            <Avatar size="lg">
              <AvatarFallback>KN</AvatarFallback>
            </Avatar>
            <AvatarGroupCount>
              <UsersIcon aria-hidden="true" />
            </AvatarGroupCount>
          </AvatarGroup>
        </ItemContent>
        <ItemActions>
          <Button variant="outline" size="sm">
            <PlusIcon data-icon="inline-start" />
            Invite
          </Button>
        </ItemActions>
      </Item>
    </div>
  )
}

import { LandmarkIcon } from 'lucide-react'
import { Avatar, AvatarFallback } from '@/components/ui/avatar'

export function AvatarCustomStyles() {
  return (
    <div className="flex items-center gap-4">
      <Avatar size="lg">
        <AvatarFallback className="border-transparent bg-primary text-primary-foreground">AL</AvatarFallback>
      </Avatar>
      <Avatar size="lg" className="ring-2 ring-primary ring-offset-2 ring-offset-background">
        <AvatarFallback>IH</AvatarFallback>
      </Avatar>
      <Avatar size="lg">
        <AvatarFallback role="img" aria-label="Municipality" className="border-transparent bg-muted text-muted-foreground">
          <LandmarkIcon aria-hidden="true" className="size-5" />
        </AvatarFallback>
      </Avatar>
      <Avatar className="size-14">
        <AvatarFallback className="text-lg">SB</AvatarFallback>
      </Avatar>
    </div>
  )
}