<script setup lang="ts">
import TextBlock from "@/components/TextBlock.vue";
import AttributionTable from "@/components/AttributionTable.vue";

import ViktorRefAlpha from "@/assets/viktor-ref-SFW-alpha.png?w=400&webp&quality=100&imagetools";
import ViktorFront from "@/assets/viktor-front-SFW-alpha.png?w=400&webp&quality=100&imagetools";

const attributions = [
  {
    artwork: ViktorRefAlpha,
    artist: "sabertoofs",
    links: {
      furaffinity: "https://www.furaffinity.net/user/sabertoofs",
      twitter: "https://twitter.com/sabertoofs",
    },
  },
  {
    artwork: ViktorFront,
    artist: "sabertoofs",
    links: {
      furaffinity: "https://www.furaffinity.net/user/sabertoofs",
      twitter: "https://twitter.com/sabertoofs",
    },
  },
];
</script>

<template>
  <TextBlock>
    <h1>{{ $route.meta.title }}</h1>
    <h2>Artwork</h2>
    <AttributionTable :attributions="attributions" />

    <h2>Icons</h2>
    <p>Navigation Icons: <a href="https://fontawesome.com">Font Awesome</a></p>

    <h2>Fonts</h2>
    <h3>Heading Font</h3>
    <p>
      <a href="https://github.com/MichalSahar/Secular">Secular One</a> by
      <a href="https://github.com/MichalSahar">Michal Sahar</a>
    </p>
    <h3>Copy Font</h3>
    <p>
      <a href="https://antonkoovit.com/typefaces/arvo">Arvo</a> by
      <a href="https://antonkoovit.com/">Anton Koovit</a>
    </p>
  </TextBlock>
</template>

<style lang="scss"></style>
