Avatar

const avatarFixture = {
  id: "avatar",
  name: "Ada Lovelace",
  initials: "AL",
  status: "online",
  size: "md",
} satisfies {
  id: string;
  name: string;
  initials: string;
  status: "online";
  size: "sm" | "md" | "lg";
};
 
import { Avatar } from "@grassroot/ui-react";
 
export default function AvatarDemo() {
  return (
    <div>
      <Avatar
        name={avatarFixture.name}
        initials={avatarFixture.initials}
        size={avatarFixture.size}
        status={avatarFixture.status}
      />
    </div>
  );
}

<script setup lang="ts">
const avatarFixture = {
  id: "avatar",
  name: "Ada Lovelace",
  initials: "AL",
  status: "online",
  size: "md",
} satisfies {
  id: string;
  name: string;
  initials: string;
  status: "online";
  size: "sm" | "md" | "lg";
};
 
import { Avatar } from "@grassroot/ui-vue";
</script>
 
<template>
  <div>
    <Avatar
      :name="avatarFixture.name"
      :initials="avatarFixture.initials"
      :size="avatarFixture.size"
      :status="avatarFixture.status"
    />
  </div>
</template>

import { Component } from "@angular/core";
const avatarFixture = {
  id: "avatar",
  name: "Ada Lovelace",
  initials: "AL",
  status: "online",
  size: "md",
} satisfies {
  id: string;
  name: string;
  initials: string;
  status: "online";
  size: "sm" | "md" | "lg";
};
 
import { GrassrootAvatar } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-avatar-demo",
  standalone: true,
  imports: [GrassrootAvatar],
  template: `
    <div>
      <grassroot-avatar
        [name]="fixture.name"
        [initials]="fixture.initials"
        [size]="fixture.size"
        [status]="fixture.status"
      />
    </div>
  `,
})
export class AvatarDemoComponent {
  protected readonly fixture = avatarFixture;
}
 
export default AvatarDemoComponent;

<script lang="ts">
  const avatarFixture = {
    id: "avatar",
    name: "Ada Lovelace",
    initials: "AL",
    status: "online",
    size: "md",
  } satisfies {
    id: string;
    name: string;
    initials: string;
    status: "online";
    size: "sm" | "md" | "lg";
  };
 
  import { Avatar } from "@grassroot/ui-svelte";
</script>
 
<div>
  <Avatar
    name={avatarFixture.name}
    initials={avatarFixture.initials}
    size={avatarFixture.size}
    status={avatarFixture.status}
  />
</div>

/** @jsxImportSource solid-js */
import { Avatar } from "@grassroot/ui-solid";
const avatarFixture = {
  id: "avatar",
  name: "Ada Lovelace",
  initials: "AL",
  status: "online",
  size: "md",
} satisfies {
  id: string;
  name: string;
  initials: string;
  status: "online";
  size: "sm" | "md" | "lg";
};
 
import type { JSX } from "solid-js";
 
export default function AvatarDemo(): JSX.Element {
  return (
    <div>
      <Avatar
        name={avatarFixture.name}
        initials={avatarFixture.initials}
        size={avatarFixture.size}
        status={avatarFixture.status}
      />
    </div>
  );
}