feat: daily timeline advanced UI and calendar integration

This commit is contained in:
2026-06-03 04:08:13 -05:00
parent e944594e06
commit ad8622e243
34 changed files with 2088 additions and 788 deletions
+39 -29
View File
@@ -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>