87 lines
2.3 KiB
Vue
87 lines
2.3 KiB
Vue
<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> |