vndangkhoa/apix
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: Resolve JSX syntax error in PromptHero.tsx and restore mobile toolbar layout
Some checks are pending
CI / build (18.x) (push) Waiting to run
Details
CI / build (20.x) (push) Waiting to run
Details

Browse source
This commit is contained in:
Khoa Vo 2026-01-07 21:18:01 +07:00
parent d8cb0fb176
commit e784d89873
1 changed files with 182 additions and 120 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
components/PromptHero.tsx
View file

@ -538,12 +538,74 @@ export function PromptHero() {
/>
</div>
{/* Controls Area */}
<div className="flex flex-col md:flex-row items-center justify-between gap-3 pt-1">
{/* Left Controls: References */}
{/* For Meta AI: Only Subject is enabled (for video generation), Scene/Style disabled */}
<div className="flex items-center gap-2 w-full md:w-auto overflow-x-auto md:overflow-visible pb-2 md:pb-0 scrollbar-none">
{((settings.provider === 'meta'
? ['subject']
: ['subject', 'scene', 'style']) as ReferenceCategory[]).map((cat) => {
const refs = references[cat] || [];
const hasRefs = refs.length > 0;
const isUploading = uploadingRefs[cat];
return (
<div key={cat} className="relative group flex-shrink-0">
<button
onClick={() => toggleReference(cat)}
onDragOver={handleDragOver}
onDrop={(e) => handleDrop(e, cat)}
title={settings.provider === 'meta' && cat === 'subject'
? "Upload image to animate into video"
: undefined}
className={cn(
"flex items-center gap-1.5 rounded-lg px-3 py-2 md:px-3 md:py-1.5 text-xs md:text-[10px] font-medium transition-all border relative overflow-hidden min-h-[44px] md:min-h-0",
hasRefs
? "bg-purple-500/10 text-purple-200 border-purple-500/30 hover:bg-purple-500/20"
: "bg-white/5 text-white/40 border-white/5 hover:bg-white/10 hover:text-white/70 hover:border-white/10",
isUploading && "animate-pulse cursor-wait"
)}
>
{isUploading ? (
<div className="h-3 w-3 animate-spin rounded-full border-2 border-current border-t-transparent" />
) : hasRefs ? (
<div className="flex -space-x-1.5">
{refs.slice(0, 4).map((ref, idx) => (
<img
key={ref.id}
src={ref.thumbnail}
alt=""
className="h-4 w-4 rounded-sm object-cover ring-1 ring-white/20"
style={{ zIndex: 10 - idx }}
/>
))}
</div>
) : (
<Upload className="h-3 w-3" />
)}
<span className="capitalize tracking-wide">{cat}</span>
{refs.length > 0 && (
<span className="text-[9px] bg-purple-500/30 text-purple-100 rounded-full px-1.5 h-3 flex items-center">{refs.length}</span>
)}
</button>
{/* Clear all button */}
{hasRefs && !isUploading && (
<button
className="absolute -top-1 -right-1 z-10 p-0.5 rounded-full bg-red-500/80 text-white opacity-100 md:opacity-0 group-hover:opacity-100 transition-opacity hover:bg-red-500"
onClick={(e) => { e.stopPropagation(); clearReferences(cat); }}
title={`Clear all ${cat} references`}
>
<X className="h-2 w-2" />
</button>
)}
</div>
);
})}
</div>
{/* Hidden file inputs for upload */ }
{/* Hidden file inputs for upload */}
<input
type="file"
ref={fileInputRefs.subject}
@ -571,7 +633,7 @@ export function PromptHero() {
{/* Right Controls: Settings & Generate */ }
{/* Right Controls: Settings & Generate */}
<div className="flex flex-col md:flex-row items-center gap-3 w-full md:w-auto md:ml-auto">
{/* Settings Group */}
@ -651,7 +713,7 @@ export function PromptHero() {
</div>
</div >
{/* Reference Preview Panel - shows when any references exist */ }
{/* Reference Preview Panel - shows when any references exist */}
{
(references.subject?.length || references.scene?.length || references.style?.length) ? (
<div className="mt-4 p-3 rounded-xl bg-white/5 border border-white/10">