80 lines
2.5 KiB
Vue
80 lines
2.5 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";
|
|
import 'vue-sonner/style.css'
|
|
import { Icon } from "#components";
|
|
|
|
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 name="heroicons:magnifying-glass-16-solid" class="w-6 h-6" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</template>
|