v0.1.0

5 files changed, 92 insertions, 0 deletions

diff --git a/components/Footer.vue b/components/Footer.vue
new file mode 100644
index 0000000..0989c00
--- /dev/null
+++ b/components/Footer.vue
@@ -0,0 +1,17 @@
+<template>
+    <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">
+                <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">
+                <Icon name="fa-solid:dharmachakra" />
+            </NuxtLink>
+        </div>
+    </section>
+</template>
+
+<script setup>
+const currentYear = new Date().getFullYear();
+</script>
\ No newline at end of file
diff --git a/components/Header.vue b/components/Header.vue
new file mode 100644
index 0000000..3d03c35
--- /dev/null
+++ b/components/Header.vue
@@ -0,0 +1,8 @@
+<template>
+    <section class="flex justify-between items-center py-4 px-8">
+        <NuxtLink to="/" class="text-secondary text-4xl font-semibold">hiruki</NuxtLink>
+        <NuxtLink class="text-primary bg-secondary text-xl rounded-sm pb-1 px-1.5 hover:bg-opacity-75">
+            <Icon name="heroicons-solid:magnifying-glass" />
+        </NuxtLink>
+    </section>
+</template>
\ No newline at end of file
diff --git a/components/Popular.vue b/components/Popular.vue
new file mode 100644
index 0000000..8e1a707
--- /dev/null
+++ b/components/Popular.vue
@@ -0,0 +1,22 @@
+<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>
+        </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>
+                <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("https://api.amvstr.me/api/v2/popular?limit=8");
+</script>
\ No newline at end of file
diff --git a/components/Recommendations.vue b/components/Recommendations.vue
new file mode 100644
index 0000000..34f548f
--- /dev/null
+++ b/components/Recommendations.vue
@@ -0,0 +1,23 @@
+<template>
+    <section class="space-y-4">
+        <section class="flex flex-col">
+            <h2 class="text-secondary text-xl font-semibold">Recommendations</h2>
+            <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.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>
+                <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>
+                </div>
+            </NuxtLink>
+        </section>
+    </section>
+</template>
+
+<script setup>
+const { id } = defineProps(["id"]);
+const { data } = await useFetch("https://api.amvstr.me/api/v2/recommendations/" + id, { key: id });
+</script>
\ No newline at end of file
diff --git a/components/Trending.vue b/components/Trending.vue
new file mode 100644
index 0000000..d16beae
--- /dev/null
+++ b/components/Trending.vue
@@ -0,0 +1,22 @@
+<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.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>
+                <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("https://api.amvstr.me/api/v2/trending?limit=8");
+</script>
\ No newline at end of file