Refactor root admin dashboards and settings
This commit is contained in:
MOH
@@ -3,22 +3,30 @@
|
||||
/* 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 { Check, FileText, ImageIcon, Search, Type, Upload } from "lucide-react";
|
||||
import { useEffect, useId, useMemo, useRef, 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 { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
|
||||
import type { AppLocale } from "@/lib/locale";
|
||||
import type { MediaOption } from "@/lib/media";
|
||||
import { cn } from "@/lib/utils";
|
||||
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>;
|
||||
@@ -27,6 +35,14 @@ type SiteSettingsFormProps = {
|
||||
mediaOptions: MediaOption[];
|
||||
};
|
||||
|
||||
type MediaFieldState = {
|
||||
mode: "upload" | "library";
|
||||
assetId: string;
|
||||
url: string;
|
||||
label: string;
|
||||
kind: MediaKind;
|
||||
};
|
||||
|
||||
const localeFields: Array<{
|
||||
key: AppLocale;
|
||||
label: string;
|
||||
@@ -65,28 +81,15 @@ function createImageFieldState(
|
||||
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: "",
|
||||
url: url ?? "",
|
||||
label,
|
||||
kind: MediaKind.IMAGE,
|
||||
isCleared: false,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -95,14 +98,6 @@ function getMediaPreviewUrl(
|
||||
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 ?? "";
|
||||
}
|
||||
@@ -110,6 +105,276 @@ function getMediaPreviewUrl(
|
||||
return fallbackUrl ?? "";
|
||||
}
|
||||
|
||||
function buildPreviewTitle(
|
||||
titleTemplate: string,
|
||||
sampleTitle: string,
|
||||
siteName: string,
|
||||
) {
|
||||
return titleTemplate.includes(PAGE_TITLE_TOKEN)
|
||||
? titleTemplate
|
||||
.replace(PAGE_TITLE_TOKEN, sampleTitle)
|
||||
.replaceAll(SITE_NAME_TOKEN, siteName)
|
||||
: `${sampleTitle} | ${siteName}`;
|
||||
}
|
||||
|
||||
function MediaLibraryModal({
|
||||
open,
|
||||
onOpenChange,
|
||||
options,
|
||||
selectedAssetId,
|
||||
onSelect,
|
||||
title,
|
||||
}: {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
options: MediaOption[];
|
||||
selectedAssetId: string;
|
||||
onSelect: (option: MediaOption) => void;
|
||||
title: string;
|
||||
}) {
|
||||
const searchId = useId();
|
||||
const [query, setQuery] = useState("");
|
||||
const visibleOptions = useMemo(() => {
|
||||
const normalizedQuery = query.trim().toLowerCase();
|
||||
|
||||
if (!normalizedQuery) {
|
||||
return options;
|
||||
}
|
||||
|
||||
return options.filter((option) => option.label.toLowerCase().includes(normalizedQuery));
|
||||
}, [options, query]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) {
|
||||
setQuery("");
|
||||
}
|
||||
}, [open]);
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-h-[calc(100vh-1.5rem)] w-[calc(100vw-1rem)] max-w-4xl overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{title}</DialogTitle>
|
||||
<DialogDescription>Bild aus der Media Library auswaehlen.</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4">
|
||||
<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={searchId}
|
||||
value={query}
|
||||
onChange={(event) => setQuery(event.target.value)}
|
||||
className="pl-9"
|
||||
placeholder="Search media"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
|
||||
{visibleOptions.length > 0 ? (
|
||||
visibleOptions.map((option) => {
|
||||
const isActive = option.id === selectedAssetId;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={option.id}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
onSelect(option);
|
||||
onOpenChange(false);
|
||||
}}
|
||||
className={cn(
|
||||
"overflow-hidden rounded-nested border text-left transition-colors",
|
||||
isActive
|
||||
? "border-input bg-accent/30"
|
||||
: "border-border/70 bg-background hover:bg-accent/10",
|
||||
)}
|
||||
>
|
||||
<div className="aspect-[4/3] bg-muted/30">
|
||||
{option.url ? (
|
||||
<img src={option.url} alt={option.label} className="h-full w-full object-cover" />
|
||||
) : null}
|
||||
</div>
|
||||
<div className="flex items-center gap-3 p-3">
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate text-sm font-medium text-foreground">{option.label}</p>
|
||||
<p className="truncate text-xs text-muted-foreground">{option.source}</p>
|
||||
</div>
|
||||
{isActive ? <Check className="h-4 w-4 text-brand-primary" /> : null}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<div className="col-span-full rounded-nested border border-dashed border-input px-4 py-8 text-sm text-muted-foreground">
|
||||
No media found.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
function SiteSettingsMediaRow({
|
||||
title,
|
||||
value,
|
||||
onChange,
|
||||
options,
|
||||
inputName,
|
||||
fileFieldName,
|
||||
accept,
|
||||
clearLabel,
|
||||
fallbackUrl,
|
||||
}: {
|
||||
title: string;
|
||||
value: MediaFieldState;
|
||||
onChange: (nextValue: MediaFieldState) => void;
|
||||
options: MediaOption[];
|
||||
inputName: string;
|
||||
fileFieldName: string;
|
||||
accept: string;
|
||||
clearLabel: string;
|
||||
fallbackUrl?: string | null;
|
||||
}) {
|
||||
const [isLibraryOpen, setIsLibraryOpen] = useState(false);
|
||||
const hiddenInputRef = useRef<HTMLInputElement | null>(null);
|
||||
const fileInputId = useId();
|
||||
const previewUrl = getMediaPreviewUrl(value, options, fallbackUrl);
|
||||
const serializedValue = JSON.stringify({
|
||||
mode: value.mode,
|
||||
assetId: value.assetId,
|
||||
url: value.url,
|
||||
label: value.label,
|
||||
kind: value.kind,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const hiddenInput = hiddenInputRef.current;
|
||||
|
||||
if (!hiddenInput) {
|
||||
return;
|
||||
}
|
||||
|
||||
hiddenInput.dispatchEvent(new Event("input", { bubbles: true }));
|
||||
hiddenInput.dispatchEvent(new Event("change", { bubbles: true }));
|
||||
}, [serializedValue]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<AppCard level={2} padding="sm">
|
||||
<div className="grid gap-4 lg:grid-cols-[180px_minmax(0,1fr)]">
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm font-semibold text-foreground">{title}</p>
|
||||
<div className="flex h-20 w-full items-center justify-center overflow-hidden rounded-nested border border-border/70 bg-muted/30">
|
||||
{previewUrl ? (
|
||||
<img src={previewUrl} alt={title} className="h-full w-full object-contain p-2" />
|
||||
) : (
|
||||
<ImageIcon className="h-5 w-5 text-muted-foreground" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<input ref={hiddenInputRef} type="hidden" name={inputName} value={serializedValue} />
|
||||
|
||||
<div className="grid gap-3 md:grid-cols-[minmax(0,1fr)_auto_auto]">
|
||||
<div className="relative">
|
||||
<Type className="pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
value={value.label}
|
||||
onChange={(event) => onChange({ ...value, label: event.target.value })}
|
||||
placeholder="Label"
|
||||
className="pl-8"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<label
|
||||
htmlFor={fileInputId}
|
||||
className="inline-flex h-10 cursor-pointer items-center justify-center gap-2 rounded-nested border border-input bg-background px-4 text-sm transition-colors hover:bg-accent hover:text-accent-foreground"
|
||||
>
|
||||
<Upload className="h-4 w-4" />
|
||||
Upload
|
||||
</label>
|
||||
|
||||
<Button type="button" variant="outline" onClick={() => setIsLibraryOpen(true)}>
|
||||
<ImageIcon className="h-4 w-4" />
|
||||
Library
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<input
|
||||
id={fileInputId}
|
||||
name={fileFieldName}
|
||||
type="file"
|
||||
accept={accept}
|
||||
className="hidden"
|
||||
onChange={(event) => {
|
||||
const nextLabel = event.target.files?.[0]?.name.replace(/\.[^.]+$/, "") ?? value.label;
|
||||
|
||||
onChange({
|
||||
...value,
|
||||
mode: "upload",
|
||||
assetId: "",
|
||||
label: value.label.trim() ? value.label : nextLabel,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<BadgeLike>{value.mode === "library" && value.assetId ? "Library selected" : "Upload mode"}</BadgeLike>
|
||||
{value.assetId ? (
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-8 px-2 text-destructive hover:bg-destructive/5 hover:text-destructive"
|
||||
onClick={() =>
|
||||
onChange({
|
||||
...value,
|
||||
mode: "upload",
|
||||
assetId: "",
|
||||
url: "",
|
||||
})
|
||||
}
|
||||
>
|
||||
{clearLabel}
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AppCard>
|
||||
|
||||
<MediaLibraryModal
|
||||
open={isLibraryOpen}
|
||||
onOpenChange={setIsLibraryOpen}
|
||||
options={options.filter((option) => option.kind === MediaKind.IMAGE)}
|
||||
selectedAssetId={value.assetId}
|
||||
title={title}
|
||||
onSelect={(option) =>
|
||||
onChange({
|
||||
...value,
|
||||
mode: "library",
|
||||
assetId: option.id,
|
||||
url: "",
|
||||
label: option.label,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function BadgeLike({ children }: { children: string }) {
|
||||
return (
|
||||
<span className="inline-flex items-center rounded-full border border-border/70 bg-muted/30 px-2.5 py-1 text-xs text-muted-foreground">
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export function SiteSettingsForm({
|
||||
action,
|
||||
initialSettings,
|
||||
@@ -145,6 +410,7 @@ export function SiteSettingsForm({
|
||||
"Default OG Image",
|
||||
),
|
||||
);
|
||||
|
||||
const siteLogoLightPreviewUrl = getMediaPreviewUrl(
|
||||
siteLogoLight,
|
||||
mediaOptions,
|
||||
@@ -164,55 +430,33 @@ export function SiteSettingsForm({
|
||||
|
||||
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="grid gap-6 xl:grid-cols-[minmax(0,3fr)_minmax(300px,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">
|
||||
<section className="space-y-5">
|
||||
<div className="space-y-2">
|
||||
<h2 className="text-lg font-semibold text-foreground">Localized Titles And Copy</h2>
|
||||
<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.
|
||||
fuer die globalen Titelvorlagen pro Sprache.
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Beispiel:
|
||||
{" "}
|
||||
<code>{PAGE_TITLE_TOKEN} | {SITE_NAME_TOKEN}</code>
|
||||
</p>
|
||||
</CardContent>
|
||||
</AppCard>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<div className="grid gap-5 lg:grid-cols-3">
|
||||
{localeFields.map((locale) => (
|
||||
<AppCard key={locale.key} padding="sm" className="space-y-4 rounded-nested">
|
||||
<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>
|
||||
<AppCard key={locale.key} level={2} padding="sm" className="space-y-4">
|
||||
<p className="text-sm font-semibold text-foreground">{locale.label}</p>
|
||||
|
||||
<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" />
|
||||
<Type className="pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
id={`siteName${locale.suffix}`}
|
||||
name={`siteName${locale.suffix}`}
|
||||
@@ -230,7 +474,7 @@ export function SiteSettingsForm({
|
||||
}))
|
||||
}
|
||||
placeholder="Site Name"
|
||||
className="pl-9"
|
||||
className="pl-8"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -238,7 +482,7 @@ export function SiteSettingsForm({
|
||||
<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" />
|
||||
<Search className="pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
id={`titleTemplate${locale.suffix}`}
|
||||
name={`titleTemplate${locale.suffix}`}
|
||||
@@ -256,7 +500,7 @@ export function SiteSettingsForm({
|
||||
}))
|
||||
}
|
||||
placeholder="Title Template"
|
||||
className="pl-9"
|
||||
className="pl-8"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -264,7 +508,7 @@ export function SiteSettingsForm({
|
||||
<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" />
|
||||
<FileText className="pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
id={`siteDescription${locale.suffix}`}
|
||||
name={`siteDescription${locale.suffix}`}
|
||||
@@ -282,7 +526,7 @@ export function SiteSettingsForm({
|
||||
}))
|
||||
}
|
||||
placeholder="Site Description"
|
||||
className="pl-9"
|
||||
className="pl-8"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -290,7 +534,7 @@ export function SiteSettingsForm({
|
||||
<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" />
|
||||
<Type className="pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
id={`subhead${locale.suffix}`}
|
||||
name={`subhead${locale.suffix}`}
|
||||
@@ -308,239 +552,180 @@ export function SiteSettingsForm({
|
||||
}))
|
||||
}
|
||||
placeholder="Subhead"
|
||||
className="pl-9"
|
||||
className="pl-8"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</AppCard>
|
||||
))}
|
||||
</CardContent>
|
||||
</AppCard>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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: "",
|
||||
}}
|
||||
/>
|
||||
<section className="space-y-4">
|
||||
<h2 className="text-lg font-semibold text-foreground">Brand And Preview Images</h2>
|
||||
|
||||
<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: "",
|
||||
}}
|
||||
/>
|
||||
<SiteSettingsMediaRow
|
||||
title="Site Logo Light"
|
||||
value={siteLogoLight}
|
||||
onChange={setSiteLogoLight}
|
||||
options={mediaOptions}
|
||||
inputName="siteLogoLightMedia"
|
||||
fileFieldName="siteLogoLightFile"
|
||||
accept="image/*,.svg"
|
||||
clearLabel="Remove"
|
||||
fallbackUrl={initialBindings.siteLogoLight?.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: "",
|
||||
}}
|
||||
/>
|
||||
<SiteSettingsMediaRow
|
||||
title="Site Logo Dark"
|
||||
value={siteLogoDark}
|
||||
onChange={setSiteLogoDark}
|
||||
options={mediaOptions}
|
||||
inputName="siteLogoDarkMedia"
|
||||
fileFieldName="siteLogoDarkFile"
|
||||
accept="image/*,.svg"
|
||||
clearLabel="Remove"
|
||||
fallbackUrl={initialBindings.siteLogoDark?.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>
|
||||
<SiteSettingsMediaRow
|
||||
title="Favicon"
|
||||
value={favicon}
|
||||
onChange={setFavicon}
|
||||
options={mediaOptions}
|
||||
inputName="faviconMedia"
|
||||
fileFieldName="faviconFile"
|
||||
accept=".png,.svg,.ico,image/png,image/svg+xml,image/x-icon,image/vnd.microsoft.icon"
|
||||
clearLabel="Remove"
|
||||
fallbackUrl={initialBindings.favicon?.url}
|
||||
/>
|
||||
|
||||
<SiteSettingsMediaRow
|
||||
title="Default OG Image"
|
||||
value={defaultOgImage}
|
||||
onChange={setDefaultOgImage}
|
||||
options={mediaOptions}
|
||||
inputName="defaultOgImageMedia"
|
||||
fileFieldName="defaultOgImageFile"
|
||||
accept="image/*,.svg"
|
||||
clearLabel="Remove"
|
||||
fallbackUrl={initialBindings.defaultOgImage?.url}
|
||||
/>
|
||||
</section>
|
||||
</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}`;
|
||||
<section className="space-y-4">
|
||||
<h2 className="text-lg font-semibold text-foreground">Preview</h2>
|
||||
|
||||
return (
|
||||
<AppCard key={locale.key} className="rounded-nested 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>
|
||||
</AppCard>
|
||||
);
|
||||
})}
|
||||
</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">
|
||||
<AppCard padding="sm" className="rounded-nested">
|
||||
<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>
|
||||
)}
|
||||
</AppCard>
|
||||
<div className="rounded-nested 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>
|
||||
<AppCard padding="sm" className="rounded-nested">
|
||||
<AppCard level={2} padding="sm" className="space-y-2">
|
||||
<p className="text-sm font-semibold text-foreground">Search Result</p>
|
||||
<div className="rounded-nested border border-border/70 bg-background p-3">
|
||||
<div className="flex items-center gap-3">
|
||||
{faviconPreviewUrl ? (
|
||||
<img src={faviconPreviewUrl} alt="Favicon" className="h-5 w-5 rounded-sm" />
|
||||
<img src={faviconPreviewUrl} alt="Favicon" className="h-4 w-4 rounded-sm object-cover" />
|
||||
) : (
|
||||
<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 className="flex h-4 w-4 items-center justify-center rounded-sm border border-border/70 bg-muted/40">
|
||||
<Type className="h-3 w-3 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}`}
|
||||
{buildPreviewTitle(
|
||||
settings.locales.de.titleTemplate,
|
||||
"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>
|
||||
</AppCard>
|
||||
|
||||
<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>
|
||||
<AppCard className="overflow-hidden rounded-nested">
|
||||
</AppCard>
|
||||
|
||||
<AppCard level={2} padding="sm" className="space-y-2">
|
||||
<p className="text-sm font-semibold text-foreground">Brand Assets</p>
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
<AppCard level={1} padding="sm">
|
||||
<p className="mb-2 text-xs font-medium uppercase tracking-[0.12em] text-muted-foreground">Light</p>
|
||||
{siteLogoLightPreviewUrl ? (
|
||||
<img
|
||||
src={siteLogoLightPreviewUrl}
|
||||
alt="Site Logo Light"
|
||||
className="h-10 w-full object-contain"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-10 items-center text-sm text-muted-foreground">No logo selected</div>
|
||||
)}
|
||||
</AppCard>
|
||||
|
||||
<div className="rounded-nested border border-border/70 bg-slate-950 p-3">
|
||||
<p className="mb-2 text-xs font-medium uppercase tracking-[0.12em] text-white/55">Dark</p>
|
||||
{siteLogoDarkPreviewUrl ? (
|
||||
<img
|
||||
src={siteLogoDarkPreviewUrl}
|
||||
alt="Site Logo Dark"
|
||||
className="h-10 w-full object-contain"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-10 items-center text-sm text-white/60">No logo selected</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</AppCard>
|
||||
|
||||
<AppCard level={2} padding="sm" className="space-y-2">
|
||||
<p className="text-sm font-semibold text-foreground">Social Preview</p>
|
||||
<div className="overflow-hidden rounded-nested border border-border/70 bg-background">
|
||||
{defaultOgImagePreviewUrl ? (
|
||||
<img src={defaultOgImagePreviewUrl} alt="Default OG" className="h-32 w-full object-cover" />
|
||||
<img src={defaultOgImagePreviewUrl} alt="Default OG" className="h-24 w-full object-cover" />
|
||||
) : (
|
||||
<div className="flex h-32 items-center justify-center bg-muted/40 text-sm text-muted-foreground">
|
||||
<div className="flex h-24 items-center justify-center bg-muted/30 text-sm text-muted-foreground">
|
||||
No OG image selected
|
||||
</div>
|
||||
)}
|
||||
<div className="space-y-2 p-4">
|
||||
<div className="space-y-1.5 p-3">
|
||||
<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}`}
|
||||
{buildPreviewTitle(
|
||||
settings.locales.en.titleTemplate,
|
||||
"Portfolio",
|
||||
settings.locales.en.siteName,
|
||||
)}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{settings.locales.en.siteDescription || "No description"}
|
||||
</p>
|
||||
</div>
|
||||
</AppCard>
|
||||
</CardContent>
|
||||
</AppCard>
|
||||
</div>
|
||||
</AppCard>
|
||||
|
||||
<AppCard level={2} padding="sm" className="space-y-2">
|
||||
<p className="text-sm font-semibold text-foreground">Locale Summary</p>
|
||||
<div className="rounded-nested border border-border/70 bg-background">
|
||||
<Table>
|
||||
<TableBody>
|
||||
{localeFields.map((locale) => (
|
||||
<TableRow key={locale.key}>
|
||||
<TableCell className="w-24 font-medium">{locale.label}</TableCell>
|
||||
<TableCell>
|
||||
<p className="text-sm font-medium text-foreground">
|
||||
{buildPreviewTitle(
|
||||
settings.locales[locale.key].titleTemplate,
|
||||
locale.sampleTitle,
|
||||
settings.locales[locale.key].siteName,
|
||||
)}
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-muted-foreground">
|
||||
{settings.locales[locale.key].subhead || "No subhead"}
|
||||
</p>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</AppCard>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
Reference in New Issue
Block a user