From db83c914319a1293293f4b1e4465fe093b6e9ca6 Mon Sep 17 00:00:00 2001
From: Dylanson25 <dylanson25@users.noreply.github.com>
Date: Thu, 10 Oct 2024 13:49:47 -0700
Subject: [PATCH] [#45] - Pokemon image component

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

diff --git a/src/vue/components/PokemonPicture.vue b/src/vue/components/PokemonPicture.vue
new file mode 100644
index 0000000..3eec849
--- /dev/null
+++ b/src/vue/components/PokemonPicture.vue
@@ -0,0 +1,43 @@
+<template>
+	<section>
+		<img
+			v-if="!showPokemon"
+			:src="pokemonImage"
+			class="brightness-0 h-[200px]"
+		/>
+		<img
+			v-else
+			:src="pokemonImage"
+			class="fade-in h-[200px]"
+			alt="pokemon image"
+		/>
+	</section>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface Props {
+	pokemonId: number;
+	showPokemon?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	showPokemon: false,
+});
+
+const pokemonImage = computed(
+	() =>
+		`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/${props.pokemonId}.svg`,
+);
+</script>
+
+<style scoped>
+img {
+	user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	-webkit-user-drag: none;
+	-webkit-user-select: none;
+}
+</style>