More blurriness, and stylish

app.vue

@@ -0,0 +1,11 @@
+<template>
+    <div class="relative flex flex-col min-h-svh">
+        <header class="w-full sticky top-0 z-50">
+            <Navbar />
+        </header>
+        <main class="flex flex-1 flex-col">
+            <NuxtPage />
+        </main>
+        <Toaster />
+    </div>
+</template>

assets/css/main.css

@@ -0,0 +1,3 @@
+.dark img {
+    filter: brightness(1.1) contrast(0.9);
+}

components/ui/aspect-ratio/AspectRatio.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { AspectRatio, type AspectRatioProps } from 'reka-ui'
+
+const props = defineProps<AspectRatioProps>()
+</script>
+
+<template>
+  <AspectRatio
+    data-slot="aspect-ratio"
+    v-bind="props"
+  >
+    <slot />
+  </AspectRatio>
+</template>

components/ui/aspect-ratio/index.ts

@@ -0,0 +1 @@
+export { default as AspectRatio } from './AspectRatio.vue'

components/ui/navbar/Navbar.vue

@@ -1,32 +1,34 @@
 <script setup lang="ts">
-  import { Icon } from '@iconify/vue'
+import { Icon } from '@iconify/vue'
 
-  const colorMode = useColorMode()
+const colorMode = useColorMode()
 
-  function toggleColorMode(): void {
+function toggleColorMode(): void {
     const currentColorMode = colorMode.value
     if (currentColorMode === 'light') {
-      colorMode.preference = 'dark'
+        colorMode.preference = 'dark'
     }
     if (currentColorMode === 'dark') {
-      colorMode.preference = 'light'
+        colorMode.preference = 'light'
     }
-  }
+}
 </script>
 
 <template>
-  <div class="absolute w-screen flex justify-around items-center p-2 border-b-2">
-    <div class="self-start">
-      <h3 class="scroll-m-20 text-2xl font-semibold tracking-tight select-none">
-        Anyame
-      </h3>
+    <div class="flex justify-around items-center p-2 border-b-2 backdrop-blur">
+        <div class="self-start">
+            <h3 class="scroll-m-20 text-2xl font-semibold tracking-tight select-none">
+                Anyame
+            </h3>
+        </div>
+        <div class="self-end">
+            <Button variant="outline" @click="toggleColorMode()">
+                <Icon icon="radix-icons:moon"
+                    class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+                <Icon icon="radix-icons:sun"
+                    class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+                <span class="sr-only">Toggle theme</span>
+            </Button>
+        </div>
     </div>
-    <div class="self-end">
-      <Button variant="outline" @click="toggleColorMode()">
-        <Icon icon="radix-icons:moon" class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-        <Icon icon="radix-icons:sun" class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-        <span class="sr-only">Toggle theme</span>
-      </Button>
-    </div>
-  </div>
-</template>
+</template>

nuxt.config.ts

@@ -8,7 +8,10 @@ export default defineNuxtConfig({
     colorMode: {
         classSuffix: ''
     },
-    css: ['~/assets/css/tailwind.css'],
+    css: [
+        '~/assets/css/tailwind.css',
+        '~/assets/css/main.css',
+    ],
     vite: {
         plugins: [
             tailwindcss(),

pages/index.vue

@@ -3,85 +3,78 @@
 import kodikImage from "assets/img/kodik.png";
 import shikimoriImage from "assets/img/shikimori.png";
 import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue
+    Select,
+    SelectContent,
+    SelectGroup,
+    SelectItem,
+    SelectLabel,
+    SelectTrigger,
+    SelectValue
 } from "~/components/ui/select";
 import { toast } from "vue-sonner";
-import { Toaster } from "~/components/ui/sonner";
-import { Navbar } from "~/components/ui/navbar";
 import 'vue-sonner/style.css'
 import { Icon } from "#components";
 
 const router = useRouter()
 const searchProvider = ref('kodik')
 const displaySearchProvider = computed(() => {
-  let label = '';
-  let image;
-  if (searchProvider.value === 'kodik') {
-    label = 'Kodik';
-    image = kodikImage;
-  }
-  if (searchProvider.value === 'shikimori') {
-    label = 'Shikimori';
-    image = shikimoriImage;
-  }
-  return {
-    label,
-    image
-  }
+    let label = '';
+    let image;
+    if (searchProvider.value === 'kodik') {
+        label = 'Kodik';
+        image = kodikImage;
+    }
+    if (searchProvider.value === 'shikimori') {
+        label = 'Shikimori';
+        image = shikimoriImage;
+    }
+    return {
+        label,
+        image
+    }
 })
 const search = defineModel<string>("")
 function querySearch() {
-  if (!search.value || search.value.trim() === "") {
-    toast('Please enter a value');
-    return;
-  }
-  router.push({ path: '/search', query: { title: search.value, provider: searchProvider.value } })
-    .catch(err => {
-      console.error('Navigation error:', err);
-      toast.error('Failed to navigate to search results');
-    });
+    if (!search.value || search.value.trim() === "") {
+        toast('Please enter a value');
+        return;
+    }
+    router.push({ path: '/search', query: { title: search.value, provider: searchProvider.value } })
+        .catch(err => {
+            console.error('Navigation error:', err);
+            toast.error('Failed to navigate to search results');
+        });
 }
 </script>
 
 <template>
-  <div>
-    <Toaster />
-    <Navbar />
-
-    <div class="bg-background h-lvh w-screen flex justify-center items-center gap-1">
-      <form @submit.prevent="querySearch" class="flex items-center gap-2">
-        <Select v-model="searchProvider">
-          <SelectTrigger>
-            <SelectValue placeholder="Select an provider">
-              <img :src="displaySearchProvider.image" alt="" class="w-5 h-5 rounded border border-gray-300">
-              <span>{{ displaySearchProvider.label }}</span>
-            </SelectValue>
-          </SelectTrigger>
-          <SelectContent>
-            <SelectGroup>
-              <SelectLabel>Providers</SelectLabel>
-              <SelectItem value="kodik">
-                <img :src="kodikImage" alt="" class="w-5 h-5 rounded border border-gray-300">
-                <span>Kodik</span>
-              </SelectItem>
-              <SelectItem value="shikimori">
-                <img :src="shikimoriImage" alt="" class="w-5 h-5 rounded border border-gray-300">
-                Shikimori
-              </SelectItem>
-            </SelectGroup>
-          </SelectContent>
-        </Select>
-        <Input v-model="search" class="w-64" type="text" placeholder="Search anime..." />
-        <Button type="submit">
-          <Icon name="heroicons:magnifying-glass-16-solid" class="w-6 h-6" />
-        </Button>
-      </form>
+    <div class="bg-background flex-1 w-screen flex justify-center items-center gap-1">
+        <form @submit.prevent="querySearch" class="flex items-center gap-2">
+            <Select v-model="searchProvider">
+                <SelectTrigger>
+                    <SelectValue placeholder="Select an provider">
+                        <img :src="displaySearchProvider.image" alt="" class="w-5 h-5 rounded border border-gray-300">
+                        <span>{{ displaySearchProvider.label }}</span>
+                    </SelectValue>
+                </SelectTrigger>
+                <SelectContent>
+                    <SelectGroup>
+                        <SelectLabel>Providers</SelectLabel>
+                        <SelectItem value="kodik">
+                            <img :src="kodikImage" alt="" class="w-5 h-5 rounded border border-gray-300">
+                            <span>Kodik</span>
+                        </SelectItem>
+                        <SelectItem value="shikimori">
+                            <img :src="shikimoriImage" alt="" class="w-5 h-5 rounded border border-gray-300">
+                            Shikimori
+                        </SelectItem>
+                    </SelectGroup>
+                </SelectContent>
+            </Select>
+            <Input v-model="search" class="w-64" type="text" placeholder="Search anime..." />
+            <Button type="submit">
+                <Icon name="heroicons:magnifying-glass-16-solid" class="w-6 h-6" />
+            </Button>
+        </form>
     </div>
-  </div>
 </template>

pages/search.vue

@@ -9,50 +9,53 @@ const isLoading = ref(false)
 const error = ref<unknown>(null)
 
 watchEffect(async () => {
-  if (!searchQuery.value) return
+    if (!searchQuery.value) return
 
-  try {
-    isLoading.value = true
-    error.value = null
-    const response = await search({ title: searchQuery.value })
-    results.value = response.data.results || []
-  } catch (err) {
-    error.value = err
-    console.error('Search failed:', err)
-  } finally {
-    isLoading.value = false
-  }
+    try {
+        isLoading.value = true
+        error.value = null
+        const response = await search({ title: searchQuery.value })
+        results.value = response.data.results || []
+    } catch (err) {
+        error.value = err
+        console.error('Search failed:', err)
+    } finally {
+        isLoading.value = false
+    }
 })
 </script>
 
 <template>
-  <div>
-    <div v-if="isLoading">
-      Loading results...
-    </div>
+    <div>
+        <div v-if="isLoading">
+            Loading results...
+        </div>
 
-    <div v-if="error">
-      Error loading results: {{ error }}
-    </div>
+        <div v-if="error">
+            Error loading results: {{ error }}
+        </div>
 
-    <div v-if="results.length > 0" class="grid grid-cols-[repeat(auto-fill,32rem)] justify-around gap-8 grid-flow-row">
-      <div v-for="item in results" :key="item.id" class="flex w-[32rem]">
-        <NuxtLink :to="`/anime/${item.id}`">
-          <img v-if="item.material_data?.anime_poster_url" :src="item.material_data.anime_poster_url" :alt="item.title"
-            class="rounded-md">
-          <div>
-            <h3 className="text-2xl font-semibold tracking-tight">{{ item.title }}</h3>
-            <p v-if="item.material_data?.year">Year: {{ item.material_data.year }}</p>
-            <p v-if="item.material_data?.anime_kind">Type: {{ item.material_data.anime_kind }}</p>
-            <p v-if="item.material_data?.episodes_total">Episodes: {{ item.material_data.episodes_total }}
-            </p>
-          </div>
-        </NuxtLink>
-      </div>
-    </div>
+        <div v-if="results.length > 0"
+            class="grid grid-cols-[repeat(auto-fill,16rem)] justify-around gap-8 grid-flow-row">
+            <div v-for="item in results" :key="item.id" class="flex w-[16rem]">
+                <NuxtLink :to="`/anime/${item.id}`" class="w-full">
+                    <div v-if="item.material_data?.anime_poster_url" :style="{ 'background-image': 'url('+item.material_data.anime_poster_url+')' }"
+                        :alt="item.title" class="flex items-end justify-end p-2 rounded-md bg-cover bg-center bg-no-repeat h-96">
+                        <Button class="backdrop-blur-none bg-primary/80">2 episodes</Button>
+                    </div>
+                    <div>
+                        <h3 className="text-2xl font-semibold tracking-tight">{{ item.title }}</h3>
+                        <p v-if="item.material_data?.year">Year: {{ item.material_data.year }}</p>
+                        <p v-if="item.material_data?.anime_kind">Type: {{ item.material_data.anime_kind }}</p>
+                        <p v-if="item.material_data?.episodes_total">Episodes: {{ item.material_data.episodes_total }}
+                        </p>
+                    </div>
+                </NuxtLink>
+            </div>
+        </div>
 
-    <div v-if="!isLoading && !error && results.length === 0 && searchQuery">
-      No results found for "{{ searchQuery }}"
+        <div v-if="!isLoading && !error && results.length === 0 && searchQuery">
+            No results found for "{{ searchQuery }}"
+        </div>
     </div>
-  </div>
 </template>