feat: daily timeline advanced UI and calendar integration
This commit is contained in:
@@ -28,56 +28,66 @@ export const GenerateZone: React.FC<GenerateZoneProps> = ({
|
||||
const canGenerate = !!selectedTemplate && !!selectedBrand;
|
||||
|
||||
return (
|
||||
<div className="bg-neutral-900/50 border border-neutral-800/50 rounded-2xl p-5">
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<div className="w-6 h-6 rounded-lg bg-gradient-to-br from-violet-600/20 to-fuchsia-600/20 flex items-center justify-center">
|
||||
<Sparkles size={14} className="text-violet-400" />
|
||||
<div className="bg-neutral-900/50 border border-neutral-800/50 rounded-2xl p-6 flex items-center justify-between gap-8">
|
||||
{/* Left: Info */}
|
||||
<div className="flex flex-col gap-1.5 shrink-0 min-w-[220px]">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-violet-600/20 to-fuchsia-600/20 flex items-center justify-center border border-violet-500/20 shadow-inner">
|
||||
<Sparkles size={18} className="text-violet-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-base font-bold text-white">Generar contenido</h2>
|
||||
<p className="text-xs text-neutral-500 mt-0.5">
|
||||
Arrastra una plantilla y una marca
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<h2 className="text-sm font-bold text-white">Generar contenido</h2>
|
||||
</div>
|
||||
<p className="text-[11px] text-neutral-500 mb-5 ml-8">
|
||||
Arrastra una plantilla y una marca, o toca para elegir.
|
||||
</p>
|
||||
|
||||
{/* Slots row */}
|
||||
<div className="flex items-center gap-3">
|
||||
{/* Middle: Slots row */}
|
||||
<div className="flex items-center justify-center gap-6 flex-1 max-w-[800px]">
|
||||
{/* Template slot */}
|
||||
<DropSlot
|
||||
type="template"
|
||||
item={selectedTemplate}
|
||||
onClear={onClearTemplate}
|
||||
onClick={onClickTemplateSlot}
|
||||
/>
|
||||
<div className="flex-1 max-w-[320px]">
|
||||
<DropSlot
|
||||
type="template"
|
||||
item={selectedTemplate}
|
||||
onClear={onClearTemplate}
|
||||
onClick={onClickTemplateSlot}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* × separator */}
|
||||
<div className="shrink-0 flex items-center justify-center">
|
||||
<span className="text-xl font-bold text-neutral-600 select-none">×</span>
|
||||
<span className="text-2xl font-bold text-neutral-700 select-none">×</span>
|
||||
</div>
|
||||
|
||||
{/* Brand slot */}
|
||||
<DropSlot
|
||||
type="brand"
|
||||
item={selectedBrand}
|
||||
onClear={onClearBrand}
|
||||
onClick={onClickBrandSlot}
|
||||
/>
|
||||
<div className="flex-1 max-w-[320px]">
|
||||
<DropSlot
|
||||
type="brand"
|
||||
item={selectedBrand}
|
||||
onClear={onClearBrand}
|
||||
onClick={onClickBrandSlot}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Generate button */}
|
||||
{/* Right: Generate button */}
|
||||
<div className="shrink-0">
|
||||
<button
|
||||
onClick={onGenerate}
|
||||
disabled={!canGenerate}
|
||||
title={canGenerate ? 'Generar contenido con esta plantilla y marca' : 'Selecciona una plantilla y una marca primero'}
|
||||
className={`
|
||||
shrink-0 flex items-center gap-2 px-6 py-4 rounded-xl font-bold text-sm transition-all duration-200
|
||||
flex items-center justify-center gap-3 px-8 py-5 rounded-xl font-bold text-base transition-all duration-300 min-w-[200px]
|
||||
${canGenerate
|
||||
? 'bg-gradient-to-r from-violet-600 to-fuchsia-600 hover:from-violet-500 hover:to-fuchsia-500 text-white shadow-lg shadow-violet-900/30 hover:shadow-violet-900/50 hover:scale-[1.02] active:scale-[0.98]'
|
||||
: 'bg-neutral-800/50 text-neutral-600 cursor-not-allowed border border-neutral-800'
|
||||
? 'bg-gradient-to-r from-violet-600 to-fuchsia-600 hover:from-violet-500 hover:to-fuchsia-500 text-white shadow-xl shadow-violet-900/40 hover:shadow-violet-900/60 hover:scale-[1.03] active:scale-[0.98]'
|
||||
: 'bg-neutral-800/50 text-neutral-600 cursor-not-allowed border border-neutral-800/80'
|
||||
}
|
||||
`}
|
||||
>
|
||||
Generar
|
||||
<ArrowRight size={16} />
|
||||
<ArrowRight size={18} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user