More blurriness, and stylish

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>