344 lines
20 KiB
TypeScript
344 lines
20 KiB
TypeScript
"use client";
|
|
|
|
import { useMemo, useState } from "react";
|
|
import type { MediaFile } from "@/lib/admin/media";
|
|
import type { ContentDocuments, ContentKey, LinkContent, PageContent, ServiceContent, TextBlockContent } from "@/lib/content/types";
|
|
|
|
type Viewport = "desktop" | "tablet" | "mobile";
|
|
type ContentTabId = ContentKey | "footer" | "global-seo" | "general-settings";
|
|
|
|
const tabs: Array<{ id: ContentTabId; key: ContentKey; label: string }> = [
|
|
{ id: "home", key: "home", label: "Startseite" },
|
|
{ id: "services", key: "services", label: "Leistungen" },
|
|
{ id: "radio-service", key: "radio-service", label: "Funkgeräte-Service" },
|
|
{ id: "about", key: "about", label: "Über Uns" },
|
|
{ id: "contact", key: "contact", label: "Kontakt" },
|
|
{ id: "footer", key: "settings", label: "Footer" },
|
|
{ id: "global-seo", key: "settings", label: "SEO" },
|
|
{ id: "general-settings", key: "settings", label: "Allgemeine Einstellungen" },
|
|
];
|
|
|
|
type Props = {
|
|
initialContent: ContentDocuments;
|
|
mediaFiles: MediaFile[];
|
|
};
|
|
|
|
type ApiResponse<K extends ContentKey> = {
|
|
message?: string;
|
|
content?: ContentDocuments[K];
|
|
};
|
|
|
|
function linesToText(lines: string[]) {
|
|
return lines.join("\n");
|
|
}
|
|
|
|
function textToLines(value: string) {
|
|
return value.split("\n").map((line) => line.trim()).filter(Boolean);
|
|
}
|
|
|
|
function updateLink(link: LinkContent, field: keyof LinkContent, value: string): LinkContent {
|
|
return { ...link, [field]: value };
|
|
}
|
|
|
|
function TextInput({ label, value, onChange }: { label: string; value: string; onChange: (value: string) => void }) {
|
|
return (
|
|
<label>
|
|
{label}
|
|
<input value={value} onChange={(event) => onChange(event.target.value)} />
|
|
</label>
|
|
);
|
|
}
|
|
|
|
function TextArea({ label, value, onChange, rows = 4 }: { label: string; value: string; rows?: number; onChange: (value: string) => void }) {
|
|
return (
|
|
<label>
|
|
{label}
|
|
<textarea rows={rows} value={value} onChange={(event) => onChange(event.target.value)} />
|
|
</label>
|
|
);
|
|
}
|
|
|
|
function ImageSelect({ label, value, mediaFiles, onChange }: { label: string; value: string; mediaFiles: MediaFile[]; onChange: (value: string) => void }) {
|
|
const images = mediaFiles.filter((file) => file.isImage);
|
|
|
|
return (
|
|
<label>
|
|
{label}
|
|
<select value={value} onChange={(event) => onChange(event.target.value)}>
|
|
<option value="/funktechnik_schubert_logo.jpg">Standard-Logo</option>
|
|
<option value="/workbench-signal.svg">Standard-Hintergrund</option>
|
|
{images.map((file) => <option key={file.name} value={file.url}>{file.name}</option>)}
|
|
</select>
|
|
</label>
|
|
);
|
|
}
|
|
|
|
function SectionTitle({ children }: { children: string }) {
|
|
return <h3 className="content-editor-heading">{children}</h3>;
|
|
}
|
|
|
|
function BlocksEditor({ blocks, onChange }: { blocks: TextBlockContent[]; onChange: (blocks: TextBlockContent[]) => void }) {
|
|
function update(index: number, field: keyof TextBlockContent, value: string) {
|
|
onChange(blocks.map((block, current) => current === index ? { ...block, [field]: value } : block));
|
|
}
|
|
|
|
return (
|
|
<div className="content-repeaters">
|
|
{blocks.map((block, index) => (
|
|
<div key={index} className="content-repeater">
|
|
<TextInput label="Titel" value={block.title} onChange={(value) => update(index, "title", value)} />
|
|
<TextArea label="Text" value={block.text} onChange={(value) => update(index, "text", value)} />
|
|
<button className="button light" type="button" onClick={() => onChange(blocks.filter((_, current) => current !== index))}>Entfernen</button>
|
|
</div>
|
|
))}
|
|
<button className="button light" type="button" onClick={() => onChange([...blocks, { title: "", text: "" }])}>Block hinzufügen</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function PageFields({ page, mediaFiles, onChange }: { page: PageContent; mediaFiles: MediaFile[]; onChange: (page: PageContent) => void }) {
|
|
return (
|
|
<>
|
|
<SectionTitle>Hero</SectionTitle>
|
|
<div className="content-field-grid">
|
|
<TextInput label="Titel" value={page.title} onChange={(value) => onChange({ ...page, title: value })} />
|
|
<TextInput label="Untertitel" value={page.subtitle} onChange={(value) => onChange({ ...page, subtitle: value })} />
|
|
<TextInput label="Eyebrow" value={page.eyebrow} onChange={(value) => onChange({ ...page, eyebrow: value })} />
|
|
<TextArea label="Hero Text" value={page.heroText} onChange={(value) => onChange({ ...page, heroText: value })} />
|
|
</div>
|
|
<SectionTitle>Inhalt</SectionTitle>
|
|
<TextArea label="Einleitung" value={page.intro} onChange={(value) => onChange({ ...page, intro: value })} />
|
|
<TextArea label="Listenpunkte, eine Zeile pro Eintrag" value={linesToText(page.list)} onChange={(value) => onChange({ ...page, list: textToLines(value) })} />
|
|
<BlocksEditor blocks={page.paragraphs} onChange={(paragraphs) => onChange({ ...page, paragraphs })} />
|
|
<SectionTitle>Call-To-Action</SectionTitle>
|
|
<div className="content-field-grid">
|
|
<TextInput label="CTA Text" value={page.cta.text} onChange={(value) => onChange({ ...page, cta: { ...page.cta, text: value } })} />
|
|
<TextInput label="Button 1 Text" value={page.cta.primary.label} onChange={(value) => onChange({ ...page, cta: { ...page.cta, primary: updateLink(page.cta.primary, "label", value) } })} />
|
|
<TextInput label="Button 1 Link" value={page.cta.primary.href} onChange={(value) => onChange({ ...page, cta: { ...page.cta, primary: updateLink(page.cta.primary, "href", value) } })} />
|
|
<TextInput label="Button 2 Text" value={page.cta.secondary.label} onChange={(value) => onChange({ ...page, cta: { ...page.cta, secondary: updateLink(page.cta.secondary, "label", value) } })} />
|
|
<TextInput label="Button 2 Link" value={page.cta.secondary.href} onChange={(value) => onChange({ ...page, cta: { ...page.cta, secondary: updateLink(page.cta.secondary, "href", value) } })} />
|
|
</div>
|
|
<SectionTitle>SEO</SectionTitle>
|
|
<div className="content-field-grid">
|
|
<TextInput label="Meta Title" value={page.seo.metaTitle} onChange={(value) => onChange({ ...page, seo: { ...page.seo, metaTitle: value } })} />
|
|
<TextInput label="Meta Description" value={page.seo.metaDescription} onChange={(value) => onChange({ ...page, seo: { ...page.seo, metaDescription: value } })} />
|
|
<TextInput label="Keywords" value={page.seo.keywords} onChange={(value) => onChange({ ...page, seo: { ...page.seo, keywords: value } })} />
|
|
<TextInput label="OpenGraph Titel" value={page.seo.openGraphTitle} onChange={(value) => onChange({ ...page, seo: { ...page.seo, openGraphTitle: value } })} />
|
|
<TextInput label="OpenGraph Beschreibung" value={page.seo.openGraphDescription} onChange={(value) => onChange({ ...page, seo: { ...page.seo, openGraphDescription: value } })} />
|
|
<ImageSelect label="Social Image" value={page.seo.socialImage} mediaFiles={mediaFiles} onChange={(value) => onChange({ ...page, seo: { ...page.seo, socialImage: value } })} />
|
|
<TextInput label="Canonical URL" value={page.seo.canonicalUrl} onChange={(value) => onChange({ ...page, seo: { ...page.seo, canonicalUrl: value } })} />
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function ServicesEditor({ services, onChange }: { services: ServiceContent[]; onChange: (services: ServiceContent[]) => void }) {
|
|
function update(index: number, field: keyof ServiceContent, value: string | number | boolean) {
|
|
onChange(services.map((service, current) => current === index ? { ...service, [field]: value } : service));
|
|
}
|
|
|
|
return (
|
|
<div className="content-repeaters">
|
|
{services.map((service, index) => (
|
|
<div key={index} className="content-repeater">
|
|
<div className="content-field-grid">
|
|
<TextInput label="Titel" value={service.title} onChange={(value) => update(index, "title", value)} />
|
|
<TextInput label="Icon" value={service.icon} onChange={(value) => update(index, "icon", value)} />
|
|
<label>
|
|
Sortierung
|
|
<input type="number" value={service.sortOrder} onChange={(event) => update(index, "sortOrder", Number(event.target.value))} />
|
|
</label>
|
|
<label className="admin-checkbox">
|
|
<input type="checkbox" checked={service.visible} onChange={(event) => update(index, "visible", event.target.checked)} />
|
|
Einblenden
|
|
</label>
|
|
</div>
|
|
<TextArea label="Beschreibung" value={service.description} onChange={(value) => update(index, "description", value)} />
|
|
<button className="button light" type="button" onClick={() => onChange(services.filter((_, current) => current !== index))}>Leistung entfernen</button>
|
|
</div>
|
|
))}
|
|
<button className="button light" type="button" onClick={() => onChange([...services, { title: "", description: "", icon: "radio", sortOrder: services.length * 10 + 10, visible: true }])}>Leistung hinzufügen</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function ContentManager({ initialContent, mediaFiles }: Props) {
|
|
const [content, setContent] = useState(initialContent);
|
|
const [activeTab, setActiveTab] = useState<ContentTabId>("home");
|
|
const [viewport, setViewport] = useState<Viewport>("desktop");
|
|
const [message, setMessage] = useState("");
|
|
const [error, setError] = useState("");
|
|
const [pending, setPending] = useState(false);
|
|
|
|
const active = tabs.find((tab) => tab.id === activeTab)?.key ?? "home";
|
|
const current = content[active];
|
|
const activeLabel = useMemo(() => tabs.find((tab) => tab.id === activeTab)?.label ?? active, [active, activeTab]);
|
|
|
|
function update<K extends ContentKey>(key: K, value: ContentDocuments[K]) {
|
|
setContent((previous) => ({ ...previous, [key]: value }));
|
|
}
|
|
|
|
async function save() {
|
|
setPending(true);
|
|
setMessage("");
|
|
setError("");
|
|
|
|
try {
|
|
const response = await fetch("/api/admin/content", {
|
|
method: "PUT",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ key: active, content: current }),
|
|
});
|
|
const result = await response.json() as ApiResponse<typeof active>;
|
|
if (!response.ok || !result.content) throw new Error(result.message ?? "Inhalt konnte nicht gespeichert werden.");
|
|
update(active, result.content);
|
|
setMessage(result.message ?? "Inhalt gespeichert.");
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : "Inhalt konnte nicht gespeichert werden.");
|
|
} finally {
|
|
setPending(false);
|
|
}
|
|
}
|
|
|
|
const pagePreview = "title" in current ? current : content.home;
|
|
|
|
return (
|
|
<div className="content-manager">
|
|
{message && <p className="success admin-message">{message}</p>}
|
|
{error && <p className="error admin-message">{error}</p>}
|
|
<section className="admin-card content-editor-layout">
|
|
<aside className="content-tabs" aria-label="Website-Inhalte">
|
|
{tabs.map((tab, index) => (
|
|
<button key={`${tab.label}-${index}`} type="button" aria-current={activeTab === tab.id ? "page" : undefined} onClick={() => setActiveTab(tab.id)}>
|
|
{tab.label}
|
|
</button>
|
|
))}
|
|
</aside>
|
|
<div className="content-editor">
|
|
<div className="content-editor-top">
|
|
<div>
|
|
<p className="eyebrow">Editor</p>
|
|
<h2>{activeLabel}</h2>
|
|
</div>
|
|
<button className="button" type="button" onClick={save} disabled={pending}>{pending ? "Speichert..." : "Speichern"}</button>
|
|
</div>
|
|
|
|
{"title" in current && (
|
|
<PageFields page={current} mediaFiles={mediaFiles} onChange={(value) => update(active, value as ContentDocuments[typeof active])} />
|
|
)}
|
|
|
|
{active === "home" && (
|
|
<>
|
|
<SectionTitle>Homepage Builder</SectionTitle>
|
|
<TextArea label="Badges, eine Zeile pro Eintrag" value={linesToText(content.home.badges)} onChange={(value) => update("home", { ...content.home, badges: textToLines(value) })} />
|
|
<h4>3 Featureboxen</h4>
|
|
<BlocksEditor blocks={content.home.features} onChange={(features) => update("home", { ...content.home, features })} />
|
|
<h4>3 Leistungsboxen</h4>
|
|
<BlocksEditor blocks={content.home.services} onChange={(services) => update("home", { ...content.home, services })} />
|
|
<h4>Kundenversprechen</h4>
|
|
<TextInput label="Headline" value={content.home.promise.title} onChange={(value) => update("home", { ...content.home, promise: { ...content.home.promise, title: value } })} />
|
|
<TextArea label="Text" value={content.home.promise.text} onChange={(value) => update("home", { ...content.home, promise: { ...content.home.promise, text: value } })} />
|
|
<TextArea label="Punkte, eine Zeile pro Eintrag" value={linesToText(content.home.promise.bullets)} onChange={(value) => update("home", { ...content.home, promise: { ...content.home.promise, bullets: textToLines(value) } })} />
|
|
<TextArea label="Footer-Text" value={content.home.footerText} onChange={(value) => update("home", { ...content.home, footerText: value })} />
|
|
</>
|
|
)}
|
|
|
|
{active === "services" && (
|
|
<>
|
|
<SectionTitle>Leistungen</SectionTitle>
|
|
<ServicesEditor services={content.services.services} onChange={(services) => update("services", { ...content.services, services })} />
|
|
</>
|
|
)}
|
|
|
|
{active === "radio-service" && (
|
|
<>
|
|
<SectionTitle>Funkgeräte-Service</SectionTitle>
|
|
<TextArea label="Marken" value={linesToText(content["radio-service"].brands)} onChange={(value) => update("radio-service", { ...content["radio-service"], brands: textToLines(value) })} />
|
|
<TextArea label="Fehlerbilder" value={linesToText(content["radio-service"].symptoms)} onChange={(value) => update("radio-service", { ...content["radio-service"], symptoms: textToLines(value) })} />
|
|
<TextArea label="Ablauf" value={linesToText(content["radio-service"].workflow)} onChange={(value) => update("radio-service", { ...content["radio-service"], workflow: textToLines(value) })} />
|
|
<TextArea label="Messmöglichkeiten" value={linesToText(content["radio-service"].measurements)} onChange={(value) => update("radio-service", { ...content["radio-service"], measurements: textToLines(value) })} />
|
|
<TextArea label="Abgleich" value={content["radio-service"].alignment} onChange={(value) => update("radio-service", { ...content["radio-service"], alignment: value })} />
|
|
<TextArea label="Reparatur" value={content["radio-service"].repair} onChange={(value) => update("radio-service", { ...content["radio-service"], repair: value })} />
|
|
</>
|
|
)}
|
|
|
|
{active === "about" && (
|
|
<>
|
|
<SectionTitle>Über Uns</SectionTitle>
|
|
<TextArea label="Firmenbeschreibung" value={content.about.companyDescription} onChange={(value) => update("about", { ...content.about, companyDescription: value })} />
|
|
<TextArea label="Werkstattbeschreibung" value={content.about.workshopDescription} onChange={(value) => update("about", { ...content.about, workshopDescription: value })} />
|
|
<TextArea label="Philosophie" value={content.about.philosophy} onChange={(value) => update("about", { ...content.about, philosophy: value })} />
|
|
</>
|
|
)}
|
|
|
|
{active === "contact" && (
|
|
<>
|
|
<SectionTitle>Kontaktinformationen</SectionTitle>
|
|
<div className="content-field-grid">
|
|
<TextInput label="Telefon" value={content.contact.phone} onChange={(value) => update("contact", { ...content.contact, phone: value })} />
|
|
<TextInput label="E-Mail" value={content.contact.email} onChange={(value) => update("contact", { ...content.contact, email: value })} />
|
|
<TextInput label="Adresse" value={content.contact.address} onChange={(value) => update("contact", { ...content.contact, address: value })} />
|
|
<TextInput label="Öffnungszeiten" value={content.contact.openingHours} onChange={(value) => update("contact", { ...content.contact, openingHours: value })} />
|
|
<TextInput label="Google Maps Link" value={content.contact.googleMapsLink} onChange={(value) => update("contact", { ...content.contact, googleMapsLink: value })} />
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{activeTab === "footer" && (
|
|
<>
|
|
<SectionTitle>Footer und Einstellungen</SectionTitle>
|
|
<div className="content-field-grid">
|
|
<ImageSelect label="Logo" value={content.settings.logoUrl} mediaFiles={mediaFiles} onChange={(value) => update("settings", { ...content.settings, logoUrl: value })} />
|
|
<TextInput label="Copyright" value={content.settings.copyright} onChange={(value) => update("settings", { ...content.settings, copyright: value })} />
|
|
</div>
|
|
<TextArea label="Kurztext" value={content.settings.footerShortText} onChange={(value) => update("settings", { ...content.settings, footerShortText: value })} />
|
|
</>
|
|
)}
|
|
|
|
{activeTab === "global-seo" && (
|
|
<>
|
|
<SectionTitle>Globale SEO</SectionTitle>
|
|
<div className="content-field-grid">
|
|
<TextInput label="Meta Title" value={content.settings.seo.metaTitle} onChange={(value) => update("settings", { ...content.settings, seo: { ...content.settings.seo, metaTitle: value } })} />
|
|
<TextInput label="Meta Description" value={content.settings.seo.metaDescription} onChange={(value) => update("settings", { ...content.settings, seo: { ...content.settings.seo, metaDescription: value } })} />
|
|
<ImageSelect label="Social Image" value={content.settings.seo.socialImage} mediaFiles={mediaFiles} onChange={(value) => update("settings", { ...content.settings, seo: { ...content.settings.seo, socialImage: value } })} />
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{activeTab === "general-settings" && (
|
|
<>
|
|
<SectionTitle>Allgemeine Einstellungen</SectionTitle>
|
|
<div className="content-field-grid">
|
|
<TextInput label="Site Name" value={content.settings.siteName} onChange={(value) => update("settings", { ...content.settings, siteName: value })} />
|
|
<TextInput label="Header CTA Text" value={content.settings.headerCta.label} onChange={(value) => update("settings", { ...content.settings, headerCta: updateLink(content.settings.headerCta, "label", value) })} />
|
|
<TextInput label="Header CTA Link" value={content.settings.headerCta.href} onChange={(value) => update("settings", { ...content.settings, headerCta: updateLink(content.settings.headerCta, "href", value) })} />
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</section>
|
|
|
|
<section className="admin-card content-preview-card">
|
|
<div className="content-preview-toolbar">
|
|
<h2>Live Preview</h2>
|
|
<div>
|
|
{(["desktop", "tablet", "mobile"] as const).map((item) => (
|
|
<button key={item} type="button" aria-current={viewport === item ? "true" : undefined} onClick={() => setViewport(item)}>{item}</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className={`content-preview ${viewport}`}>
|
|
<p className="eyebrow">{pagePreview.eyebrow}</p>
|
|
<h1>{pagePreview.title}</h1>
|
|
<p className="lead">{pagePreview.subtitle}</p>
|
|
<p>{pagePreview.heroText}</p>
|
|
<div className="hero-actions">
|
|
<span className="button">{pagePreview.cta.primary.label}</span>
|
|
<span className="button light">{pagePreview.cta.secondary.label}</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|