SebinNyshkim/viktor-reference
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add AttributionTable component

Browse source
This commit is contained in:
Sebin Nyshkim 2022-10-11 22:24:52 +02:00
parent 0683ff26c5
commit 1eca8ae41e
1 changed files with 100 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

100
src/components/AttributionTable.vue Normal file
View file

@ -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>