init: Initial Commit

src/components/Pokemon.vue

@@ -0,0 +1,25 @@
+<script setup>
+import { defineProps } from 'vue'
+
+const props = defineProps({
+    pokemonData: Object,
+    pokemonImage: String,
+});
+</script>
+
+<template>
+    <div class="lg-translate-x-24 relative">
+        <div class="text-7xl lg:text-[15rem] font-semibold tracking-tighter text-center">
+            {{ pokemonData.names[0].name }}
+        </div>
+        <div class="text-4xl lg:text-9xl font-semibold tracking-tighter text-center">
+            ({{ pokemonData.names[1].name }})
+        </div>
+        <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center">
+            <div class="w-64 h-64 lg:w-auto lg:h-auto">
+                <img :src="pokemonImage" :alt="pokemonData.names[1].name">
+            </div>
+        </div>
+    </div>
+</template>
+