Implement basic search page

pages/index.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+
+import kodikImage from "assets/img/kodik.png";
+import shikimoriImage from "assets/img/shikimori.png";
+import {
+  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";
+
+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
+  }
+})
+const search = defineModel<string>("")
+function querySearch() {
+  if (!search.value || search.value.trim() === "") {
+    toast('Please enter a value');
+    return;
+  }
+
+}
+</script>
+
+<template>
+  <div>
+    <Toaster/>
+    <Navbar/>
+    <div class="bg-background h-lvh w-screen flex justify-center items-center gap-1">
+      <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 @click="querySearch"><Icon icon="radix-icons:magnifying-glass" class="h-[1.2rem] w-[1.2rem]" /></Button>
+    </div>
+  </div>
+</template>