67 lines
3.3 KiB
Vue
67 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
|
|
const urls = ref('');
|
|
|
|
const emit = defineEmits<{
|
|
submit: [urls: string[]];
|
|
}>();
|
|
|
|
const handleSubmit = () => {
|
|
const urlList = urls.value
|
|
.split('\n')
|
|
.map(url => url.trim())
|
|
.filter(url => url.length > 0);
|
|
if (urlList.length > 0) {
|
|
emit('submit', urlList);
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="bg-white rounded-[2rem] shadow-soft p-10 border border-slate-100/50">
|
|
<label class="block text-lg font-semibold text-slate-900 mb-4">Enter Video URL</label>
|
|
|
|
<div class="flex gap-4 items-start">
|
|
<div class="flex-1 relative group">
|
|
<div class="absolute left-4 top-4 text-slate-400 group-focus-within:text-accent transition-colors">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="12" cy="12" r="10" />
|
|
<path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
|
|
<path d="M2 12h20" />
|
|
</svg>
|
|
</div>
|
|
<textarea v-model="urls"
|
|
placeholder="Paste one or more links (one per line)... https://drive.google.com/file/..."
|
|
class="w-full pl-12 pr-4 py-4 h-32 bg-slate-50/50 border-2 border-slate-100 rounded-2xl focus:border-accent focus:bg-white focus:ring-0 transition-all resize-none text-slate-800 placeholder:text-slate-400 text-base leading-relaxed font-medium"></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-6 flex items-center justify-between">
|
|
<div class="flex items-center gap-2 text-sm text-slate-500 bg-slate-50 px-4 py-2 rounded-full">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="12" cy="12" r="10" />
|
|
<path d="M12 16v-4" />
|
|
<path d="M12 8h.01" />
|
|
</svg>
|
|
Auto-detect Google Drive, Dropbox
|
|
</div>
|
|
<button @click="handleSubmit"
|
|
class="px-8 py-3.5 bg-slate-900 hover:bg-black text-white font-medium rounded-xl shadow-xl shadow-slate-200/50 transition-all active:scale-95 flex items-center gap-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-yellow-300" viewBox="0 0 24 24"
|
|
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path
|
|
d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" />
|
|
<path d="M20 3v4" />
|
|
<path d="M22 5h-4" />
|
|
<path d="M4 17v2" />
|
|
<path d="M5 18H3" />
|
|
</svg>
|
|
Import & Upload Videos
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|