implement logout dialog, fix unused imports

src/components/ui/dialog/Dialog.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { DialogRoot } from 'radix-vue'
+
+const props = defineProps<{
+  open?: boolean
+  defaultOpen?: boolean
+  modal?: boolean
+}>()
+
+const emits = defineEmits<{
+  'update:open': [value: boolean]
+}>()
+</script>
+
+<template>
+  <DialogRoot v-bind="props" @update:open="emits('update:open', $event)">
+    <slot />
+  </DialogRoot>
+</template> 

src/components/ui/dialog/DialogContent.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { DialogPortal, DialogOverlay, DialogContent as DialogContentPrimitive, DialogClose } from 'radix-vue'
+import { X } from 'lucide-vue-next'
+import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    />
+    <DialogContentPrimitive
+      :class="cn(
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        props.class
+      )"
+    >
+      <slot />
+      <DialogClose
+        class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
+      >
+        <X class="h-4 w-4" />
+        <span class="sr-only">Close</span>
+      </DialogClose>
+    </DialogContentPrimitive>
+  </DialogPortal>
+</template> 

src/components/ui/dialog/DialogDescription.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { DialogDescription as DialogDescriptionPrimitive } from 'radix-vue'
+import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <DialogDescriptionPrimitive :class="cn('text-sm text-muted-foreground', props.class)">
+    <slot />
+  </DialogDescriptionPrimitive>
+</template> 

src/components/ui/dialog/DialogFooter.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', props.class)">
+    <slot />
+  </div>
+</template> 

src/components/ui/dialog/DialogHeader.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn('flex flex-col space-y-1.5 text-center sm:text-left', props.class)">
+    <slot />
+  </div>
+</template> 

src/components/ui/dialog/DialogTitle.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { DialogTitle as DialogTitlePrimitive } from 'radix-vue'
+import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <DialogTitlePrimitive :class="cn('text-lg font-semibold leading-none tracking-tight', props.class)">
+    <slot />
+  </DialogTitlePrimitive>
+</template> 

src/components/ui/dialog/DialogTrigger.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { DialogTrigger as DialogTriggerPrimitive } from 'radix-vue'
+import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+  asChild?: boolean
+}>()
+</script>
+
+<template>
+  <DialogTriggerPrimitive v-bind="props" :class="cn(props.class)">
+    <slot />
+  </DialogTriggerPrimitive>
+</template> 

src/components/ui/dialog/index.ts

@@ -0,0 +1,17 @@
+export { default as Dialog } from './Dialog.vue'
+export { default as DialogContent } from './DialogContent.vue'
+export { default as DialogDescription } from './DialogDescription.vue'
+export { default as DialogFooter } from './DialogFooter.vue'
+export { default as DialogHeader } from './DialogHeader.vue'
+export { default as DialogTitle } from './DialogTitle.vue'
+export { default as DialogTrigger } from './DialogTrigger.vue'
+
+export type {
+  DialogRootEmits,
+  DialogRootProps,
+  DialogOverlayProps,
+  DialogPortalProps,
+  DialogContentProps,
+  DialogTitleProps,
+  DialogTriggerProps,
+} from 'radix-vue'