Avatar

import { Avatar, AvatarFallback, AvatarImage, AvatarRoot } from "@fanvue/ui";
import type {
  AvatarFallbackProps,
  AvatarImageProps,
  AvatarProps,
  AvatarRootProps,
  AvatarSize,
} from "@fanvue/ui";

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

const SRC = "https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?w=128&h=128&fit=crop";

<Avatar src={SRC} alt="User avatar" fallback="JD" />

import type React from "react";
import { Avatar, CheckCircleIcon } from "@fanvue/ui";
import type { AvatarSize } from "@fanvue/ui";

const SRC = "https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?w=128&h=128&fit=crop";

const SIZES: AvatarSize[] = [16, 24, 32, 40, 48, 64, 88, 148];

const Row = ({ label, children }: { label: string; children: React.ReactNode }) => (
  <div className="flex flex-col gap-2">
    <span className="typography-description-12px-semibold text-content-tertiary">{label}</span>
    <div className="flex flex-wrap items-end gap-3">{children}</div>
  </div>
);

<div className="flex flex-col gap-6">
  <Row label="Image">
    {SIZES.map((size) => (
      <Avatar key={size} size={size} src={SRC} alt="User avatar" fallback="JD" />
    ))}
  </Row>
  <Row label="Initials">
    {SIZES.map((size) => (
      <Avatar key={size} size={size} fallback="AB" />
    ))}
  </Row>
  <Row label="Icon">
    {SIZES.map((size) => (
      <Avatar key={size} size={size} fallback={<CheckCircleIcon />} />
    ))}
  </Row>
  <Row label="Empty">
    {SIZES.map((size) => (
      <Avatar key={size} size={size} fallback="" />
    ))}
  </Row>
</div>

import { AvatarFallback, AvatarImage, AvatarRoot } from "@fanvue/ui";

const SRC = "https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?w=128&h=128&fit=crop";

<AvatarRoot size={40} onlineIndicator={true}>
  <AvatarImage src={SRC} alt="User avatar" />
  <AvatarFallback>JD</AvatarFallback>
</AvatarRoot>

import type React from "react";
import { Avatar, CheckCircleIcon } from "@fanvue/ui";
import type { AvatarSize } from "@fanvue/ui";

const SRC = "https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?w=128&h=128&fit=crop";

const Row = ({ label, children }: { label: string; children: React.ReactNode }) => (
  <div className="flex flex-col gap-2">
    <span className="typography-description-12px-semibold text-content-tertiary">{label}</span>
    <div className="flex flex-wrap items-end gap-3">{children}</div>
  </div>
);

function Example() {
  const decorations = [
    { label: "Online indicator", props: { onlineIndicator: true } },
    { label: "Platinum", props: { platinumShow: true } },
    { label: "NSFW", props: { NSFWShow: true } },
    { label: "Platinum + NSFW", props: { platinumShow: true, NSFWShow: true } },
    {
      label: "All three",
      props: { platinumShow: true, NSFWShow: true, onlineIndicator: true },
    },
  ];
  return (
    <div className="flex flex-col gap-6">
      {decorations.map(({ label, props }) => (
        <Row key={label} label={label}>
          {([24, 40, 88] as AvatarSize[]).map((size) => (
            <Avatar key={size} size={size} src={SRC} alt="User avatar" fallback="JD" {...props} />
          ))}
          {([24, 40, 88] as AvatarSize[]).map((size) => (
            <Avatar key={`initials-${size}`} size={size} fallback="AB" {...props} />
          ))}
          <Avatar size={40} fallback={<CheckCircleIcon />} {...props} />
        </Row>
      ))}
    </div>
  );
}