Avatar

"use client";

import * as Avatar from "@lora-ui/avatar";

export default function Base() {
  return (
    <div className="mx-auto box-border flex gap-4">
      <Avatar.Root className="flex h-[40px] w-[40px] items-center justify-center rounded-full">
        <Avatar.Fallback className="border-box flex h-[40px] w-[40px] items-center justify-center rounded-full bg-[#7f56d9] text-[#ffffff] dark:bg-[#7f56d9] dark:text-[#f5f5f6]">
          CT
        </Avatar.Fallback>
        <Avatar.Image
          className="border-box absolute h-[40px] w-[40px] rounded-full bg-[#7f56d9] object-cover dark:bg-[#7f56d9]"
          src="https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80"
        />
      </Avatar.Root>
      <Avatar.Root className="group flex items-center justify-center">
        <Avatar.Fallback className="border-box flex h-[40px] w-[40px] items-center justify-center rounded-full bg-[#7f56d9] text-[#ffffff] dark:bg-[#7f56d9] dark:text-[#f5f5f6]">
          CT
        </Avatar.Fallback>
        <Avatar.Image
          className="border-box absolute h-[40px] w-[40px] rounded-full bg-[#7f56d9] object-cover group-aria-disabled:bg-red-300"
          src="https://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-1.2.1&w=128&h=128&dpr=2&q=80"
        />
      </Avatar.Root>
      <Avatar.Root className="border-box flex h-[40px] w-[40px] items-center justify-center rounded-full bg-[#7f56d9] text-base font-semibold text-white dark:bg-[#7f56d9]">
        <Avatar.Fallback className="border-box flex h-[40px] w-[40px] items-center justify-center rounded-full bg-[#7f56d9] text-[#ffffff] dark:bg-[#7f56d9] dark:text-[#f5f5f6]">
          CT
        </Avatar.Fallback>
      </Avatar.Root>
    </div>
  );
}