v0.3.2

9 files changed, 66 insertions, 32 deletions

diff --git a/components/Popular.vue b/components/Cards.vue
index 670e944..1b04d16 100644
--- a/components/Popular.vue
+++ b/components/Cards.vue
@@ -1,8 +1,8 @@
 <template>
     <section class="space-y-4">
         <section class="flex flex-col">
-            <h2 class="text-secondary text-xl font-semibold">All Time Popular</h2>
-            <p class="text-primary text-sm">Most Popular Anime</p>
+            <h2 class="text-secondary text-xl font-semibold">{{ title }}</h2>
+            <p class="text-primary text-sm">{{ description }}</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">
@@ -20,5 +20,5 @@
 </template>
 
 <script setup>
-const { data } = await useFetch("/api/popular");
+const { title, description, data } = defineProps(["title", "description", "data"]);
 </script>
\ No newline at end of file
diff --git a/components/Top.vue b/components/Top.vue
new file mode 100644
index 0000000..78f1104
--- /dev/null
+++ b/components/Top.vue
@@ -0,0 +1,33 @@
+<template>
+    <section class="space-y-4">
+        <section class="flex flex-col">
+            <h2 class="text-secondary text-xl font-semibold">{{ title }}</h2>
+            <p class="text-primary text-sm">{{ description }}</p>
+        </section>
+        <section class="grid grid-cols-1 w-full gap-2">
+            <NuxtLink :to="`/i/${item.id}`" class="relative w-full space-y-1" v-for="(item, index) in data">
+                <NuxtImg :src="item.bannerImage" :alt="item.title.romaji" :title="item.title.romaji"
+                    class="w-full h-20 object-cover rounded-sm opacity-50" />
+                <div class="absolute inset-0 px-2">
+                    <button type="button" class="text-primary bg-secondary text-sm rounded-sm px-2">
+                        #{{ index + 1 }}</button>
+                    <h6 class="text-primary text-base font-semibold truncate">{{ item.title.romaji }}</h6>
+                    <div class="flex items-center gap-2">
+                        <button type="button" class="text-primary bg-secondary text-sm rounded-sm px-2">
+                            {{ item.averageScore }}%</button>
+                        <button type="button" class="text-primary bg-secondary text-sm rounded-sm px-2">
+                            {{ item.format }}</button>
+                        <button type="button" class="text-primary bg-secondary text-sm rounded-sm px-2">
+                            {{ item.season }}</button>
+                        <button type="button" class="text-primary bg-secondary text-sm rounded-sm px-2">
+                            {{ item.seasonYear }}</button>
+                    </div>
+                </div>
+            </NuxtLink>
+        </section>
+    </section>
+</template>
+
+<script setup>
+const { title, description, data } = defineProps(["title", "description", "data"]);
+</script>
\ No newline at end of file
diff --git a/components/Trending.vue b/components/Trending.vue
deleted file mode 100644
index 823782c..0000000
--- a/components/Trending.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<template>
-    <section class="space-y-4">
-        <section class="flex flex-col">
-            <h2 class="text-secondary text-xl font-semibold">Trending Now</h2>
-            <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">
-                <NuxtImg :src="item.coverImage.large" :alt="item.title.romaji" :title="item.title.romaji" 
-                class="w-full h-44 ms:h-48 mm:h-60 ml:h-64 tb:h-32 lp:h-56 ll:h-60 4k:h-96 
-                    object-cover rounded-sm hover:scale-95" />
-                <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>
-                </div>
-            </NuxtLink>
-        </section>
-    </section>
-</template>
-
-<script setup>
-const { data } = await useFetch("/api/trending");
-</script>
\ No newline at end of file
diff --git a/error.vue b/error.vue
new file mode 100644
index 0000000..4d1a5fe
--- /dev/null
+++ b/error.vue
@@ -0,0 +1,11 @@
+<template>
+    <section class="space-y-4">
+        <div class="flex flex-col justify-center items-center h-screen gap-2">
+            <div class="flex flex-col items-center">
+                <h1 class="text-error text-7xl font-bold uppercase">Error</h1>
+                <p class="text-primary text-lg">Something Went Wrong!</p>
+            </div>
+            <NuxtLink to="/" class="text-primary bg-error rounded-sm py-1 px-4 hover:bg-opacity-75">Go Back Home</NuxtLink>
+        </div>
+    </section>
+</template>
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 8724358..f19882d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "hiruki",
-    "version": "0.3.1",
+    "version": "0.3.2",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "hiruki",
-            "version": "0.3.1",
+            "version": "0.3.2",
             "hasInstallScript": true,
             "license": "MIT",
             "devDependencies": {
diff --git a/package.json b/package.json
index 5c088a7..115f88a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "hiruki",
-    "version": "0.3.1",
+    "version": "0.3.2",
     "private": true,
     "type": "module",
     "scripts": {
diff --git a/pages/index.vue b/pages/index.vue
index df9fd1d..7e53f51 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,9 +1,15 @@
 <template>
     <section class="space-y-4">
-        <Trending />
-        <Popular />
+        <Cards title="Trending Now" description="Currently Trending Anime" :data="trending" />
+        <Cards title="All Time Popular" description="Most Popular Anime" :data="popular" />
+        <Cards title="Upcoming Next Season" description="Upcoming Anime" :data="upcoming" />
+        <Top title="Top 10 Anime" description="Top High Rated Anime" :data="top" />
     </section>
 </template>
 
 <script setup>
+const { data: trending } = await useFetch("/api/trending");
+const { data: popular } = await useFetch("/api/popular");
+const { data: upcoming } = await useFetch("/api/upcoming");
+const { data: top } = await useFetch("/api/top");
 </script>
\ No newline at end of file
diff --git a/server/api/top.js b/server/api/top.js
new file mode 100644
index 0000000..72c92d3
--- /dev/null
+++ b/server/api/top.js
@@ -0,0 +1,4 @@
+export default defineEventHandler(async () => {
+    const { API } = useRuntimeConfig();
+    return await $fetch(API + "/top");
+});
\ No newline at end of file
diff --git a/server/api/upcoming.js b/server/api/upcoming.js
new file mode 100644
index 0000000..1a9bcdf
--- /dev/null
+++ b/server/api/upcoming.js
@@ -0,0 +1,4 @@
+export default defineEventHandler(async () => {
+    const { API } = useRuntimeConfig();
+    return await $fetch(API + "/upcoming");
+});
\ No newline at end of file