Avatar

import { Avatar } from "@/components/ui/Avatar";

export default function Page() {
  return (
    <div className="flex items-center gap-3.5">
      <Avatar src="/images/avatar-1.png" alt="avatar 1" />
      <Avatar src="/images/avatar-2.png" alt="avatar 2" rounded />
    </div>
  )
}

import { Avatar } from "@/components/ui/Avatar";

export default function Page() {
  return (
    <div className="flex items-center gap-3.5">
      <Avatar size="sm" src="/images/avatar-1.png" alt="avatar 1" />
      <Avatar size="md" src="/images/avatar-2.png" alt="avatar 2" />
      <Avatar size="lg" src="/images/avatar-3.png" alt="avatar 3" />
      <Avatar size="xl" src="/images/avatar-4.png" alt="avatar 4" />
    </div>
  )
}

import { Avatar } from "@/components/ui/Avatar";

export default function Page() {
  return (
    <div className="flex items-center gap-3.5">
      <Avatar bordered src="/images/avatar-1.png" alt="avatar 1" />
      <Avatar bordered src="/images/avatar-2.png" alt="avatar 2" />
      <Avatar bordered src="/images/avatar-3.png" alt="avatar 3" />
    </div>
  )
}

import { Avatar } from "@/components/ui/Avatar";
import { IconUserFilled } from '@tabler/icons-react';

export default function Page() {
  return (
    <div className="flex items-center gap-3.5">
    <Avatar alt="avatar 1" fallback="A" />
    <Avatar alt="avatar 2" fallback={<IconUserFilled size={20} />} />
    <Avatar alt="avatar 3" fallbackClassName="!bg-orange-400" fallback={<IconUserFilled size={20} />} />
  </div>
  )
}