From 1eca8ae41ea62cd7ee75dc3253b961d8b7ca9bb8 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Tue, 11 Oct 2022 22:24:52 +0200
Subject: [PATCH] feat: add AttributionTable component

---
 src/components/AttributionTable.vue | 100 ++++++++++++++++++++++++++++
 1 file changed, 100 insertions(+)
 create mode 100644 src/components/AttributionTable.vue

diff --git a/src/components/AttributionTable.vue b/src/components/AttributionTable.vue
new file mode 100644
index 0000000..6e1b0d1
--- /dev/null
+++ b/src/components/AttributionTable.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import PawIcon from "@/assets/icons/PawIcon.vue";
+import TwitterIcon from "@/assets/icons/TwitterIcon.vue";
+
+interface ArtistLink {
+  furaffinity?: string;
+  twitter?: string;
+}
+
+interface Attribution {
+  artwork: string;
+  artist: string;
+  links: ArtistLink;
+}
+
+interface Props {
+  attributions: Attribution[];
+}
+
+defineProps<Props>();
+</script>
+
+<template>
+  <table class="attribution-table">
+    <thead class="attribution-table__head">
+      <tr class="attribution-table__row">
+        <th class="attribution-table__heading artwork">Artwork</th>
+        <th class="attribution-table__heading artist">Artist</th>
+      </tr>
+    </thead>
+    <tbody class="attribution-table__body">
+      <tr
+        class="attribution-table__row"
+        v-for="(attrib, idx) in attributions"
+        :key="idx"
+      >
+        <td class="attribution-table__cell artwork">
+          <img :src="attrib.artwork" alt="Image attribution" />
+        </td>
+        <td class="attribution-table__cell artist">
+          <p>
+            {{ attrib.artist }}
+          </p>
+          <ul>
+            <li v-if="attrib.links.furaffinity">
+              <a :href="attrib.links.furaffinity" title="Fur Affinity">
+                <PawIcon />
+              </a>
+            </li>
+            <li v-if="attrib.links.twitter">
+              <a :href="attrib.links.twitter" title="Twitter">
+                <TwitterIcon />
+              </a>
+            </li>
+          </ul>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<style lang="scss">
+.attribution-table {
+  &__cell {
+    &.artwork {
+      width: 10rem;
+
+      img {
+        width: 100%;
+      }
+    }
+
+    &.artist {
+      p {
+        text-align: center;
+      }
+
+      ul {
+        display: flex;
+        flex-flow: row wrap;
+        justify-content: center;
+
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+
+      li {
+        flex: 0 0 2rem;
+        max-width: 2rem;
+        padding: 0 0.5rem;
+      }
+
+      a {
+        box-shadow: none;
+      }
+    }
+  }
+}
+</style>