TowstyandCursor
755aaeede8
Video and Image pickers, thumbwheels, aspect icons, and a Scale to MP paddle; extra prompts default to batch so each run starts from the original image. Co-authored-by: Cursor <cursoragent@cursor.com>
43 lines
2.0 KiB
Vue
43 lines
2.0 KiB
Vue
<template>
|
|
<div>
|
|
<p v-if="heading" class="mb-2 text-xs uppercase tracking-wider text-zinc-500">{{ heading }}</p>
|
|
<div class="grid grid-cols-2 gap-2 lg:grid-cols-4">
|
|
<button
|
|
v-for="option in options"
|
|
:key="option.id"
|
|
type="button"
|
|
class="rounded-xl border px-3 py-2.5 text-left text-sm transition"
|
|
:class="model === option.id ? 'border-amber-300 bg-amber-400/10 text-amber-100' : 'border-white/10 text-zinc-200 hover:border-white/20'"
|
|
@click="model = option.id"
|
|
>
|
|
<span class="mb-1.5 flex h-8 items-center" aria-hidden="true">
|
|
<svg v-if="option.id === 'auto'" class="h-7 w-10" viewBox="0 0 40 28" fill="none">
|
|
<rect x="11" y="8" width="18" height="12" rx="1.5" stroke="currentColor" stroke-width="1.75" stroke-dasharray="2.5 2" />
|
|
<path d="M5 9V4h5M35 9V4h-5M5 19v5h5M35 19v5h-5" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" />
|
|
</svg>
|
|
<svg v-else-if="option.id === '16:9'" class="h-7 w-10" viewBox="0 0 40 28" fill="none">
|
|
<rect x="2" y="8" width="36" height="13" rx="2.5" stroke="currentColor" stroke-width="1.75" />
|
|
</svg>
|
|
<svg v-else-if="option.id === '9:16'" class="h-7 w-10" viewBox="0 0 40 28" fill="none">
|
|
<rect x="14" y="2" width="12" height="24" rx="2.5" stroke="currentColor" stroke-width="1.75" />
|
|
</svg>
|
|
<svg v-else class="h-7 w-10" viewBox="0 0 40 28" fill="none">
|
|
<rect x="9" y="3" width="22" height="22" rx="2.5" stroke="currentColor" stroke-width="1.75" />
|
|
</svg>
|
|
</span>
|
|
<span class="block font-semibold leading-tight">{{ option.label }}</span>
|
|
<span class="mt-0.5 block text-[11px] leading-snug text-zinc-400">{{ option.hint }}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
defineProps<{
|
|
heading?: string
|
|
options: { id: string; label: string; hint: string }[]
|
|
}>()
|
|
|
|
const model = defineModel<string>({ required: true })
|
|
</script>
|