More blurriness, and stylish

components/ui/aspect-ratio/AspectRatio.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { AspectRatio, type AspectRatioProps } from 'reka-ui'
+
+const props = defineProps<AspectRatioProps>()
+</script>
+
+<template>
+  <AspectRatio
+    data-slot="aspect-ratio"
+    v-bind="props"
+  >
+    <slot />
+  </AspectRatio>
+</template>

components/ui/aspect-ratio/index.ts

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

components/ui/navbar/Navbar.vue

@@ -1,32 +1,34 @@
 <script setup lang="ts">
-  import { Icon } from '@iconify/vue'
+import { Icon } from '@iconify/vue'
 
-  const colorMode = useColorMode()
+const colorMode = useColorMode()
 
-  function toggleColorMode(): void {
+function toggleColorMode(): void {
     const currentColorMode = colorMode.value
     if (currentColorMode === 'light') {
-      colorMode.preference = 'dark'
+        colorMode.preference = 'dark'
     }
     if (currentColorMode === 'dark') {
-      colorMode.preference = 'light'
+        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 class="flex justify-around items-center p-2 border-b-2 backdrop-blur">
+        <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>
-    <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>
+</template>