flotilla/src/app/components/ProfileCircle.svelte

<script lang="ts">
  import cx from "classnames"
  import {removeUndefined} from "@welshman/lib"
  import {deriveProfile} from "@welshman/app"
  import UserRounded from "@assets/icons/user-rounded.svg?dataurl"
  import ImageIcon from "@lib/components/ImageIcon.svelte"

  type Props = {
    pubkey?: string
    class?: string
    style?: string
    size?: number
    url?: string
  }

  const {pubkey, url, size = 7, style = undefined, ...props}: Props = $props()

  const profile = deriveProfile(pubkey, removeUndefined([url]))
</script>

<ImageIcon
  {size}
  {style}
  alt=""
  class={cx(props.class, "rounded-full")}
  src={$profile?.picture || UserRounded} />