feat: anchor header/footer, editable header buttons, campaign management, image uploads, badge font customization, and brevo export fix
This commit is contained in:
Jakub_Hostacny committed
1 parent
3dc5778155
commit
2b4d3643cb
10 files changed
+1819
-178
No files matched your search
@@ -1,12 +1,16 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
Download,
|
||||
Send,
|
||||
ExternalLink,
|
||||
CheckCircle2,
|
||||
Plus
|
||||
Plus,
|
||||
FolderOpen,
|
||||
Save,
|
||||
Copy,
|
||||
Edit2
|
||||
} from 'lucide-react';
|
||||
import { NewsletterCampaign } from '@/types/newsletter';
|
||||
|
||||
@@ -14,10 +18,14 @@ interface TopBarProps {
|
||||
campaign: NewsletterCampaign;
|
||||
isSaving: boolean;
|
||||
onSave: () => void;
|
||||
onUpdateTitle: (title: string) => void;
|
||||
onOpenSavedCampaigns: () => void;
|
||||
onDuplicateCampaign: () => void;
|
||||
onExportZip: () => void;
|
||||
onExportBrevo: () => void;
|
||||
isExportingBrevo: boolean;
|
||||
brevoCampaignUrl?: string | null;
|
||||
brevoListingUrl?: string | null;
|
||||
onAddModule: (type: any) => void;
|
||||
}
|
||||
|
||||
@@ -25,81 +33,156 @@ export const TopBar: React.FC<TopBarProps> = ({
|
||||
campaign,
|
||||
isSaving,
|
||||
onSave,
|
||||
onUpdateTitle,
|
||||
onOpenSavedCampaigns,
|
||||
onDuplicateCampaign,
|
||||
onExportZip,
|
||||
onExportBrevo,
|
||||
isExportingBrevo,
|
||||
brevoCampaignUrl,
|
||||
brevoListingUrl = 'https://app.brevo.com/campaigns/listing',
|
||||
onAddModule
|
||||
}) => {
|
||||
const [isEditingTitle, setIsEditingTitle] = useState(false);
|
||||
|
||||
return (
|
||||
<header className="h-16 bg-white border-b border-gray-200 px-6 flex items-center justify-between sticky top-0 z-30 shadow-xs">
|
||||
{/* Ľavá časť: Logo a stav */}
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-9 h-9 rounded-xl bg-[#e2001a] flex items-center justify-center text-white font-black text-sm shadow-sm tracking-tighter">
|
||||
COOP
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-sm font-bold text-gray-900 leading-tight">
|
||||
{campaign.title || 'COOP Jednota Newsletter'}
|
||||
</h1>
|
||||
<div className="flex items-center gap-2 mt-0.5">
|
||||
<span className="text-[11px] text-gray-500">
|
||||
{isSaving ? (
|
||||
<span className="text-amber-600 font-medium animate-pulse">Ukladám do Supabase...</span>
|
||||
) : (
|
||||
<span className="text-emerald-600 font-medium flex items-center gap-1">
|
||||
<CheckCircle2 className="w-3.5 h-3.5" /> Uložené v databáze (Auto-save)
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
<header className="h-16 bg-white border-b border-gray-200 px-4 md:px-6 flex items-center justify-between sticky top-0 z-30 shadow-xs">
|
||||
{/* Ľavá časť: Logo, Moje newslettre, Titulok a stav */}
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-9 h-9 rounded-xl bg-[#e2001a] flex items-center justify-center text-white font-black text-sm shadow-sm tracking-tighter shrink-0">
|
||||
COOP
|
||||
</div>
|
||||
|
||||
{/* Tlačidlo Moje newslettre */}
|
||||
<button
|
||||
onClick={onOpenSavedCampaigns}
|
||||
className="flex items-center gap-1.5 text-xs font-bold text-gray-700 bg-gray-100 hover:bg-gray-200 px-3 py-1.5 rounded-xl border border-gray-200 transition-colors shadow-xs"
|
||||
title="Otvoriť, duplikovať alebo vytvoriť nový newsletter"
|
||||
>
|
||||
<FolderOpen className="w-3.5 h-3.5 text-blue-600" />
|
||||
<span className="hidden sm:inline">Moje newslettre</span>
|
||||
</button>
|
||||
|
||||
<div className="h-6 w-px bg-gray-200 mx-1 hidden sm:block" />
|
||||
|
||||
{/* Názov kampane */}
|
||||
<div className="flex flex-col">
|
||||
{isEditingTitle ? (
|
||||
<input
|
||||
type="text"
|
||||
autoFocus
|
||||
value={campaign.title || ''}
|
||||
onChange={(e) => onUpdateTitle(e.target.value)}
|
||||
onBlur={() => setIsEditingTitle(false)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') setIsEditingTitle(false);
|
||||
}}
|
||||
className="text-xs font-bold text-gray-900 border border-blue-400 rounded px-2 py-0.5 outline-none bg-blue-50/50 w-56"
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
onClick={() => setIsEditingTitle(true)}
|
||||
className="group flex items-center gap-1.5 cursor-pointer"
|
||||
title="Kliknite pre úpravu názvu"
|
||||
>
|
||||
<h1 className="text-xs md:text-sm font-bold text-gray-900 leading-tight max-w-[200px] md:max-w-xs truncate group-hover:text-blue-600">
|
||||
{campaign.title || 'COOP Jednota Newsletter'}
|
||||
</h1>
|
||||
<Edit2 className="w-3 h-3 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-2 mt-0.5">
|
||||
<span className="text-[10px] text-gray-500">
|
||||
{isSaving ? (
|
||||
<span className="text-amber-600 font-medium animate-pulse">Ukladám...</span>
|
||||
) : (
|
||||
<span className="text-emerald-600 font-medium flex items-center gap-1">
|
||||
<CheckCircle2 className="w-3 h-3" /> Uložené
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Pridanie sekcie */}
|
||||
<div className="hidden md:flex items-center gap-2 ml-6 pl-6 border-l border-gray-200">
|
||||
<div className="hidden lg:flex items-center gap-2 ml-4 pl-4 border-l border-gray-200">
|
||||
<button
|
||||
onClick={() => onAddModule('banner')}
|
||||
className="text-xs font-bold text-gray-700 bg-gray-100 hover:bg-gray-200 px-3 py-1.5 rounded-lg flex items-center gap-1.5 transition-colors"
|
||||
className="text-[11px] font-bold text-gray-700 bg-gray-50 hover:bg-gray-100 border border-gray-200 px-2.5 py-1 rounded-lg flex items-center gap-1 transition-colors"
|
||||
>
|
||||
<Plus className="w-3.5 h-3.5 text-gray-500" /> Nový Banner
|
||||
<Plus className="w-3 h-3 text-gray-500" /> Nový Banner
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onAddModule('products_grid')}
|
||||
className="text-xs font-bold text-gray-700 bg-gray-100 hover:bg-gray-200 px-3 py-1.5 rounded-lg flex items-center gap-1.5 transition-colors"
|
||||
className="text-[11px] font-bold text-gray-700 bg-gray-50 hover:bg-gray-100 border border-gray-200 px-2.5 py-1 rounded-lg flex items-center gap-1 transition-colors"
|
||||
>
|
||||
<Plus className="w-3.5 h-3.5 text-gray-500" /> Produktový rad
|
||||
<Plus className="w-3 h-3 text-gray-500" /> Produktový rad
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Pravá časť: Export do ZIP a Brevo */}
|
||||
<div className="flex items-center gap-3">
|
||||
{/* Pravá časť: Uložiť, Duplikovať, Export do ZIP a Brevo */}
|
||||
<div className="flex items-center gap-2">
|
||||
{/* Tlačidlo manuálneho uloženia */}
|
||||
<button
|
||||
onClick={onSave}
|
||||
disabled={isSaving}
|
||||
className="flex items-center gap-1.5 text-xs font-bold text-gray-700 bg-white border border-gray-200 hover:bg-gray-50 disabled:opacity-50 px-3 py-1.5 rounded-xl transition-all shadow-xs"
|
||||
title="Uložiť zmeny ihneď do databázy"
|
||||
>
|
||||
<Save className="w-3.5 h-3.5 text-gray-600" />
|
||||
<span className="hidden md:inline">Uložiť</span>
|
||||
</button>
|
||||
|
||||
{/* Tlačidlo duplikovania celej kampane */}
|
||||
<button
|
||||
onClick={onDuplicateCampaign}
|
||||
className="flex items-center gap-1.5 text-xs font-bold text-gray-700 bg-white border border-gray-200 hover:bg-gray-50 px-3 py-1.5 rounded-xl transition-all shadow-xs"
|
||||
title="Vytvoriť kópiu tohto newslettera"
|
||||
>
|
||||
<Copy className="w-3.5 h-3.5 text-gray-600" />
|
||||
<span className="hidden md:inline">Duplikovať</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={onExportZip}
|
||||
className="flex items-center gap-1.5 text-xs font-bold text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 px-4 py-2 rounded-xl transition-all shadow-xs hover:shadow-sm"
|
||||
className="flex items-center gap-1.5 text-xs font-bold text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 px-3.5 py-1.5 rounded-xl transition-all shadow-xs"
|
||||
>
|
||||
<Download className="w-4 h-4 text-gray-600" /> Export ZIP
|
||||
<Download className="w-3.5 h-3.5 text-gray-600" />
|
||||
<span className="hidden sm:inline">Export ZIP</span>
|
||||
</button>
|
||||
|
||||
{brevoCampaignUrl ? (
|
||||
<a
|
||||
href={brevoCampaignUrl}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="flex items-center gap-1.5 text-xs font-bold text-emerald-700 bg-emerald-50 border border-emerald-300 hover:bg-emerald-100 px-4 py-2 rounded-xl transition-all shadow-xs"
|
||||
>
|
||||
<ExternalLink className="w-4 h-4" /> Otvoriť v Brevo
|
||||
</a>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<a
|
||||
href={brevoCampaignUrl}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="flex items-center gap-1.5 text-xs font-bold text-white bg-emerald-600 hover:bg-emerald-700 px-3.5 py-1.5 rounded-xl transition-all shadow-xs"
|
||||
title="Upraviť a odoslať kampaň priamo v Brevo"
|
||||
>
|
||||
<ExternalLink className="w-3.5 h-3.5" />
|
||||
<span>Upraviť v Brevo</span>
|
||||
</a>
|
||||
<a
|
||||
href={brevoListingUrl || 'https://app.brevo.com/campaigns/listing'}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="hidden lg:flex items-center gap-1 text-[11px] font-bold text-emerald-800 bg-emerald-100 hover:bg-emerald-200 px-2.5 py-1.5 rounded-xl transition-all"
|
||||
title="Prehľad všetkých e-mailových kampaní v Brevo"
|
||||
>
|
||||
Zoznam
|
||||
</a>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
onClick={onExportBrevo}
|
||||
disabled={isExportingBrevo}
|
||||
className="flex items-center gap-1.5 text-xs font-bold text-white bg-[#003399] hover:bg-blue-800 disabled:opacity-50 px-4 py-2 rounded-xl transition-all shadow-xs"
|
||||
className="flex items-center gap-1.5 text-xs font-bold text-white bg-[#003399] hover:bg-blue-800 disabled:opacity-50 px-3.5 py-1.5 rounded-xl transition-all shadow-xs"
|
||||
>
|
||||
<Send className="w-4 h-4" />
|
||||
{isExportingBrevo ? 'Odosielam...' : 'Odoslať do Brevo'}
|
||||
<Send className="w-3.5 h-3.5" />
|
||||
<span>{isExportingBrevo ? 'Odosielam...' : 'Odoslať do Brevo'}</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user