Implement basic search page

components/ui/navbar/Navbar.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+  import { Icon } from '@iconify/vue'
+
+  const colorMode = useColorMode()
+
+  function toggleColorMode(): void {
+    const currentColorMode = colorMode.value
+    if (currentColorMode === 'light') {
+      colorMode.preference = 'dark'
+    }
+    if (currentColorMode === 'dark') {
+      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>
+    <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>

components/ui/navbar/index.ts

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