Cloudy Nimbus Moss Avatar

import { CloudyNimbusMossAvatar } from "@/components/avatar/cloudy-nimbus-moss-avatar"
import {
  Item,
  ItemContent,
  ItemDescription,
  ItemTitle,
} from "@/components/ui/item"

// The orb at byline size, in the byline it is drawn for.
export default function CloudyNimbusMossAvatarDemo() {
  return (
    <div className="relative isolate grid min-h-full w-full flex-1 place-items-center overflow-hidden bg-background py-24 text-foreground">
      {/* Item is w-full; w-fit lets the frame centre it. */}
      <Item size="sm" className="w-fit">
        <CloudyNimbusMossAvatar size={56} data-slot="person-avatar" />
        <ItemContent>
          <ItemTitle>Nadia Hadfield</ItemTitle>
          <ItemDescription>Mission support</ItemDescription>
        </ItemContent>
      </Item>
    </div>
  )
}