You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
36 lines
994 B
36 lines
994 B
<template>
|
|
<ul class="w-full grid gap-8 grid-cols-2 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-8 2xl:grid-cols-10 self-center ">
|
|
<li class="inline-block" v-for="(movie, index) in movies">
|
|
<movie-poster class="shadow-md hover:shadow-lg rounded-xl motion-safe:transform hover:scale-105 transition-transform ease-out cursor-pointer"
|
|
:src="movie.posterPath ?? undefined" size="w185" @click="$emit('onClickMovie', movie, index)"/>
|
|
</li>
|
|
</ul>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from "vue";
|
|
import { IApiMovie } from "../../common/api_schema";
|
|
import MoviePoster from "./MoviePoster.vue";
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
MoviePoster
|
|
},
|
|
data() {
|
|
return {
|
|
|
|
}
|
|
},
|
|
methods: {
|
|
onModalClosed() {
|
|
let parentPath = this.$route.path.split('/').slice(0, -1).join('/');
|
|
this.$router.push({ path: parentPath, query: this.$route.query });
|
|
}
|
|
},
|
|
props: {
|
|
movies: {
|
|
default: <IApiMovie[]>[]
|
|
}
|
|
}
|
|
});
|
|
</script>
|