✨ Componentes cra 7

src/componentes/Personaje.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { defineProps } from 'vue';
+import type { ElementoPaisaje } from '../tipos';
+interface Props {
+  personaje: ElementoPaisaje;
+  // Definir qué tipo de dato va a ser la ubicación
+  ubicacion: any;
+}
+
+defineProps<Props>();
+</script>
+
+<template>
+  <h1>{{ personaje.nombre }}</h1>
+  <p>{{ personaje.descripcion }}</p>
+  <video :src="personaje.ruta"></video>
+</template>
+
+<style lang="scss" scoped></style>

src/componentes/Podcast.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { defineProps } from 'vue';
+import type { ElementoPaisaje } from '../tipos';
+interface Props {
+  podcast: ElementoPaisaje;
+  // Definir qué tipo de dato va a ser la ubicación
+  ubicacion: any;
+}
+
+defineProps<Props>();
+</script>
+
+<template>
+  <h1>{{ podcast.nombre }}</h1>
+  <p>{{ podcast.descripcion }}</p>
+  <audio :src="podcast.ruta"></audio>
+</template>
+
+<style lang="scss" scoped></style>

src/componentes/Relato.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { defineProps } from 'vue';
+import type { ElementoPaisaje } from '../tipos';
+interface Props {
+  relato: ElementoPaisaje;
+  // Definir qué tipo de dato va a ser la ubicación
+  ubicacion: any;
+}
+
+defineProps<Props>();
+</script>
+
+<template>
+  <h1>{{ relato.nombre }}</h1>
+  <p>{{ relato.descripcion }}</p>
+</template>
+
+<style lang="scss" scoped></style>

src/tipos.ts

@@ -0,0 +1,8 @@
+// Los elementos son: podcast, personaje y texto
+export interface ElementoPaisaje {
+  nombre: string;
+  descripcion: string;
+  // POR HACER: definir formato de ubicación
+  ubicacion: number;
+  ruta?: string;
+}