1 files changed, 74 insertions, 0 deletions
diff --git a/src/lib/Tools/Wrapped/MediaExtras.svelte b/src/lib/Tools/Wrapped/MediaExtras.svelte
new file mode 100644
index 00000000..00417c54
--- /dev/null
+++ b/src/lib/Tools/Wrapped/MediaExtras.svelte
@@ -0,0 +1,74 @@
+<script lang="ts">
+	import type { TopMedia } from '$lib/AniList/wrapped';
+	import proxy from '$lib/Utility/proxy';
+
+	export let topMedia: TopMedia;
+	export let updateWidth: () => void;
+	export let highestRatedGenreTagPercentage: boolean;
+	export let genreTagTitle: string;
+</script>
+
+<div class="categories-grid" style="padding-top: 0;">
+	{#if topMedia.topGenreMedia && topMedia.genres.length > 0}
+		<div class="category-grid pure-category category">
+			<div class="grid-item image-grid">
+				<a
+					href={`https://anilist.co/${topMedia.topGenreMedia.type.toLowerCase()}/${
+						topMedia.topGenreMedia.id
+					}`}
+					target="_blank"
+				>
+					<img
+						src={proxy(topMedia.topGenreMedia.coverImage.extraLarge)}
+						alt="Highest Rated Genre Cover"
+						class="cover-image"
+						on:load={updateWidth}
+					/>
+				</a>
+				<div>
+					<b>{genreTagTitle} Genres</b>
+					<ol>
+						{#each topMedia.genres as genre}
+							<li>
+								<a href={`https://anilist.co/search/anime?genres=${genre.genre}`} target="_blank">
+									{genre.genre}{highestRatedGenreTagPercentage ? `: ${genre.averageScore}%` : ''}
+								</a>
+							</li>
+						{/each}
+					</ol>
+				</div>
+			</div>
+		</div>
+	{/if}
+	{#if topMedia.topTagMedia && topMedia.tags.length > 0}
+		<div class="category-grid pure-category category">
+			<div class="grid-item image-grid">
+				<a
+					href={`https://anilist.co/${topMedia.topTagMedia.type.toLowerCase()}/${
+						topMedia.topTagMedia.id
+					}`}
+					target="_blank"
+				>
+					<img
+						src={proxy(topMedia.topTagMedia.coverImage.extraLarge)}
+						alt="Highest Rated Tag Cover"
+						class="cover-image"
+						on:load={updateWidth}
+					/>
+				</a>
+				<div>
+					<b>{genreTagTitle} Tags</b>
+					<ol>
+						{#each topMedia.tags as tag}
+							<li>
+								<a href={`https://anilist.co/search/anime?genres=${tag.tag}`} target="_blank">
+									{tag.tag}{highestRatedGenreTagPercentage ? `: ${tag.averageScore}%` : ''}
+								</a>
+							</li>
+						{/each}
+					</ol>
+				</div>
+			</div>
+		</div>
+	{/if}
+</div>