✨ feat (layout): add auth layout

app/app.vue

@@ -1,6 +1,18 @@
+<script setup lang="ts">
+import { ConfigProvider } from 'radix-vue'
+
+const useIdFunction = () => useId()
+
+const textDirection = useTextDirection({ initialValue: 'ltr' })
+const dir = computed(() => (textDirection.value === 'rtl' ? 'rtl' : 'ltr'))
+</script>
+
 <template>
-  <div>
-    <NuxtRouteAnnouncer />
-    <NuxtWelcome />
-  </div>
+  <ConfigProvider :use-id="useIdFunction" :dir="dir">
+    <div vaul-drawer-wrapper class="relative">
+      <NuxtLayout>
+        <NuxtPage />
+      </NuxtLayout>
+    </div>
+  </ConfigProvider>
 </template>

app/components/app/auth/SignIn.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+// import PasswordInput from '~/components/PasswordInput.vue'
+import { Loader2 } from 'lucide-vue-next'
+
+const email = ref('demo@gmail.com')
+const password = ref('password')
+const isLoading = ref(false)
+
+function onSubmit(event: Event) {
+  event.preventDefault()
+  if (!email.value || !password.value) return
+
+  isLoading.value = true
+
+  setTimeout(() => {
+    if (email.value === 'demo@gmail.com' && password.value === 'password') navigateTo('/')
+
+    isLoading.value = false
+  }, 3000)
+}
+</script>
+
+<template>
+  <form class="grid gap-6" @submit="onSubmit">
+    <div class="grid gap-2">
+      <Label for="email"> Email </Label>
+      <Input
+        id="email"
+        v-model="email"
+        type="email"
+        placeholder="name@example.com"
+        :disabled="isLoading"
+        auto-capitalize="none"
+        auto-complete="email"
+        auto-correct="off"
+      />
+    </div>
+    <div class="grid gap-2">
+      <div class="flex items-center">
+        <Label for="password"> Password </Label>
+        <NuxtLink to="/forgot-password" class="ml-auto inline-block text-sm underline">
+          Forgot your password?
+        </NuxtLink>
+      </div>
+      <!-- <PasswordInput id="password" v-model="password" /> -->
+    </div>
+    <Button type="submit" class="w-full" :disabled="isLoading">
+      <Loader2 v-if="isLoading" class="mr-2 h-4 w-4 animate-spin" />
+      Login
+    </Button>
+  </form>
+</template>
+
+<style scoped></style>

app/components/layout/Auth.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+defineProps<{
+  reverse?: boolean
+}>()
+</script>
+
+<template>
+  <div
+    class="relative flex h-dvh items-center justify-center px-4 lg:max-w-none lg:px-0"
+    :class="{ 'flex-row-reverse': reverse }"
+  >
+    <!-- <div class="bg-muted relative hidden h-full flex-1 flex-col p-10 text-white lg:flex dark:border-r"> -->
+    <!--   <div class="absolute inset-0 bg-zinc-900" /> -->
+    <!--   <div class="relative z-20 mt-auto"> -->
+    <!--     <blockquote class="space-y-2"> -->
+    <!--       <p class="text-lg"> -->
+    <!--         &ldquo;This library has saved me countless hours of work and helped me deliver stunning designs to my -->
+    <!--         clients faster than ever before.&rdquo; -->
+    <!--       </p> -->
+    <!--       <footer class="text-sm">Sofia Davis</footer> -->
+    <!--     </blockquote> -->
+    <!--   </div> -->
+    <!-- </div> -->
+    <div class="mx-auto flex-1 lg:p-8">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

app/layouts/blank.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div>
+    <slot />
+  </div>
+</template>
+
+<style scoped></style>

app/layouts/default.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts"></script>
+
+<template>
+  <SidebarProvider>
+    <LayoutAppSidebar />
+    <SidebarInset>
+      <LayoutHeader />
+      <div class="w-full min-w-0 flex-1 overflow-x-auto p-4 lg:p-6">
+        <slot />
+      </div>
+    </SidebarInset>
+  </SidebarProvider>
+</template>
+
+<style scoped></style>

app/pages/index.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="flex w-full flex-col gap-4">
+    <div class="flex flex-wrap items-center justify-between gap-2">
+      <h2 class="text-2xl font-bold tracking-tight">Dashboard</h2>
+      <div class="flex items-center space-x-2"></div>
+    </div>
+  </div>
+</template>