38 lines
1.3 KiB
Vue
38 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import Dropzone from '~/components/ui/dropzone/Dropzone.vue'
|
|
|
|
const files = ref<File[]>([])
|
|
|
|
const handleDrop = (acceptedFiles: File[], event: DragEvent) => {
|
|
console.log('Files dropped:', acceptedFiles)
|
|
}
|
|
|
|
const handleError = (error: Error) => {
|
|
console.error('Dropzone error:', error.message)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex-1">
|
|
<NuxtLayout name="default">
|
|
<template #header>
|
|
<Outline side="bottom" padding="dense" class="w-full">
|
|
<div class="flex gap-8 w-full items-center">
|
|
<SidebarTrigger :size="5" />
|
|
<h2 class="scroll-m-20 text-3xl font-semibold tracking-tight transition-colors first:mt-0">
|
|
Modify
|
|
</h2>
|
|
</div>
|
|
</Outline>
|
|
</template>
|
|
<div class="w-full">
|
|
<Dropzone :src="files" :accept="{
|
|
'image/*': ['.png', '.jpg', '.jpeg', '.gif']
|
|
}" :max-size="5 * 1024 * 1024" :min-size="1024" :max-files="3" @drop="handleDrop" @error="handleError"
|
|
class="w-full max-w-md" />
|
|
</div>
|
|
</NuxtLayout>
|
|
</div>
|
|
</template>
|