astral/buzz-sheet
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui) : simplify admin controls and artifact selection

Browse Source
This commit is contained in:
gunshiz
2026-10-14 22:39:53 +07:00 Unverified
parent d229cb3942
commit 024553b516
21 changed files with 148 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/admin/guide-overview-form.tsx
+4 -4
View File
@@ -86,11 +86,11 @@ function SortableVideoLink({ link, index, guideName, onChange, onRemove }: { lin
return (
<Field ref={setNodeRef} data-invalid={invalid} style={{ transform: CSS.Transform.toString(transform), transition }} className={cn("rounded-lg border p-3", isDragging && "relative z-10 opacity-70 shadow-lg")}>
<div className="flex items-center gap-2">
<Button type="button" variant="ghost" size="icon-sm" className="touch-none cursor-grab active:cursor-grabbing" aria-label={`จัดลำดับวิดีโอ ${index + 1}`} {...attributes} {...listeners}>
<Button type="button" variant="plain" size="icon-sm" className="touch-none cursor-grab active:cursor-grabbing" aria-label={`จัดลำดับวิดีโอ ${index + 1}`} {...attributes} {...listeners}>
<GripVerticalIcon data-icon="inline-start" />
</Button>
<FieldLabel htmlFor={`guide-youtube-url-${link.id}`} className="flex-1">YouTube video {index + 1}</FieldLabel>
<Button type="button" variant="ghost" size="icon-sm" onClick={onRemove} aria-label={`ลบวิดีโอ ${index + 1}`}>
<Button type="button" variant="plain" size="icon-sm" onClick={onRemove} aria-label={`ลบวิดีโอ ${index + 1}`}>
<Trash2Icon data-icon="inline-start" />
</Button>
</div>
@@ -110,7 +110,7 @@ function SortableBleedingLayer({ layer, onChange, onRemove }: { layer: BleedingL
const selectedMode = blendModeItems.find((mode) => mode.value === layer.blendMode);
return (
<div ref={setNodeRef} style={{ transform: CSS.Transform.toString(transform), transition }} className={cn("flex items-start gap-2 rounded-lg border bg-card p-3", isDragging && "relative z-10 opacity-70 shadow-lg")}>
<Button type="button" variant="ghost" size="icon-sm" className="touch-none cursor-grab active:cursor-grabbing" aria-label="จัดลำดับ Bleeding" {...attributes} {...listeners}><GripVerticalIcon data-icon="inline-start" /></Button>
<Button type="button" variant="plain" size="icon-sm" className="touch-none cursor-grab active:cursor-grabbing" aria-label="จัดลำดับ Bleeding" {...attributes} {...listeners}><GripVerticalIcon data-icon="inline-start" /></Button>
{layer.imageUrl ? <Image src={layer.imageUrl} alt="" width={48} height={48} className="size-12 rounded object-contain bg-muted" /> : <div className="size-12 rounded bg-muted" />}
<div className="flex min-w-0 flex-1 flex-col gap-3">
<Combobox
@@ -134,7 +134,7 @@ function SortableBleedingLayer({ layer, onChange, onRemove }: { layer: BleedingL
<Slider id={`bleeding-amount-${layer.id}`} min={0} max={100} step={5} value={[layer.amount]} onValueChange={(value) => onChange({ amount: typeof value === "number" ? value : value[0] ?? 0 })} />
</Field>
</div>
<Button type="button" variant="ghost" size="icon-sm" onClick={onRemove} aria-label="ลบ Bleeding"><Trash2Icon data-icon="inline-start" /></Button>
<Button type="button" variant="plain" size="icon-sm" onClick={onRemove} aria-label="ลบ Bleeding"><Trash2Icon data-icon="inline-start" /></Button>
</div>
);
}