549 lines
21 KiB
TypeScript
549 lines
21 KiB
TypeScript
"use client";
|
|
|
|
/* eslint-disable @next/next/no-img-element */
|
|
|
|
import { MediaKind } from "@prisma/client";
|
|
import { FileText, ImageIcon, Search, Type } from "lucide-react";
|
|
import { useState } from "react";
|
|
|
|
import { MediaFieldPicker, type MediaFieldState } from "@/components/root/media-field-picker";
|
|
import { AppCard } from "@/components/ui/app-card";
|
|
import { CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import {
|
|
PAGE_TITLE_TOKEN,
|
|
SITE_NAME_TOKEN,
|
|
type SiteSettings,
|
|
type SiteSettingsMediaBindings,
|
|
} from "@/lib/site-settings";
|
|
import type { AppLocale } from "@/lib/locale";
|
|
import type { MediaOption } from "@/lib/media";
|
|
|
|
type SiteSettingsFormProps = {
|
|
action: (formData: FormData) => Promise<void>;
|
|
initialSettings: SiteSettings;
|
|
initialBindings: SiteSettingsMediaBindings;
|
|
mediaOptions: MediaOption[];
|
|
};
|
|
|
|
const localeFields: Array<{
|
|
key: AppLocale;
|
|
label: string;
|
|
suffix: "Ar" | "En" | "De";
|
|
sampleTitle: string;
|
|
}> = [
|
|
{
|
|
key: "ar",
|
|
label: "Arabic",
|
|
suffix: "Ar",
|
|
sampleTitle: "Home",
|
|
},
|
|
{
|
|
key: "en",
|
|
label: "English",
|
|
suffix: "En",
|
|
sampleTitle: "About",
|
|
},
|
|
{
|
|
key: "de",
|
|
label: "Deutsch",
|
|
suffix: "De",
|
|
sampleTitle: "Portfolio",
|
|
},
|
|
];
|
|
|
|
function createImageFieldState(
|
|
assetId: string | null | undefined,
|
|
url: string | null | undefined,
|
|
label: string,
|
|
): MediaFieldState {
|
|
if (assetId) {
|
|
return {
|
|
mode: "library",
|
|
assetId,
|
|
url: "",
|
|
label,
|
|
kind: MediaKind.IMAGE,
|
|
isCleared: false,
|
|
};
|
|
}
|
|
|
|
if (url) {
|
|
return {
|
|
mode: "external",
|
|
assetId: "",
|
|
url,
|
|
label,
|
|
kind: MediaKind.IMAGE,
|
|
isCleared: false,
|
|
};
|
|
}
|
|
|
|
return {
|
|
mode: "upload",
|
|
assetId: "",
|
|
url: "",
|
|
label,
|
|
kind: MediaKind.IMAGE,
|
|
isCleared: false,
|
|
};
|
|
}
|
|
|
|
function getMediaPreviewUrl(
|
|
value: MediaFieldState,
|
|
options: MediaOption[],
|
|
fallbackUrl: string | null | undefined,
|
|
) {
|
|
if (value.isCleared) {
|
|
return "";
|
|
}
|
|
|
|
if (value.mode === "external") {
|
|
return value.url || fallbackUrl || "";
|
|
}
|
|
|
|
if (value.mode === "library") {
|
|
return options.find((option) => option.id === value.assetId)?.url ?? fallbackUrl ?? "";
|
|
}
|
|
|
|
return fallbackUrl ?? "";
|
|
}
|
|
|
|
export function SiteSettingsForm({
|
|
action,
|
|
initialSettings,
|
|
initialBindings,
|
|
mediaOptions,
|
|
}: SiteSettingsFormProps) {
|
|
const [settings, setSettings] = useState(initialSettings);
|
|
const [siteLogoLight, setSiteLogoLight] = useState<MediaFieldState>(
|
|
createImageFieldState(
|
|
initialBindings.siteLogoLight?.assetId,
|
|
initialBindings.siteLogoLight?.url,
|
|
"Site Logo Light",
|
|
),
|
|
);
|
|
const [siteLogoDark, setSiteLogoDark] = useState<MediaFieldState>(
|
|
createImageFieldState(
|
|
initialBindings.siteLogoDark?.assetId,
|
|
initialBindings.siteLogoDark?.url,
|
|
"Site Logo Dark",
|
|
),
|
|
);
|
|
const [favicon, setFavicon] = useState<MediaFieldState>(
|
|
createImageFieldState(
|
|
initialBindings.favicon?.assetId,
|
|
initialBindings.favicon?.url,
|
|
"Favicon",
|
|
),
|
|
);
|
|
const [defaultOgImage, setDefaultOgImage] = useState<MediaFieldState>(
|
|
createImageFieldState(
|
|
initialBindings.defaultOgImage?.assetId,
|
|
initialBindings.defaultOgImage?.url,
|
|
"Default OG Image",
|
|
),
|
|
);
|
|
const siteLogoLightPreviewUrl = getMediaPreviewUrl(
|
|
siteLogoLight,
|
|
mediaOptions,
|
|
initialBindings.siteLogoLight?.url,
|
|
);
|
|
const siteLogoDarkPreviewUrl = getMediaPreviewUrl(
|
|
siteLogoDark,
|
|
mediaOptions,
|
|
initialBindings.siteLogoDark?.url,
|
|
);
|
|
const faviconPreviewUrl = getMediaPreviewUrl(favicon, mediaOptions, initialBindings.favicon?.url);
|
|
const defaultOgImagePreviewUrl = getMediaPreviewUrl(
|
|
defaultOgImage,
|
|
mediaOptions,
|
|
initialBindings.defaultOgImage?.url,
|
|
);
|
|
|
|
return (
|
|
<form id="site-settings-form" action={action} className="space-y-6">
|
|
<div className="grid gap-6 xl:grid-cols-[minmax(0,3fr)_minmax(320px,1fr)]">
|
|
<div className="space-y-6">
|
|
<AppCard>
|
|
<CardHeader>
|
|
<CardTitle>SEO Basics</CardTitle>
|
|
<CardDescription>
|
|
Diese Einstellungen bilden die globale Basis fuer Seitentitel, Description und Vorschau in Suchmaschinen.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-2">
|
|
<p className="text-sm text-muted-foreground">
|
|
Nutze
|
|
{" "}
|
|
<code>{PAGE_TITLE_TOKEN}</code>
|
|
{" "}
|
|
fuer den aktuellen Seitentitel.
|
|
und
|
|
{" "}
|
|
<code>{SITE_NAME_TOKEN}</code>
|
|
{" "}
|
|
fuer den Namen der aktuellen Sprache.
|
|
</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
Beispiel:
|
|
{" "}
|
|
<code>{PAGE_TITLE_TOKEN} | {SITE_NAME_TOKEN}</code>
|
|
</p>
|
|
</CardContent>
|
|
</AppCard>
|
|
|
|
<AppCard>
|
|
<CardHeader>
|
|
<CardTitle>Localized Titles And Copy</CardTitle>
|
|
<CardDescription>
|
|
Diese Werte gelten als globale Standards pro Sprache und werden verwendet, wenn eine Seite keinen eigenen Fallback hat.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="grid gap-4 lg:grid-cols-3">
|
|
{localeFields.map((locale) => (
|
|
<div key={locale.key} className="space-y-4 rounded-lg border bg-card p-4 shadow-sm">
|
|
<div>
|
|
<p className="text-sm font-medium text-foreground">{locale.label}</p>
|
|
<p className="mt-1 text-xs text-muted-foreground">Globale Standardwerte fuer diese Sprache.</p>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor={`siteName${locale.suffix}`} className="sr-only">Site Name</Label>
|
|
<div className="relative">
|
|
<Type className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
|
<Input
|
|
id={`siteName${locale.suffix}`}
|
|
name={`siteName${locale.suffix}`}
|
|
value={settings.locales[locale.key].siteName}
|
|
onChange={(event) =>
|
|
setSettings((current) => ({
|
|
...current,
|
|
locales: {
|
|
...current.locales,
|
|
[locale.key]: {
|
|
...current.locales[locale.key],
|
|
siteName: event.target.value,
|
|
},
|
|
},
|
|
}))
|
|
}
|
|
placeholder="Site Name"
|
|
className="pl-9"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor={`titleTemplate${locale.suffix}`} className="sr-only">Title Template</Label>
|
|
<div className="relative">
|
|
<Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
|
<Input
|
|
id={`titleTemplate${locale.suffix}`}
|
|
name={`titleTemplate${locale.suffix}`}
|
|
value={settings.locales[locale.key].titleTemplate}
|
|
onChange={(event) =>
|
|
setSettings((current) => ({
|
|
...current,
|
|
locales: {
|
|
...current.locales,
|
|
[locale.key]: {
|
|
...current.locales[locale.key],
|
|
titleTemplate: event.target.value,
|
|
},
|
|
},
|
|
}))
|
|
}
|
|
placeholder="Title Template"
|
|
className="pl-9"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor={`siteDescription${locale.suffix}`} className="sr-only">Site Description</Label>
|
|
<div className="relative">
|
|
<FileText className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
|
<Input
|
|
id={`siteDescription${locale.suffix}`}
|
|
name={`siteDescription${locale.suffix}`}
|
|
value={settings.locales[locale.key].siteDescription}
|
|
onChange={(event) =>
|
|
setSettings((current) => ({
|
|
...current,
|
|
locales: {
|
|
...current.locales,
|
|
[locale.key]: {
|
|
...current.locales[locale.key],
|
|
siteDescription: event.target.value,
|
|
},
|
|
},
|
|
}))
|
|
}
|
|
placeholder="Site Description"
|
|
className="pl-9"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor={`subhead${locale.suffix}`} className="sr-only">Subhead</Label>
|
|
<div className="relative">
|
|
<Type className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
|
<Input
|
|
id={`subhead${locale.suffix}`}
|
|
name={`subhead${locale.suffix}`}
|
|
value={settings.locales[locale.key].subhead}
|
|
onChange={(event) =>
|
|
setSettings((current) => ({
|
|
...current,
|
|
locales: {
|
|
...current.locales,
|
|
[locale.key]: {
|
|
...current.locales[locale.key],
|
|
subhead: event.target.value,
|
|
},
|
|
},
|
|
}))
|
|
}
|
|
placeholder="Subhead"
|
|
className="pl-9"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</CardContent>
|
|
</AppCard>
|
|
|
|
<AppCard>
|
|
<CardHeader>
|
|
<CardTitle>Brand And Preview Images</CardTitle>
|
|
<CardDescription>
|
|
Logo erscheint im Header. Favicon erscheint im Browser. Das Default OG Bild wird fuer Social Sharing genutzt, wenn eine Seite kein eigenes Bild liefert.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="grid gap-6 xl:grid-cols-2">
|
|
<MediaFieldPicker
|
|
title="Site Logo Light"
|
|
value={siteLogoLight}
|
|
onChange={setSiteLogoLight}
|
|
options={mediaOptions}
|
|
hasInitialValue={Boolean(initialBindings.siteLogoLight?.assetId || initialBindings.siteLogoLight?.url)}
|
|
inputName="siteLogoLightMedia"
|
|
fileFieldName="siteLogoLightFile"
|
|
fileLabel="Upload Light Logo"
|
|
libraryLabel="Light Logo Library"
|
|
accept="image/*,.svg"
|
|
allowExternal={false}
|
|
allowClear
|
|
clearLabel="Remove Light Logo"
|
|
emptyValue={{
|
|
mode: "upload",
|
|
assetId: "",
|
|
url: "",
|
|
}}
|
|
/>
|
|
|
|
<MediaFieldPicker
|
|
title="Site Logo Dark"
|
|
value={siteLogoDark}
|
|
onChange={setSiteLogoDark}
|
|
options={mediaOptions}
|
|
hasInitialValue={Boolean(initialBindings.siteLogoDark?.assetId || initialBindings.siteLogoDark?.url)}
|
|
inputName="siteLogoDarkMedia"
|
|
fileFieldName="siteLogoDarkFile"
|
|
fileLabel="Upload Dark Logo"
|
|
libraryLabel="Dark Logo Library"
|
|
accept="image/*,.svg"
|
|
allowExternal={false}
|
|
allowClear
|
|
clearLabel="Remove Dark Logo"
|
|
emptyValue={{
|
|
mode: "upload",
|
|
assetId: "",
|
|
url: "",
|
|
}}
|
|
/>
|
|
|
|
<MediaFieldPicker
|
|
title="Favicon"
|
|
value={favicon}
|
|
onChange={setFavicon}
|
|
options={mediaOptions}
|
|
hasInitialValue={Boolean(initialBindings.favicon?.assetId || initialBindings.favicon?.url)}
|
|
inputName="faviconMedia"
|
|
fileFieldName="faviconFile"
|
|
fileLabel="Upload Favicon"
|
|
libraryLabel="Favicon Library"
|
|
accept=".png,.svg,.ico,image/png,image/svg+xml,image/x-icon,image/vnd.microsoft.icon"
|
|
allowExternal={false}
|
|
allowClear
|
|
clearLabel="Remove Favicon"
|
|
emptyValue={{
|
|
mode: "upload",
|
|
assetId: "",
|
|
url: "",
|
|
}}
|
|
/>
|
|
|
|
<MediaFieldPicker
|
|
title="Default OG Image"
|
|
value={defaultOgImage}
|
|
onChange={setDefaultOgImage}
|
|
options={mediaOptions}
|
|
hasInitialValue={Boolean(initialBindings.defaultOgImage?.assetId || initialBindings.defaultOgImage?.url)}
|
|
inputName="defaultOgImageMedia"
|
|
fileFieldName="defaultOgImageFile"
|
|
fileLabel="Upload OG Image"
|
|
libraryLabel="OG Image Library"
|
|
accept="image/*,.svg"
|
|
allowExternal={false}
|
|
allowClear
|
|
clearLabel="Remove OG Image"
|
|
emptyValue={{
|
|
mode: "upload",
|
|
assetId: "",
|
|
url: "",
|
|
}}
|
|
/>
|
|
</CardContent>
|
|
</AppCard>
|
|
</div>
|
|
|
|
<div className="xl:sticky xl:top-6 xl:self-start">
|
|
<AppCard>
|
|
<CardHeader>
|
|
<CardTitle>Preview</CardTitle>
|
|
<CardDescription>Suchmaschine und Social Sharing Vorschau.</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="space-y-4 text-sm">
|
|
{localeFields.map((locale) => {
|
|
const localeSettings = settings.locales[locale.key];
|
|
const previewTitle = localeSettings.titleTemplate.includes(PAGE_TITLE_TOKEN)
|
|
? localeSettings.titleTemplate
|
|
.replace(PAGE_TITLE_TOKEN, locale.sampleTitle)
|
|
.replaceAll(SITE_NAME_TOKEN, localeSettings.siteName)
|
|
: `${locale.sampleTitle} | ${localeSettings.siteName}`;
|
|
|
|
return (
|
|
<div key={locale.key} className="rounded-md border bg-card p-3">
|
|
<p className="font-medium text-foreground">{locale.label}</p>
|
|
<p className="mt-2 text-xs text-muted-foreground">
|
|
Example page title: {locale.sampleTitle}
|
|
</p>
|
|
<p className="mt-2 text-sm text-foreground">{previewTitle}</p>
|
|
<p className="mt-1 text-sm text-muted-foreground">
|
|
{localeSettings.siteDescription || "No description"}
|
|
</p>
|
|
<p className="mt-2 text-xs text-muted-foreground">
|
|
{localeSettings.subhead || "No subhead"}
|
|
</p>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2 text-sm font-medium text-foreground">
|
|
<ImageIcon className="h-4 w-4 text-brand-primary" />
|
|
Header Logo Preview
|
|
</div>
|
|
<div className="grid gap-3">
|
|
<div className="rounded-md border bg-card p-4">
|
|
<p className="mb-3 text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground">
|
|
Light
|
|
</p>
|
|
{siteLogoLightPreviewUrl ? (
|
|
<img
|
|
src={siteLogoLightPreviewUrl}
|
|
alt="Site Logo Light"
|
|
className="h-10 w-auto max-w-full object-contain"
|
|
/>
|
|
) : (
|
|
<div className="flex h-10 items-center text-sm text-muted-foreground">
|
|
Default light logo will be used
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="rounded-md border border-border/70 bg-slate-950 p-4">
|
|
<p className="mb-3 text-xs font-medium uppercase tracking-[0.2em] text-white/55">
|
|
Dark
|
|
</p>
|
|
{siteLogoDarkPreviewUrl ? (
|
|
<img
|
|
src={siteLogoDarkPreviewUrl}
|
|
alt="Site Logo Dark"
|
|
className="h-10 w-auto max-w-full object-contain"
|
|
/>
|
|
) : (
|
|
<div className="flex h-10 items-center text-sm text-white/60">
|
|
Default dark logo will be used
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2 text-sm font-medium text-foreground">
|
|
<Search className="h-4 w-4 text-brand-primary" />
|
|
Search Preview
|
|
</div>
|
|
<div className="rounded-md border bg-card p-4">
|
|
<div className="flex items-center gap-3">
|
|
{faviconPreviewUrl ? (
|
|
<img src={faviconPreviewUrl} alt="Favicon" className="h-5 w-5 rounded-sm" />
|
|
) : (
|
|
<div className="flex h-5 w-5 items-center justify-center rounded-sm border bg-muted/40">
|
|
<Type className="h-3.5 w-3.5 text-muted-foreground" />
|
|
</div>
|
|
)}
|
|
<p className="text-sm font-medium text-brand-primary">
|
|
{settings.locales.de.titleTemplate.includes(PAGE_TITLE_TOKEN)
|
|
? settings.locales.de.titleTemplate
|
|
.replace(PAGE_TITLE_TOKEN, "About")
|
|
.replaceAll(SITE_NAME_TOKEN, settings.locales.de.siteName)
|
|
: `About | ${settings.locales.de.siteName}`}
|
|
</p>
|
|
</div>
|
|
<p className="mt-2 text-xs text-muted-foreground">
|
|
{settings.locales.de.siteDescription || "No description"}
|
|
</p>
|
|
<p className="mt-2 text-xs text-muted-foreground/80">
|
|
{settings.locales.de.subhead || "No subhead"}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2 text-sm font-medium text-foreground">
|
|
<ImageIcon className="h-4 w-4 text-brand-secondary" />
|
|
Social Preview
|
|
</div>
|
|
<div className="overflow-hidden rounded-md border bg-card">
|
|
{defaultOgImagePreviewUrl ? (
|
|
<img src={defaultOgImagePreviewUrl} alt="Default OG" className="h-32 w-full object-cover" />
|
|
) : (
|
|
<div className="flex h-32 items-center justify-center bg-muted/40 text-sm text-muted-foreground">
|
|
No OG image selected
|
|
</div>
|
|
)}
|
|
<div className="space-y-2 p-4">
|
|
<p className="text-sm font-medium text-foreground">
|
|
{settings.locales.en.titleTemplate.includes(PAGE_TITLE_TOKEN)
|
|
? settings.locales.en.titleTemplate
|
|
.replace(PAGE_TITLE_TOKEN, "Portfolio")
|
|
.replaceAll(SITE_NAME_TOKEN, settings.locales.en.siteName)
|
|
: `Portfolio | ${settings.locales.en.siteName}`}
|
|
</p>
|
|
<p className="text-xs text-muted-foreground">
|
|
{settings.locales.en.siteDescription || "No description"}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</AppCard>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
);
|
|
}
|