Avatar

import { UserAvatar } from '@carbon/icons-react'
import { Avatar, Group } from '@cerberus/react'

export function GroupDemo() {
  return (
    <Group layout="stack" orientation="horizontal">
      <Avatar bgColor="page.bg.200" fallback={<UserAvatar />} />
      <Avatar bgColor="page.bg.100" fallback="md" />
      <Avatar
        alt="User Avatar"
        fallback="md"
        src="https://avatars.githubusercontent.com/u/71111994?s=200&v=4"
      />
    </Group>
  )
}

import { UserAvatar } from '@carbon/icons-react'
import { Avatar } from '@cerberus/react'
import { Box, Circle, Float, HStack } from 'styled-system/jsx'

export function FloatDemo() {
  return (
    <HStack justify="center" w="3/4">
      <Box pos="relative">
        <Avatar bgColor="page.bg.200" fallback={<UserAvatar />} />
        <Float placement="bottom-end" offsetX="1" offsetY="1">
          <Circle
            bgColor="success.bg.active"
            outline="0.2em solid"
            outlineColor="page.surface.initial"
            size="8px"
          />
        </Float>
      </Box>
    </HStack>
  )
}

import { css } from '@/styled-system/css'
import { AvatarRoot } from '@cerberus/react'
import Image from 'next/image'
import Link from 'next/link'

export function NextDemo() {
  return (
    <AvatarRoot size="lg" asChild>
      <Link href="/">
        <Image
          alt="Protector Cerberus"
          className={css({
            objectFit: 'cover',
          })}
          src="https://cerberus.digitalu.design/logo.svg"
          height={50}
          width={50}
        />
      </Link>
    </AvatarRoot>
  )
}

import { Avatar } from '@cerberus/react'

export function CustomAvatar() {
  return (
    <Avatar
      fallback="Cu"
      bgColor="black"
      bgImage="none"
      border="2px solid"
      borderColor="danger.border.initial"
      color="danger.text.initial"
      fontFamily="sans"
      rounded="sm"
      transform="skewX(-10deg)"
    />
  )
}