96 lines
3.3 KiB
TypeScript
96 lines
3.3 KiB
TypeScript
import React from 'react';
|
||
import { Sparkles, ArrowRight } from 'lucide-react';
|
||
import { ExpressTemplate, CompanyProfile } from '../../types';
|
||
import { DropSlot } from './DropSlot';
|
||
|
||
interface GenerateZoneProps {
|
||
selectedTemplate: ExpressTemplate | null;
|
||
selectedBrand: CompanyProfile | null;
|
||
onClearTemplate: () => void;
|
||
onClearBrand: () => void;
|
||
onClickTemplateSlot: () => void;
|
||
onClickBrandSlot: () => void;
|
||
onGenerate: () => void;
|
||
}
|
||
|
||
/**
|
||
* GenerateZone — Bottom full-width area with two drop slots (Template × Brand) and a Generate button.
|
||
*/
|
||
export const GenerateZone: React.FC<GenerateZoneProps> = ({
|
||
selectedTemplate,
|
||
selectedBrand,
|
||
onClearTemplate,
|
||
onClearBrand,
|
||
onClickTemplateSlot,
|
||
onClickBrandSlot,
|
||
onGenerate,
|
||
}) => {
|
||
const canGenerate = !!selectedTemplate && !!selectedBrand;
|
||
|
||
return (
|
||
<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>
|
||
</div>
|
||
|
||
{/* Middle: Slots row */}
|
||
<div className="flex items-center justify-center gap-6 flex-1 max-w-[800px]">
|
||
{/* Template slot */}
|
||
<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-2xl font-bold text-neutral-700 select-none">×</span>
|
||
</div>
|
||
|
||
{/* Brand slot */}
|
||
<div className="flex-1 max-w-[320px]">
|
||
<DropSlot
|
||
type="brand"
|
||
item={selectedBrand}
|
||
onClear={onClearBrand}
|
||
onClick={onClickBrandSlot}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 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={`
|
||
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-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={18} />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|