Avatar

<Avatar />

<script lang="ts">
  import { Avatar } from 'svelte-5-ui-lib';
</script>

<div class="flex items-center space-x-4 rtl:space-x-reverse">
  <Avatar src="/images/profile-picture-1.webp" alt="Profile picture 1" cornerStyle="rounded" />
  <div class="space-y-1 font-medium dark:text-white">
    <div>Jese Leos</div>
    <div class="text-sm text-gray-500 dark:text-gray-400">Joined in August 2014</div>
  </div>
</div>

<script lang="ts">
  import { Avatar } from 'svelte-5-ui-lib';
</script>

<div class="flex justify-center gap-4">
  <Avatar src="/images/profile-picture-3.webp" alt="Profile picture 1" dot={{ color: "red" }} />
  <Avatar src="/images/profile-picture-3.webp" alt="Profile picture 2" dot={{ placement: "top-right", color: "red" }} cornerStyle="rounded" />
  <Avatar src="/images/profile-picture-5.webp" alt="Profile picture 3" dot={{ placement: "bottom-right", color: "green" }} />
  <Avatar src="/images/profile-picture-5.webp" alt="Profile picture 4" dot={{ placement: "bottom-right" }} cornerStyle="rounded" />
  <Avatar dot={{}} />
</div>

<script lang="ts">
  import { Avatar } from 'svelte-5-ui-lib';
</script>

<div class="flex justify-center gap-4">
  <Avatar alt="placeholder" />
  <Avatar cornerStyle="rounded" alt="rounded placeholder" />
  <Avatar border alt="bordered placeholder" />
  <Avatar cornerStyle="rounded" border alt="rounded bordered placeholder" />
</div>

<script lang="ts">
  import { Avatar } from 'svelte-5-ui-lib';
</script>

<div class="flex h-10 justify-center">
  <Avatar alt="JL">JL</Avatar>
</div>

<script lang="ts">
  import { Avatar } from 'svelte-5-ui-lib';
</script>

<div class="flex flex-col justify-center gap-4 px-4">
  <div class="mb-5 flex">
    <Avatar src="/images/profile-picture-1.webp" stacked alt="Profile picture 1" />
    <Avatar src="/images/profile-picture-2.webp" stacked alt="Profile picture 2" />
    <Avatar src="/images/profile-picture-3.webp" stacked alt="Profile picture 3" />
    <Avatar stacked />
  </div>
  <div class="flex">
    <Avatar src="/images/profile-picture-1.webp" stacked alt="Profile picture 4" />
    <Avatar src="/images/profile-picture-2.webp" stacked alt="Profile picture 5" />
    <Avatar src="/images/profile-picture-3.webp" stacked alt="Profile picture 6" />
    <Avatar stacked href="/" class="bg-gray-700 text-sm text-white hover:bg-gray-600" alt="Profile picture 7">+99</Avatar>
  </div>
</div>

<script lang="ts">
  import { Avatar, Dropdown, DropdownHeader, DropdownUl, DropdownLi, DropdownDivider, uiHelpers } from 'svelte-5-ui-lib';
  let dropdown = uiHelpers();
  let dropdownStatus = $state(false);
  let closeDropdown = dropdown.close;

  $effect(() => {
    // this can be done adding nav.navStatus directly to DOM element
    // without using effect
    dropdownStatus = dropdown.isOpen;
  });
</script>

<div class="flex h-64 items-start justify-center">
  <Avatar onclick={dropdown.toggle} src="/images/profile-picture-3.webp" alt="Profile picture" class="cursor-pointer" dot={{ color: "green" }} />
  <div class="relative">
    <Dropdown {dropdownStatus} {closeDropdown} class="absolute -left-[100px] top-[40px]">
      <DropdownHeader>
        <div>Bonnie Green</div>
        <div class="truncate font-medium">name@flowbite.com</div>
      </DropdownHeader>
      <DropdownUl>
        <DropdownLi href="/">Dashboard</DropdownLi>
        <DropdownLi href="/nav">Navbar</DropdownLi>
        <DropdownLi href="/footer">Footer</DropdownLi>
        <DropdownDivider />
        <DropdownLi href="/dropdown">Dropdown</DropdownLi>
      </DropdownUl>
    </Dropdown>
  </div>
</div>

<script>
  import { Avatar, Tooltip } from 'svelte-5-ui-lib';
</script>

<div class="flex h-32 items-center justify-center gap-8">
  <Avatar id="jese" cornerStyle="rounded" alt="Jese Leos" src="/images/profile-picture-1.webp" />
  <Tooltip triggeredBy="#jese">Jese Leos</Tooltip>
  <Avatar id="robert" cornerStyle="rounded" alt="Robert Gouth" src="/images/profile-picture-2.webp" />
  <Tooltip triggeredBy="#robert">Robert Gouth</Tooltip>
  <Avatar id="bonnie" cornerStyle="rounded" alt="Bonnie Green" src="/images/profile-picture-3.webp" />
  <Tooltip triggeredBy="#bonnie">Bonnie Green</Tooltip>
</div>