---
import { Image } from "astro:assets";
const avatar = "/avatar.jpg";
const username = "anotherhadi";
const bio = "Infosec engineer.";
---

<div class="flex flex-wrap gap-3 justify-start">
  <div
    class="ring-base-300 ring-offset-base-100 rounded-full ring-2 ring-offset-2 flex justify-center items-center"
  >
    <Image
      src={avatar}
      alt="anotherhadi avatar"
      class="rounded-full m-auto"
      width={36}
      height={36}
    />
  </div>
  <div>
    <p class="text-sm font-semibold">
      <a href="/"><span class="text-base-content/40">@</span>{username}</a>
    </p>
    <p class="text-xs text-base-content/60">{bio}</p>
  </div>
</div>