diff options
| author | Kenimarru <[email protected]> | 2024-01-08 19:58:12 +0100 |
|---|---|---|
| committer | Kenimarru <[email protected]> | 2024-01-08 19:58:12 +0100 |
| commit | 4084445a3c1efb825c2adde086cb4d40c9ba9f7a (patch) | |
| tree | cfa45e3ef5a652a38240d44bbbc77ff46a99f508 /components/Featured.vue | |
| parent | v0.3.2 (diff) | |
| download | hiruku-4084445a3c1efb825c2adde086cb4d40c9ba9f7a.tar.xz hiruku-4084445a3c1efb825c2adde086cb4d40c9ba9f7a.zip | |
v0.4.0
Diffstat (limited to 'components/Featured.vue')
| -rw-r--r-- | components/Featured.vue | 36 |
1 files changed, 36 insertions, 0 deletions
diff --git a/components/Featured.vue b/components/Featured.vue new file mode 100644 index 0000000..97f0fe3 --- /dev/null +++ b/components/Featured.vue @@ -0,0 +1,36 @@ +<template> + <section class="hidden md:flex flex-row justify-center items-center gap-4 space-y-4 my-8"> + <div class="flex flex-col w-[800px] gap-2"> + <h2 class="text-secondary text-2xl font-semibold">{{ data.title.romaji }}</h2> + <div class="flex items-center gap-2"> + <h6 class="text-primary"> + {{ data.season === "WINTER" ? "Winter" + : data.season === "SPRING" ? "Spring" + : data.season === "SUMMER" ? "Summer" + : data.season === "FALL" ? "Fall" + : data.season }} + </h6> + <h6 class="text-primary">{{ data.seasonYear }}</h6> + </div> + <div class="flex flex-wrap items-center gap-1"> + <div v-for="(genre, index) in data.genres" :key="index"> + <p class="text-secondary bg-primary rounded-sm px-2">{{ genre }}</p> + </div> + </div> + <p v-html="data.description" class="text-primary w-[800px] h-48 overflow-y-auto pr-2" /> + <div class="my-2"> + <NuxtLink :to="`/i/${data.id}`" + class="text-primary bg-secondary text-center rounded-sm uppercase py-2 px-4 hover:bg-opacity-75"> + Start Watching</NuxtLink> + </div> + </div> + <div> + <NuxtImg :src="data.coverImage.large" :alt="data.title.romaji" :title="data.title.romaji" + class="w-72 h-[420px] object-cover rounded-md" /> + </div> + </section> +</template> + +<script setup> +const { data } = defineProps(["data"]); +</script>
\ No newline at end of file |