v0.2.0

5 files changed, 51 insertions, 7 deletions

diff --git a/components/Details.vue b/components/Details.vue
new file mode 100644
index 0000000..2983bab
--- /dev/null
+++ b/components/Details.vue
@@ -0,0 +1,43 @@
+<template>
+    <section v-show="data" class="space-y-4">
+        <section v-show="data.bannerImage" class="flex justify-center items-center">
+            <NuxtImg :src="data.bannerImage" class="w-full h-20 md:h-40 object-cover rounded-sm opacity-75" />
+        </section>
+        <section class="flex flex-col">
+            <h2 v-show="data.title.romaji" class="text-secondary text-2xl font-semibold">{{ data.title?.romaji }}</h2>
+            <p v-show="data.title.native" class="text-primary">{{ data.title.native }}</p>
+        </section>
+        <section class="grid grid-cols-[auto,1fr] gap-4">
+            <div class="hidden md:flex">
+                <NuxtImg v-show="data.coverImage && data.coverImage.large" :src="data.coverImage.large"
+                    class="w-full h-72 object-cover rounded-sm" />
+            </div>
+            <div class="flex flex-col gap-2">
+                <div class="flex items-center gap-1">
+                    <p v-show="data.season" class="text-primary">{{ data.season }}</p>
+                    <p v-show="data.year" class="text-primary">{{ data.year }}</p>
+                </div>
+                <div class="flex flex-wrap items-center gap-1">
+                    <p v-show="data.episodes" class="text-primary bg-secondary rounded-sm px-2">{{ data.episodes }} Episodes
+                    </p>
+                    <p v-show="data.score && data.score.averageScore" class="text-primary bg-secondary rounded-sm px-2">{{
+                        data.score.averageScore }}%</p>
+                    <p v-show="data.format" class="text-primary bg-secondary rounded-sm px-2">{{ data.format }}</p>
+                    <p v-show="data.status" class="text-primary bg-secondary rounded-sm px-2">{{ data.status }}</p>
+                </div>
+                <div class="flex flex-wrap items-center gap-1">
+                    <div v-show="data.genres" v-for="(genre, index) in data.genres" :key="index">
+                        <p class="text-secondary bg-primary rounded-sm px-2">{{ genre }}</p>
+                    </div>
+                </div>
+                <div v-show="data.description" v-html="data.description"
+                    class="text-primary w-full h-48 overflow-y-auto pr-2" />
+            </div>
+        </section>
+    </section>
+</template>
+
+<script setup>
+const { id } = defineProps(["id"]);
+const { data } = await useFetch("https://api.amvstr.me/api/v2/info/" + id, { key: id });
+</script>
\ No newline at end of file
diff --git a/components/Footer.vue b/components/Footer.vue
index 0989c00..5bd4016 100644
--- a/components/Footer.vue
+++ b/components/Footer.vue
@@ -2,10 +2,11 @@
     <section class="flex justify-between items-center py-4 px-8">
         <p class="text-primary">©{{ currentYear }}. Hiruki</p>
         <div class="flex items-center gap-2">
-            <NuxtLink class="text-primary bg-secondary text-xl rounded-sm pb-1 px-1.5 hover:bg-opacity-75">
+            <NuxtLink to="https://github.com/Kenimarru/hiruki" target="_blank"
+                class="text-primary bg-secondary text-xl rounded-sm pb-1 px-1.5 hover:bg-opacity-75">
                 <Icon name="eva:github-fill" />
             </NuxtLink>
-            <NuxtLink class="text-primary bg-secondary text-xl rounded-sm pb-1 px-1.5 hover:bg-opacity-75">
+            <NuxtLink to="/dmca" class="text-primary bg-secondary text-xl rounded-sm pb-1 px-1.5 hover:bg-opacity-75">
                 <Icon name="fa-solid:dharmachakra" />
             </NuxtLink>
         </div>
diff --git a/components/Popular.vue b/components/Popular.vue
index 8e1a707..215fbfb 100644
--- a/components/Popular.vue
+++ b/components/Popular.vue
@@ -1,13 +1,13 @@
 <template>
     <section class="space-y-4">
         <section class="flex flex-col">
-            <h2 class="text-secondary text-xl font-semibold">All Time Popular</h2>
+            <h1 class="text-secondary text-xl font-semibold">All Time Popular</h1>
             <p class="text-primary text-sm">Most Popular Anime</p>
         </section>
         <section class="grid grid-cols-2 md:grid-cols-8 gap-2">
             <NuxtLink :to="`/i/${item.id}`" class="w-full space-y-1" v-for="item in data.results">
                 <NuxtImg :src="item.coverImage.large" class="w-full h-44 md:h-56 object-cover rounded-sm" />
-                <h2 class="text-primary text-sm truncate">{{ item.title.romaji }}</h2>
+                <h6 class="text-primary text-sm truncate">{{ item.title.romaji }}</h6>
                 <div class="flex items-center gap-1">
                     <p class="text-primary bg-secondary text-sm rounded-sm px-1.5">{{ item.format }}</p>
                     <p class="text-secondary bg-primary text-sm rounded-sm px-1.5">{{ item.seasonYear }}</p>
diff --git a/components/Recommendations.vue b/components/Recommendations.vue
index 34f548f..238e300 100644
--- a/components/Recommendations.vue
+++ b/components/Recommendations.vue
@@ -7,7 +7,7 @@
         <section class="grid grid-cols-2 md:grid-cols-8 gap-2">
             <NuxtLink :to="`/i/${item.id}`" class="w-full space-y-1" v-for="item in data.results.slice(0, 8)">
                 <NuxtImg :src="item.coverImage.large" class="w-full h-44 md:h-56 object-cover rounded-sm" />
-                <h2 class="text-primary text-sm truncate">{{ item.title.romaji }}</h2>
+                <h6 class="text-primary text-sm truncate">{{ item.title.romaji }}</h6>
                 <div class="flex items-center gap-1">
                     <p class="text-primary bg-secondary text-sm rounded-sm px-1.5">{{ item.format }}</p>
                     <p class="text-secondary bg-primary text-sm rounded-sm px-1.5">{{ item.status }}</p>
diff --git a/components/Trending.vue b/components/Trending.vue
index d16beae..efeb050 100644
--- a/components/Trending.vue
+++ b/components/Trending.vue
@@ -1,13 +1,13 @@
 <template>
     <section class="space-y-4">
         <section class="flex flex-col">
-            <h2 class="text-secondary text-xl font-semibold">Trending Now</h2>
+            <h1 class="text-secondary text-xl font-semibold">Trending Now</h1>
             <p class="text-primary text-sm">Currently Trending Anime</p>
         </section>
         <section class="grid grid-cols-2 md:grid-cols-8 gap-2">
             <NuxtLink :to="`/i/${item.id}`" class="w-full space-y-1" v-for="item in data.results">
                 <NuxtImg :src="item.coverImage.large" class="w-full h-44 md:h-56 object-cover rounded-sm" />
-                <h2 class="text-primary text-sm truncate">{{ item.title.romaji }}</h2>
+                <h6 class="text-primary text-sm truncate">{{ item.title.romaji }}</h6>
                 <div class="flex items-center gap-1">
                     <p class="text-primary bg-secondary text-sm rounded-sm px-1.5">{{ item.format }}</p>
                     <p class="text-secondary bg-primary text-sm rounded-sm px-1.5">{{ item.seasonYear }}</p>