Avatar

import { Avatar } from "@camome/core/Avatar";

export default function Default() {
  return <Avatar src="/demo/avatar-1.jpg" alt="avatar" />;
}

import { Avatar } from "@camome/core/Avatar";

import styles from "./styles.module.scss";

export default function Size() {
  return (
    <div className={styles.size__container}>
      <Avatar size="sm" src="/demo/avatar-2.jpg" alt="avatar" />
      <Avatar size="md" src="/demo/avatar-2.jpg" alt="avatar" />
      <Avatar size="lg" src="/demo/avatar-2.jpg" alt="avatar" />
      <Avatar size="sm" children="AX" />
      <Avatar size="md" children="AX" />
      <Avatar size="lg" children="AX" />
      <Avatar size="sm" alt="avatar" />
      <Avatar size="md" alt="avatar" />
      <Avatar size="lg" alt="avatar" />
    </div>
  );
}

import { Avatar } from "@camome/core/Avatar";

import styles from "./styles.module.scss";

export default function Variant() {
  return (
    <div className={styles.container}>
      <Avatar variant="solid" />
      <Avatar variant="soft" />
      <Avatar variant="outline" />
      <Avatar variant="ghost" />
    </div>
  );
}

import { Avatar } from "@camome/core/Avatar";

import styles from "./styles.module.scss";

export default function ColorScheme() {
  return (
    <div className={styles.container}>
      <Avatar colorScheme="primary" />
      <Avatar colorScheme="neutral" />
      <Avatar colorScheme="info" />
      <Avatar colorScheme="success" />
      <Avatar colorScheme="warn" />
      <Avatar colorScheme="danger" />
    </div>
  );
}

import { BoltIcon } from "@heroicons/react/24/outline";

import { Avatar } from "@camome/core/Avatar";

import styles from "./styles.module.scss";

export default function Content() {
  return (
    <div className={styles.container}>
      <Avatar src="/demo/avatar-2.jpg" alt="avatar" />
      <Avatar>MT</Avatar>
      <Avatar>
        <BoltIcon />
      </Avatar>
      <Avatar />
    </div>
  );
}

import { Avatar } from "@camome/core/Avatar";

import styles from "./styles.module.scss";

export default function ColorScheme() {
  return (
    <div className={styles.container}>
      <Avatar component="a" href="#" aria-label="User profile" />
      <Avatar
        component="button"
        variant="solid"
        onClick={() => void alert("You clicked successfully!")}
        aria-label="User profile"
      />
    </div>
  );
}