---
import Main from "../layouts/MainLayout.astro";
import Panel from "../layouts/Panel.astro";
import TransFlagPanel from "../layouts/TransFlagPanel.astro";
import WavyText from "../components/WavyText/WavyText";
import FriendBadges from "../lib/FriendBadges";
import OtherBadges from "../lib/OtherBadges";
import Badge from "../components/Badge.astro";
import { OtherBadgePath } from "../lib/OtherBadges";
import { FriendBadgePath } from "../lib/FriendBadges";
import "../styles/Badge.scss";
---

<Main>
  <TransFlagPanel>
    <h1>Welcome to my website &gt;^w^&lt;</h1>
  </TransFlagPanel>
  <Panel title="bwa">
    <p>
      Hai! I'm Riley! A <WavyText colour="transgender">transfem</WavyText> &nbsp;foxgirl who likes programming & self-hosting who lives in the UK. Nice
      to meet you meow! &gt;^w^&lt;
    </p>
  </Panel>
  <Panel title="My Friens :3">
    <div class="badgeBanner">
      {FriendBadges.map((badge) => <Badge image={`${FriendBadgePath}${badge.image}`} url={badge.url} title={badge.title} alt={badge.alt} />)}
    </div>
  </Panel>
  <Panel title="Other Badges">
    <div class="badgeBanner">
      {OtherBadges.map((badge) => <Badge image={`${OtherBadgePath}${badge.image}`} url={badge.url} title={badge.title} alt={badge.alt} />)}
    </div>
  </Panel>
  <Panel title="Webring!">
    <p>
      <a href="https://tilde.linuxposting.xyz/ring.py?prev&foxgirlriley.neocities.org">←</a>
      <a href="#" title="Coming soon">Linuxposting webring</a>
      <a href="https://tilde.linuxposting.xyz/ring.py?next&foxgirlriley.neocities.org">→</a>
    </p>
  </Panel>
</Main>
