26 lines
776 B
Vue
26 lines
776 B
Vue
<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>
|
|
|