1207 lines
52 KiB
TypeScript
1207 lines
52 KiB
TypeScript
"use client";
|
||
|
||
import { useEffect, useRef, useState } from "react";
|
||
import Image from "next/image";
|
||
import {
|
||
Blocks,
|
||
Brain,
|
||
Download,
|
||
Globe2,
|
||
ImageIcon,
|
||
Key,
|
||
Languages,
|
||
Monitor,
|
||
Moon,
|
||
Palette,
|
||
Save,
|
||
Shield,
|
||
Sun,
|
||
Trash2,
|
||
Upload,
|
||
User,
|
||
} from "lucide-react";
|
||
import {
|
||
loadSettings,
|
||
commitI18nImportAction,
|
||
createLocaleAction,
|
||
exportI18nAction,
|
||
previewI18nImportAction,
|
||
removeBrandingAsset,
|
||
resetUiTranslationAction,
|
||
saveAiSettings,
|
||
saveColorMode,
|
||
saveGeneralSettings,
|
||
saveLanguagePreference,
|
||
saveUiTranslationAction,
|
||
setDefaultLocaleAction,
|
||
updateLocaleStatusAction,
|
||
updatePassword,
|
||
updateProfile,
|
||
} from "./actions";
|
||
import {
|
||
Button,
|
||
Card,
|
||
CardContent,
|
||
Input,
|
||
Label,
|
||
RadioGroup,
|
||
RadioGroupItem,
|
||
Textarea,
|
||
} from "poyraz-ui/atoms";
|
||
import { toast } from "poyraz-ui/molecules";
|
||
import { applyColorMode } from "@/components/theme/color-mode-sync";
|
||
import { LocalizedFields, type LocalizedFieldValues } from "@/components/i18n/localized-fields";
|
||
import { isColorMode, type ColorMode } from "@/lib/color-mode";
|
||
import { contentTranslationRegistry } from "@/lib/i18n/content";
|
||
|
||
type AiProvider = "groq" | "ollama" | "openai" | "gemini";
|
||
type BrandingAsset = "lightLogo" | "darkLogo" | "favicon";
|
||
type LocaleStatus = "draft" | "active" | "archived" | "test";
|
||
type LocaleRecord = {
|
||
code: string;
|
||
name: string;
|
||
nativeName: string;
|
||
status: LocaleStatus;
|
||
fallbackLocale: string | null;
|
||
textDirection: "ltr" | "rtl";
|
||
builtIn: boolean;
|
||
sortOrder: number;
|
||
};
|
||
type TranslationRow = { locale: string; namespace: string; key: string; value: string };
|
||
type ContentTranslationRow = { entityType: string; entityId: string; field: string; locale: string; value: string };
|
||
type ReferenceKey = {
|
||
key: string;
|
||
namespace: string;
|
||
translationKey: string;
|
||
tr: string;
|
||
en: string;
|
||
parityOk: boolean;
|
||
};
|
||
type TranslationCompletion = {
|
||
locale: string;
|
||
translated: number;
|
||
total: number;
|
||
percent: number;
|
||
missingKeys: string[];
|
||
};
|
||
|
||
const colorModeOptions = [
|
||
{
|
||
value: "light",
|
||
label: "Açık",
|
||
description: "Her zaman aydınlık renk paletini kullanır.",
|
||
icon: Sun,
|
||
},
|
||
{
|
||
value: "dark",
|
||
label: "Koyu",
|
||
description: "Her zaman koyu renk paletini kullanır.",
|
||
icon: Moon,
|
||
},
|
||
{
|
||
value: "system",
|
||
label: "Sistem",
|
||
description: "Cihazınızın görünüm tercihini otomatik takip eder.",
|
||
icon: Monitor,
|
||
},
|
||
] satisfies Array<{
|
||
value: ColorMode;
|
||
label: string;
|
||
description: string;
|
||
icon: typeof Sun;
|
||
}>;
|
||
|
||
export default function SettingsPage() {
|
||
const [activeTab, setActiveTab] = useState("Genel");
|
||
|
||
// Profile States
|
||
const [firstName, setFirstName] = useState("");
|
||
const [lastName, setLastName] = useState("");
|
||
const [avatarUrl, setAvatarUrl] = useState("");
|
||
|
||
// Security States
|
||
const formRef = useRef<HTMLFormElement>(null);
|
||
|
||
// AI States
|
||
const [aiProvider, setAiProvider] = useState<AiProvider>("gemini");
|
||
const [apiKey, setApiKey] = useState("");
|
||
const [hasApiKey, setHasApiKey] = useState(false);
|
||
const [colorMode, setColorMode] = useState<ColorMode>("system");
|
||
const [isSavingColorMode, setIsSavingColorMode] = useState(false);
|
||
const [workspaceName, setWorkspaceName] = useState("Neta");
|
||
const [metaTitle, setMetaTitle] = useState("Neta");
|
||
const [shortName, setShortName] = useState("Neta");
|
||
const [primaryColor, setPrimaryColor] = useState("#C81E1E");
|
||
const [assetUrls, setAssetUrls] = useState<Record<BrandingAsset, string>>({
|
||
lightLogo: "",
|
||
darkLogo: "",
|
||
favicon: "",
|
||
});
|
||
const [pendingAssetUrls, setPendingAssetUrls] = useState<Record<BrandingAsset, string>>({
|
||
lightLogo: "",
|
||
darkLogo: "",
|
||
favicon: "",
|
||
});
|
||
const [customAssets, setCustomAssets] = useState<Record<BrandingAsset, boolean>>({
|
||
lightLogo: false,
|
||
darkLogo: false,
|
||
favicon: false,
|
||
});
|
||
const [isSavingBranding, setIsSavingBranding] = useState(false);
|
||
const [language, setLanguage] = useState("tr");
|
||
const [locales, setLocales] = useState<LocaleRecord[]>([]);
|
||
const [defaultLocale, setDefaultLocale] = useState("tr");
|
||
const [catalogVersion, setCatalogVersion] = useState(1);
|
||
const [translations, setTranslations] = useState<TranslationRow[]>([]);
|
||
const [brandingContentTranslations, setBrandingContentTranslations] = useState<LocalizedFieldValues>({});
|
||
const [referenceKeys, setReferenceKeys] = useState<ReferenceKey[]>([]);
|
||
const [completion, setCompletion] = useState<TranslationCompletion[]>([]);
|
||
const [newLocale, setNewLocale] = useState({
|
||
code: "fr",
|
||
name: "French",
|
||
nativeName: "Français",
|
||
fallbackLocale: "en",
|
||
textDirection: "ltr" as "ltr" | "rtl",
|
||
});
|
||
const [selectedLocale, setSelectedLocale] = useState("fr");
|
||
const [selectedNamespace, setSelectedNamespace] = useState("navigation");
|
||
const [translationSearch, setTranslationSearch] = useState("");
|
||
const [editingValues, setEditingValues] = useState<Record<string, string>>({});
|
||
const [importJson, setImportJson] = useState("");
|
||
const [importPreview, setImportPreview] = useState("");
|
||
const assetObjectUrlRefs = useRef<Partial<Record<BrandingAsset, string>>>({});
|
||
|
||
const tabs = [
|
||
{ name: "Genel", icon: Palette },
|
||
{ name: "Diller ve çeviriler", icon: Languages },
|
||
{ name: "Profile & Account", icon: User },
|
||
{ name: "AI Preferences", icon: Brain },
|
||
{ name: "Security", icon: Shield },
|
||
];
|
||
|
||
useEffect(() => {
|
||
let isActive = true;
|
||
|
||
const fetchData = async () => {
|
||
const settings = await loadSettings();
|
||
if (!isActive) return;
|
||
setFirstName(settings.firstName);
|
||
setLastName(settings.lastName);
|
||
setAvatarUrl(settings.avatarUrl);
|
||
setAiProvider(settings.aiProvider);
|
||
setHasApiKey(settings.hasApiKey);
|
||
setColorMode(settings.colorMode);
|
||
setWorkspaceName(settings.workspaceName);
|
||
setMetaTitle(settings.metaTitle);
|
||
setShortName(settings.shortName);
|
||
setPrimaryColor(settings.primaryColor);
|
||
setAssetUrls({
|
||
lightLogo: settings.lightLogoUrl,
|
||
darkLogo: settings.darkLogoUrl,
|
||
favicon: settings.faviconUrl,
|
||
});
|
||
setCustomAssets({
|
||
lightLogo: settings.hasCustomLightLogo,
|
||
darkLogo: settings.hasCustomDarkLogo,
|
||
favicon: settings.hasCustomFavicon,
|
||
});
|
||
setLanguage(settings.language);
|
||
setLocales(settings.i18n.locales);
|
||
setDefaultLocale(settings.i18n.defaultLocale);
|
||
setCatalogVersion(settings.i18n.catalogVersion);
|
||
setTranslations(settings.i18n.translations);
|
||
setReferenceKeys(settings.i18n.referenceKeys);
|
||
setCompletion(settings.i18n.completion);
|
||
setBrandingContentTranslations(toLocalizedValues(settings.contentTranslations.branding));
|
||
setSelectedLocale(settings.i18n.locales.find((locale) => !locale.builtIn)?.code ?? "en");
|
||
};
|
||
|
||
void fetchData();
|
||
return () => { isActive = false; };
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
const objectUrls = assetObjectUrlRefs.current;
|
||
return () => {
|
||
for (const objectUrl of Object.values(objectUrls)) {
|
||
if (objectUrl) URL.revokeObjectURL(objectUrl);
|
||
}
|
||
};
|
||
}, []);
|
||
|
||
const handleProfileAction = async (formData: FormData) => {
|
||
const response = await updateProfile(formData);
|
||
if (response?.error) {
|
||
toast.error(`Hata: ${response.error}`);
|
||
} else {
|
||
toast.success("Profil güncellendi!");
|
||
const avatar = formData.get("avatar");
|
||
if (avatar instanceof File && avatar.size > 0) window.location.reload();
|
||
}
|
||
};
|
||
|
||
const handlePasswordAction = async (formData: FormData) => {
|
||
const response = await updatePassword(formData);
|
||
if (response?.error) {
|
||
toast.error(`Hata: ${response.error}`);
|
||
} else {
|
||
toast.success("Şifre güncellendi!");
|
||
formRef.current?.reset();
|
||
}
|
||
};
|
||
|
||
const handleSaveAI = async () => {
|
||
const response = await saveAiSettings(aiProvider, apiKey);
|
||
if (response.error) {
|
||
toast.error(response.error);
|
||
return;
|
||
}
|
||
setHasApiKey(Boolean(response.hasApiKey));
|
||
setApiKey("");
|
||
toast.success("Yapay Zeka ayarları kaydedildi!");
|
||
};
|
||
|
||
const handleColorModeChange = async (value: string) => {
|
||
if (!isColorMode(value) || value === colorMode || isSavingColorMode) return;
|
||
|
||
const previousColorMode = colorMode;
|
||
setColorMode(value);
|
||
applyColorMode(value);
|
||
setIsSavingColorMode(true);
|
||
|
||
try {
|
||
const response = await saveColorMode(value);
|
||
if (response.error) {
|
||
setColorMode(previousColorMode);
|
||
applyColorMode(previousColorMode);
|
||
toast.error(response.error);
|
||
return;
|
||
}
|
||
|
||
toast.success("Görünüm tercihi kaydedildi.");
|
||
} finally {
|
||
setIsSavingColorMode(false);
|
||
}
|
||
};
|
||
|
||
const handleBrandingAssetChange = (
|
||
asset: BrandingAsset,
|
||
event: React.ChangeEvent<HTMLInputElement>,
|
||
) => {
|
||
const previousObjectUrl = assetObjectUrlRefs.current[asset];
|
||
if (previousObjectUrl) URL.revokeObjectURL(previousObjectUrl);
|
||
const file = event.target.files?.[0];
|
||
const objectUrl = file ? URL.createObjectURL(file) : "";
|
||
assetObjectUrlRefs.current[asset] = objectUrl || undefined;
|
||
setPendingAssetUrls((current) => ({ ...current, [asset]: objectUrl }));
|
||
};
|
||
|
||
const handleGeneralSettingsAction = async (formData: FormData) => {
|
||
setIsSavingBranding(true);
|
||
try {
|
||
const response = await saveGeneralSettings(formData);
|
||
if (response.error) {
|
||
toast.error(response.error);
|
||
return;
|
||
}
|
||
|
||
toast.success("Genel görünüm ve marka ayarları güncellendi.");
|
||
window.location.reload();
|
||
} finally {
|
||
setIsSavingBranding(false);
|
||
}
|
||
};
|
||
|
||
const handleRemoveBrandingAsset = async (asset: BrandingAsset) => {
|
||
setIsSavingBranding(true);
|
||
try {
|
||
const response = await removeBrandingAsset(asset);
|
||
if (response.error) {
|
||
toast.error(response.error);
|
||
return;
|
||
}
|
||
|
||
toast.success("Marka görseli kaldırıldı.");
|
||
window.location.reload();
|
||
} finally {
|
||
setIsSavingBranding(false);
|
||
}
|
||
};
|
||
|
||
const refreshI18nSettings = async () => {
|
||
const settings = await loadSettings();
|
||
setLanguage(settings.language);
|
||
setLocales(settings.i18n.locales);
|
||
setDefaultLocale(settings.i18n.defaultLocale);
|
||
setCatalogVersion(settings.i18n.catalogVersion);
|
||
setTranslations(settings.i18n.translations);
|
||
setReferenceKeys(settings.i18n.referenceKeys);
|
||
setCompletion(settings.i18n.completion);
|
||
};
|
||
|
||
const handleLanguagePreferenceChange = async (value: string) => {
|
||
setLanguage(value);
|
||
const response = await saveLanguagePreference(value);
|
||
if (response.error) {
|
||
toast.error(response.error);
|
||
return;
|
||
}
|
||
toast.success("Arayüz dili kaydedildi.");
|
||
window.location.reload();
|
||
};
|
||
|
||
const handleCreateLocale = async () => {
|
||
const response = await createLocaleAction(newLocale);
|
||
if (response.error) {
|
||
toast.error(response.error);
|
||
return;
|
||
}
|
||
toast.success("Dil eklendi.");
|
||
setSelectedLocale(response.locale?.code ?? newLocale.code);
|
||
await refreshI18nSettings();
|
||
};
|
||
|
||
const handleUpdateLocaleStatus = async (code: string, status: LocaleStatus) => {
|
||
const response = await updateLocaleStatusAction(code, status);
|
||
if (response.error) {
|
||
toast.error(response.error);
|
||
return;
|
||
}
|
||
toast.success("Dil durumu güncellendi.");
|
||
await refreshI18nSettings();
|
||
};
|
||
|
||
const handleSetDefaultLocale = async (code: string) => {
|
||
const response = await setDefaultLocaleAction(code);
|
||
if (response.error) {
|
||
toast.error(response.error);
|
||
return;
|
||
}
|
||
toast.success("Varsayılan dil güncellendi.");
|
||
await refreshI18nSettings();
|
||
};
|
||
|
||
const handleSaveTranslation = async (reference: ReferenceKey) => {
|
||
const value = editingValues[reference.key] ?? getTranslationValue(translations, selectedLocale, reference);
|
||
const response = await saveUiTranslationAction({
|
||
locale: selectedLocale,
|
||
namespace: reference.namespace,
|
||
key: reference.translationKey,
|
||
value,
|
||
});
|
||
if (response.error) {
|
||
toast.error(response.error);
|
||
return;
|
||
}
|
||
toast.success("Çeviri kaydedildi.");
|
||
await refreshI18nSettings();
|
||
};
|
||
|
||
const handleResetTranslation = async (reference: ReferenceKey) => {
|
||
const response = await resetUiTranslationAction({
|
||
locale: selectedLocale,
|
||
namespace: reference.namespace,
|
||
key: reference.translationKey,
|
||
});
|
||
if (response.error) {
|
||
toast.error(response.error);
|
||
return;
|
||
}
|
||
toast.success("Override sıfırlandı.");
|
||
setEditingValues((current) => ({ ...current, [reference.key]: "" }));
|
||
await refreshI18nSettings();
|
||
};
|
||
|
||
const handleExportI18n = async () => {
|
||
const response = await exportI18nAction();
|
||
if (response.error || !response.package) {
|
||
toast.error(response.error ?? "Export oluşturulamadı.");
|
||
return;
|
||
}
|
||
setImportJson(JSON.stringify(response.package, null, 2));
|
||
toast.success("Çeviri paketi aşağıdaki alana yazıldı.");
|
||
};
|
||
|
||
const handlePreviewImport = async () => {
|
||
const response = await previewI18nImportAction(importJson);
|
||
if (response.error || !response.preview) {
|
||
setImportPreview("");
|
||
toast.error(response.error ?? "Import paketi okunamadı.");
|
||
return;
|
||
}
|
||
setImportPreview(`${response.preview.localeCount} dil, ${response.preview.translationCount} çeviri, default: ${response.preview.defaultLocale}`);
|
||
};
|
||
|
||
const handleCommitImport = async () => {
|
||
const response = await commitI18nImportAction(importJson);
|
||
if (response.error) {
|
||
toast.error(response.error);
|
||
return;
|
||
}
|
||
toast.success("Çeviri paketi içe aktarıldı.");
|
||
setImportPreview("");
|
||
await refreshI18nSettings();
|
||
};
|
||
|
||
const filteredReferenceKeys = referenceKeys.filter((reference) => {
|
||
const namespaceMatches = selectedNamespace === "all" || reference.namespace === selectedNamespace;
|
||
const query = translationSearch.trim().toLowerCase();
|
||
const textMatches = !query || [reference.key, reference.tr, reference.en]
|
||
.some((value) => value.toLowerCase().includes(query));
|
||
return namespaceMatches && textMatches;
|
||
});
|
||
|
||
return (
|
||
<div className="mx-auto flex max-w-7xl flex-col gap-6">
|
||
<div className="flex flex-col gap-4 border-b border-border pb-5 lg:flex-row lg:items-end lg:justify-between">
|
||
<div>
|
||
<h1 className="text-3xl font-semibold tracking-normal text-foreground">
|
||
Ayarlar
|
||
</h1>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex flex-col gap-8 pb-12 md:flex-row md:items-start">
|
||
{/* Settings Sidebar */}
|
||
<div className="tiny-scrollbar flex w-full shrink-0 gap-2 overflow-x-auto pb-2 md:sticky md:top-8 md:max-h-[calc(100vh-4rem)] md:w-64 md:self-start md:flex-col md:overflow-y-auto md:pb-0">
|
||
{tabs.map((tab) => {
|
||
const Icon = tab.icon;
|
||
return (
|
||
<Button effect="shine"
|
||
key={tab.name}
|
||
type="button"
|
||
variant={activeTab === tab.name ? "default" : "secondary"}
|
||
onClick={() => setActiveTab(tab.name)}
|
||
className="h-auto shrink-0 justify-start gap-3 px-4 py-3 text-left"
|
||
>
|
||
<Icon className="h-4 w-4" />
|
||
{tab.name}
|
||
</Button>
|
||
)
|
||
})}
|
||
</div>
|
||
|
||
{/* Settings Content Area */}
|
||
<div className="flex-1">
|
||
{activeTab === "Genel" && (
|
||
<Card className="animate-in fade-in duration-300">
|
||
<CardContent className="p-6 sm:p-8">
|
||
<div className="mb-7 space-y-1.5">
|
||
<h2 className="text-xl font-bold text-foreground">Genel görünüm ve marka</h2>
|
||
<p className="max-w-2xl text-sm text-muted-foreground">
|
||
Web ve mobil istemcilerde kullanılan workspace kimliğini, marka görsellerini ve tema tercihlerini yönetin.
|
||
</p>
|
||
</div>
|
||
|
||
<form action={handleGeneralSettingsAction} className="max-w-4xl space-y-8">
|
||
<section className="space-y-5">
|
||
<div className="grid gap-5 sm:grid-cols-2">
|
||
<div className="space-y-2">
|
||
<Label htmlFor="workspaceName">Workspace adı</Label>
|
||
<Input
|
||
id="workspaceName"
|
||
name="workspaceName"
|
||
value={workspaceName}
|
||
onChange={(event) => setWorkspaceName(event.target.value)}
|
||
minLength={1}
|
||
maxLength={120}
|
||
required
|
||
/>
|
||
<p className="text-xs text-muted-foreground">
|
||
Firma, freelance marka veya çalışma alanı adınız.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="metaTitle">Tarayıcı başlığı</Label>
|
||
<Input
|
||
id="metaTitle"
|
||
name="metaTitle"
|
||
value={metaTitle}
|
||
onChange={(event) => setMetaTitle(event.target.value)}
|
||
minLength={1}
|
||
maxLength={80}
|
||
required
|
||
/>
|
||
<p className="text-xs text-muted-foreground">
|
||
Sekme başlıklarında ve uygulama metadata bilgisinde kullanılır.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="max-w-md space-y-2">
|
||
<Label htmlFor="shortName">Kısa uygulama adı</Label>
|
||
<Input
|
||
id="shortName"
|
||
name="shortName"
|
||
value={shortName}
|
||
onChange={(event) => setShortName(event.target.value)}
|
||
minLength={1}
|
||
maxLength={24}
|
||
required
|
||
/>
|
||
<p className="text-xs text-muted-foreground">
|
||
Mobil uygulama ve ana ekrana ekleme alanlarında kullanılan kısa ad.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="border-t border-border pt-7">
|
||
<div className="grid gap-5 md:grid-cols-2">
|
||
<BrandingAssetField
|
||
asset="lightLogo"
|
||
inputId="lightLogo"
|
||
name="lightLogo"
|
||
title="Light logo"
|
||
accept="image/png,image/jpeg,image/webp,image/gif"
|
||
currentUrl={assetUrls.lightLogo}
|
||
pendingUrl={pendingAssetUrls.lightLogo}
|
||
hasCustomAsset={customAssets.lightLogo}
|
||
previewTone="light"
|
||
disabled={isSavingBranding}
|
||
onChange={handleBrandingAssetChange}
|
||
onRemove={handleRemoveBrandingAsset}
|
||
/>
|
||
<BrandingAssetField
|
||
asset="darkLogo"
|
||
inputId="darkLogo"
|
||
name="darkLogo"
|
||
title="Dark logo"
|
||
accept="image/png,image/jpeg,image/webp,image/gif"
|
||
currentUrl={assetUrls.darkLogo}
|
||
pendingUrl={pendingAssetUrls.darkLogo}
|
||
hasCustomAsset={customAssets.darkLogo}
|
||
previewTone="dark"
|
||
disabled={isSavingBranding}
|
||
onChange={handleBrandingAssetChange}
|
||
onRemove={handleRemoveBrandingAsset}
|
||
/>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="space-y-4 border-t border-border pt-7">
|
||
<div className="space-y-1">
|
||
<h3 className="text-sm font-semibold text-foreground">Tarayıcı ikonu</h3>
|
||
<p className="text-xs text-muted-foreground">
|
||
Favicon, web manifest ve mobil instance metadata alanlarında kullanılır.
|
||
</p>
|
||
</div>
|
||
<BrandingAssetField
|
||
asset="favicon"
|
||
inputId="favicon"
|
||
name="favicon"
|
||
title="Favicon"
|
||
description="Kare PNG önerilir; en fazla 5 MB."
|
||
accept="image/png"
|
||
currentUrl={assetUrls.favicon}
|
||
pendingUrl={pendingAssetUrls.favicon}
|
||
hasCustomAsset={customAssets.favicon}
|
||
previewTone="neutral"
|
||
compact
|
||
disabled={isSavingBranding}
|
||
onChange={handleBrandingAssetChange}
|
||
onRemove={handleRemoveBrandingAsset}
|
||
/>
|
||
</section>
|
||
|
||
<section className="space-y-4 border-t border-border pt-7">
|
||
<div className="space-y-1">
|
||
<Label htmlFor="primaryColor">Ana renk</Label>
|
||
<p className="text-xs text-muted-foreground">
|
||
Bir renk seçin; vurgu, focus ve yumuşak yüzey tonları otomatik türetilir.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="flex max-w-sm items-center gap-3">
|
||
<Input
|
||
type="color"
|
||
value={primaryColor}
|
||
onChange={(event) => setPrimaryColor(event.target.value.toUpperCase())}
|
||
aria-label="Ana renk seçici"
|
||
className="h-11 w-16 shrink-0 cursor-pointer p-1"
|
||
/>
|
||
<Input
|
||
id="primaryColor"
|
||
name="primaryColor"
|
||
value={primaryColor}
|
||
onChange={(event) => setPrimaryColor(event.target.value.toUpperCase())}
|
||
pattern="^#[0-9A-Fa-f]{6}$"
|
||
maxLength={7}
|
||
placeholder="#C81E1E"
|
||
required
|
||
className="font-mono uppercase"
|
||
/>
|
||
<span
|
||
className="h-10 w-10 shrink-0 rounded-md border border-border"
|
||
style={{ backgroundColor: /^#[0-9A-Fa-f]{6}$/.test(primaryColor) ? primaryColor : "transparent" }}
|
||
aria-hidden="true"
|
||
/>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="space-y-4 border-t border-border pt-7">
|
||
<div className="space-y-1">
|
||
<h3 className="text-sm font-semibold text-foreground">Portal metinleri</h3>
|
||
<p className="text-xs text-muted-foreground">
|
||
Müşteri portalında kullanılacak karşılama ve footer metinlerini aktif dillere göre girin.
|
||
</p>
|
||
</div>
|
||
<LocalizedFields
|
||
idPrefix="branding-content"
|
||
defaultLocale={defaultLocale}
|
||
locales={locales.filter((locale) => locale.status !== "archived")}
|
||
fields={contentTranslationRegistry.branding}
|
||
values={brandingContentTranslations}
|
||
/>
|
||
</section>
|
||
|
||
<div className="flex items-center gap-3 border-t border-border pt-6">
|
||
<Button variant="default" effect="shine" type="submit" loading={isSavingBranding} className="gap-2">
|
||
<Upload className="h-4 w-4" aria-hidden="true" />
|
||
Genel ayarları kaydet
|
||
</Button>
|
||
</div>
|
||
</form>
|
||
|
||
<section className="mt-10 space-y-5 border-t border-border pt-8">
|
||
<div className="space-y-1.5">
|
||
<h3 className="text-sm font-semibold text-foreground">Tema görünümü</h3>
|
||
<p className="max-w-2xl text-sm text-muted-foreground">
|
||
Arayüzün açık, koyu veya cihazınızla uyumlu görünmesini seçin.
|
||
</p>
|
||
</div>
|
||
|
||
<RadioGroup
|
||
value={colorMode}
|
||
onValueChange={handleColorModeChange}
|
||
disabled={isSavingColorMode}
|
||
aria-label="Tema görünümü"
|
||
className="grid max-w-3xl gap-3 sm:grid-cols-3"
|
||
>
|
||
{colorModeOptions.map((option) => {
|
||
const Icon = option.icon;
|
||
const selected = colorMode === option.value;
|
||
|
||
return (
|
||
<Label
|
||
key={option.value}
|
||
htmlFor={`color-mode-${option.value}`}
|
||
className={`relative flex min-h-40 cursor-pointer flex-col justify-between gap-5 rounded-md border p-4 transition-[color,background-color,border-color,box-shadow] ${
|
||
selected
|
||
? "border-primary bg-primary/5 ring-1 ring-primary"
|
||
: "border-border bg-card hover:border-primary/50 hover:bg-muted/40"
|
||
} ${isSavingColorMode ? "cursor-wait opacity-70" : ""}`}
|
||
>
|
||
<div className="flex items-start justify-between gap-3">
|
||
<span
|
||
className={`flex h-10 w-10 items-center justify-center rounded-md border ${
|
||
selected
|
||
? "border-primary/30 bg-primary/10 text-primary"
|
||
: "border-border bg-muted text-muted-foreground"
|
||
}`}
|
||
>
|
||
<Icon className="h-5 w-5" aria-hidden="true" />
|
||
</span>
|
||
<RadioGroupItem
|
||
id={`color-mode-${option.value}`}
|
||
value={option.value}
|
||
aria-label={option.label}
|
||
/>
|
||
</div>
|
||
<span className="space-y-1">
|
||
<span className="block text-sm font-semibold text-foreground">
|
||
{option.label}
|
||
</span>
|
||
<span className="block text-xs font-normal leading-relaxed text-muted-foreground">
|
||
{option.description}
|
||
</span>
|
||
</span>
|
||
</Label>
|
||
);
|
||
})}
|
||
</RadioGroup>
|
||
|
||
<p className="text-xs text-muted-foreground" aria-live="polite">
|
||
{isSavingColorMode
|
||
? "Görünüm tercihi kaydediliyor…"
|
||
: "Değişiklik tüm sayfalara anında uygulanır."}
|
||
</p>
|
||
</section>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
{activeTab === "Diller ve çeviriler" && (
|
||
<Card className="animate-in fade-in duration-300">
|
||
<CardContent className="space-y-8 p-6 sm:p-8">
|
||
<div className="flex flex-col gap-4 border-b border-border pb-6 lg:flex-row lg:items-start lg:justify-between">
|
||
<div className="space-y-1.5">
|
||
<h2 className="text-xl font-bold text-foreground">Diller ve çeviriler</h2>
|
||
<p className="max-w-2xl text-sm text-muted-foreground">
|
||
Instance dillerini, kişisel arayüz dilini ve katalog override metinlerini yönetin.
|
||
</p>
|
||
</div>
|
||
<div className="rounded-md border border-border bg-muted/30 px-3 py-2 text-xs text-muted-foreground">
|
||
Catalog v{catalogVersion}
|
||
</div>
|
||
</div>
|
||
|
||
<section className="grid gap-5 lg:grid-cols-[minmax(0,1fr)_320px]">
|
||
<div className="space-y-4">
|
||
<div className="flex items-center gap-2">
|
||
<Globe2 className="h-4 w-4 text-muted-foreground" />
|
||
<h3 className="text-sm font-semibold text-foreground">Aktif diller</h3>
|
||
</div>
|
||
<div className="grid gap-3 md:grid-cols-2">
|
||
{locales.map((locale) => {
|
||
const localeCompletion = completion.find((item) => item.locale === locale.code);
|
||
return (
|
||
<div key={locale.code} className="rounded-md border border-border bg-card p-4">
|
||
<div className="flex items-start justify-between gap-3">
|
||
<div>
|
||
<div className="flex items-center gap-2">
|
||
<span className="font-semibold text-foreground">{locale.nativeName}</span>
|
||
<span className="rounded-md bg-muted px-2 py-0.5 text-xs text-muted-foreground">{locale.code}</span>
|
||
</div>
|
||
<p className="mt-1 text-xs text-muted-foreground">
|
||
{locale.name} · {locale.status} · fallback: {locale.fallbackLocale ?? "-"}
|
||
</p>
|
||
</div>
|
||
{locale.builtIn ? (
|
||
<span className="rounded-md bg-primary/10 px-2 py-0.5 text-xs text-primary">Built-in</span>
|
||
) : null}
|
||
</div>
|
||
<div className="mt-4 h-2 overflow-hidden rounded-full bg-muted">
|
||
<div
|
||
className="h-full rounded-full bg-primary"
|
||
style={{ width: `${localeCompletion?.percent ?? 0}%` }}
|
||
/>
|
||
</div>
|
||
<div className="mt-2 flex items-center justify-between text-xs text-muted-foreground">
|
||
<span>{localeCompletion?.percent ?? 0}% tamamlandı</span>
|
||
<span>{localeCompletion?.translated ?? 0}/{localeCompletion?.total ?? 0}</span>
|
||
</div>
|
||
<div className="mt-4 flex flex-wrap gap-2">
|
||
<Button effect="shine" type="button" size="sm" variant="secondary" onClick={() => setSelectedLocale(locale.code)}>
|
||
Düzenle
|
||
</Button>
|
||
{locale.status !== "active" ? (
|
||
<Button effect="shine" type="button" size="sm" variant="secondary" onClick={() => handleUpdateLocaleStatus(locale.code, "active")}>
|
||
Aktifleştir
|
||
</Button>
|
||
) : null}
|
||
{locale.status === "active" ? (
|
||
<Button effect="shine" type="button" size="sm" variant="secondary" onClick={() => handleSetDefaultLocale(locale.code)} disabled={defaultLocale === locale.code}>
|
||
{defaultLocale === locale.code ? "Varsayılan" : "Default yap"}
|
||
</Button>
|
||
) : null}
|
||
{!locale.builtIn && locale.status !== "archived" ? (
|
||
<Button effect="shine" type="button" size="sm" variant="secondary" onClick={() => handleUpdateLocaleStatus(locale.code, "archived")}>
|
||
Arşivle
|
||
</Button>
|
||
) : null}
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-4 rounded-md border border-border bg-muted/20 p-4">
|
||
<h3 className="text-sm font-semibold text-foreground">Yeni dil ekle</h3>
|
||
<div className="grid gap-3">
|
||
<Input value={newLocale.code} onChange={(event) => setNewLocale((current) => ({ ...current, code: event.target.value }))} placeholder="fr" />
|
||
<Input value={newLocale.name} onChange={(event) => setNewLocale((current) => ({ ...current, name: event.target.value }))} placeholder="French" />
|
||
<Input value={newLocale.nativeName} onChange={(event) => setNewLocale((current) => ({ ...current, nativeName: event.target.value }))} placeholder="Français" />
|
||
<select
|
||
value={newLocale.fallbackLocale}
|
||
onChange={(event) => setNewLocale((current) => ({ ...current, fallbackLocale: event.target.value }))}
|
||
className="h-10 rounded-md border border-input bg-background px-3 text-sm text-foreground"
|
||
>
|
||
{locales.filter((locale) => locale.status !== "archived").map((locale) => (
|
||
<option key={locale.code} value={locale.code}>{locale.nativeName}</option>
|
||
))}
|
||
</select>
|
||
<select
|
||
value={newLocale.textDirection}
|
||
onChange={(event) => setNewLocale((current) => ({ ...current, textDirection: event.target.value as "ltr" | "rtl" }))}
|
||
className="h-10 rounded-md border border-input bg-background px-3 text-sm text-foreground"
|
||
>
|
||
<option value="ltr">LTR</option>
|
||
<option value="rtl">RTL</option>
|
||
</select>
|
||
<Button effect="shine" type="button" variant="default" className="gap-2" onClick={handleCreateLocale}>
|
||
<Languages className="h-4 w-4" />
|
||
Dili ekle
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="grid gap-5 border-t border-border pt-7 lg:grid-cols-2">
|
||
<div className="space-y-2">
|
||
<Label>Kişisel arayüz dili</Label>
|
||
<select
|
||
value={language}
|
||
onChange={(event) => handleLanguagePreferenceChange(event.target.value)}
|
||
className="h-10 w-full rounded-md border border-input bg-background px-3 text-sm text-foreground"
|
||
>
|
||
{locales.filter((locale) => locale.status === "active").map((locale) => (
|
||
<option key={locale.code} value={locale.code}>{locale.nativeName}</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label>Çeviri hedef dili</Label>
|
||
<select
|
||
value={selectedLocale}
|
||
onChange={(event) => setSelectedLocale(event.target.value)}
|
||
className="h-10 w-full rounded-md border border-input bg-background px-3 text-sm text-foreground"
|
||
>
|
||
{locales.filter((locale) => locale.status !== "archived").map((locale) => (
|
||
<option key={locale.code} value={locale.code}>{locale.nativeName}</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="space-y-4 border-t border-border pt-7">
|
||
<div className="flex flex-col gap-3 lg:flex-row lg:items-end">
|
||
<div className="space-y-2 lg:w-56">
|
||
<Label>Namespace</Label>
|
||
<select
|
||
value={selectedNamespace}
|
||
onChange={(event) => setSelectedNamespace(event.target.value)}
|
||
className="h-10 w-full rounded-md border border-input bg-background px-3 text-sm text-foreground"
|
||
>
|
||
<option value="all">Tümü</option>
|
||
{[...new Set(referenceKeys.map((reference) => reference.namespace))].map((namespace) => (
|
||
<option key={namespace} value={namespace}>{namespace}</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
<div className="flex-1 space-y-2">
|
||
<Label>Eksik anahtar veya metin ara</Label>
|
||
<Input value={translationSearch} onChange={(event) => setTranslationSearch(event.target.value)} placeholder="navigation.projects" />
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-3">
|
||
{filteredReferenceKeys.slice(0, 60).map((reference) => {
|
||
const currentValue = getTranslationValue(translations, selectedLocale, reference);
|
||
const draftValue = editingValues[reference.key] ?? currentValue;
|
||
const isMissing = !currentValue;
|
||
return (
|
||
<div key={reference.key} className="grid gap-3 rounded-md border border-border p-4 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
|
||
<div className="space-y-2">
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
<code className="rounded-md bg-muted px-2 py-1 text-xs">{reference.key}</code>
|
||
{isMissing ? <span className="rounded-md bg-destructive/10 px-2 py-1 text-xs text-destructive">Eksik</span> : null}
|
||
</div>
|
||
<p className="text-sm text-muted-foreground">TR: {reference.tr}</p>
|
||
<p className="text-sm text-muted-foreground">EN: {reference.en}</p>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Textarea
|
||
value={draftValue}
|
||
onChange={(event) => setEditingValues((current) => ({ ...current, [reference.key]: event.target.value }))}
|
||
rows={3}
|
||
placeholder={reference.en || reference.tr}
|
||
/>
|
||
<div className="flex gap-2">
|
||
<Button effect="shine" type="button" size="sm" variant="default" onClick={() => handleSaveTranslation(reference)}>
|
||
Kaydet
|
||
</Button>
|
||
<Button effect="shine" type="button" size="sm" variant="secondary" onClick={() => handleResetTranslation(reference)}>
|
||
Override sıfırla
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</section>
|
||
|
||
<section className="space-y-4 border-t border-border pt-7">
|
||
<div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
|
||
<h3 className="text-sm font-semibold text-foreground">JSON import / export</h3>
|
||
<Button effect="shine" type="button" variant="secondary" className="gap-2" onClick={handleExportI18n}>
|
||
<Download className="h-4 w-4" />
|
||
Export oluştur
|
||
</Button>
|
||
</div>
|
||
<Textarea
|
||
value={importJson}
|
||
onChange={(event) => setImportJson(event.target.value)}
|
||
rows={8}
|
||
className="font-mono text-xs"
|
||
placeholder='{"format":"neta-i18n","version":1,...}'
|
||
/>
|
||
{importPreview ? <p className="text-sm text-muted-foreground">{importPreview}</p> : null}
|
||
<div className="flex flex-wrap gap-2">
|
||
<Button effect="shine" type="button" variant="secondary" onClick={handlePreviewImport}>Preview</Button>
|
||
<Button effect="shine" type="button" variant="default" onClick={handleCommitImport}>Import et</Button>
|
||
</div>
|
||
</section>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
{activeTab === "Profile & Account" && (
|
||
<Card className="animate-in fade-in duration-300">
|
||
<CardContent className="p-6 sm:p-8">
|
||
<h2 className="text-xl font-bold mb-6 text-foreground">Kullanıcı Profili</h2>
|
||
<form action={handleProfileAction} className="space-y-6 max-w-xl">
|
||
<div className="flex items-center gap-4 mb-6">
|
||
{avatarUrl ? (
|
||
<Image
|
||
src={avatarUrl}
|
||
alt="Avatar"
|
||
width={64}
|
||
height={64}
|
||
unoptimized
|
||
className="h-16 w-16 rounded-full border border-border object-cover"
|
||
/>
|
||
) : (
|
||
<div className="flex h-16 w-16 items-center justify-center rounded-full border border-border bg-muted/50">
|
||
<User className="h-8 w-8 text-muted-foreground" />
|
||
</div>
|
||
)}
|
||
<div className="flex-1 space-y-2">
|
||
<Label htmlFor="avatar">Profil Fotoğrafı</Label>
|
||
<Input id="avatar" name="avatar" type="file" accept="image/*" className="cursor-pointer" />
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div className="space-y-2">
|
||
<Label htmlFor="firstName">Ad</Label>
|
||
<Input id="firstName" name="firstName" value={firstName} onChange={(e) => setFirstName(e.target.value)} />
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label htmlFor="lastName">Soyad</Label>
|
||
<Input id="lastName" name="lastName" value={lastName} onChange={(e) => setLastName(e.target.value)} />
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-4 pt-4">
|
||
<Button variant="default" effect="shine" type="submit" className="gap-2">
|
||
<Save className="h-4 w-4" /> Profili Kaydet
|
||
</Button>
|
||
</div>
|
||
</form>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
{activeTab === "Security" && (
|
||
<Card className="animate-in fade-in duration-300">
|
||
<CardContent className="p-6 sm:p-8">
|
||
<h2 className="text-xl font-bold mb-6 text-foreground">Şifre İşlemleri</h2>
|
||
<form ref={formRef} action={handlePasswordAction} className="space-y-6 max-w-xl">
|
||
<div className="space-y-2">
|
||
<Label htmlFor="currentPassword">Mevcut Şifre</Label>
|
||
<Input id="currentPassword" name="currentPassword" type="password" required />
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label htmlFor="password">Yeni Şifre</Label>
|
||
<Input id="password" name="password" type="password" minLength={8} placeholder="En az 8 karakter" required />
|
||
</div>
|
||
<div className="flex items-center gap-4 pt-4">
|
||
<Button variant="default" effect="shine" type="submit" className="gap-2">
|
||
<Save className="h-4 w-4" /> Şifreyi Güncelle
|
||
</Button>
|
||
</div>
|
||
</form>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
{activeTab === "AI Preferences" && (
|
||
<Card className="animate-in fade-in duration-300">
|
||
<CardContent className="p-6 sm:p-8">
|
||
<h2 className="text-xl font-bold mb-6 text-foreground">AI Asistan Konfigürasyonu</h2>
|
||
|
||
<div className="space-y-8 max-w-2xl">
|
||
<div className="space-y-4">
|
||
<h3 className="text-sm font-semibold border-b border-border pb-2">Model ve Sağlayıcı Seçimi</h3>
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||
<label onClick={() => setAiProvider("gemini")} className={`flex flex-col p-4 rounded-xl cursor-pointer relative overflow-hidden transition-all ${aiProvider === "gemini" ? "border-2 border-primary bg-primary/5" : "border border-border bg-card hover:border-primary/50"}`}>
|
||
{aiProvider === "gemini" && <div className="absolute top-3 right-3"><div className="w-2.5 h-2.5 rounded-full bg-primary"></div></div>}
|
||
<span className="font-semibold text-foreground mb-1">Google Gemini</span>
|
||
<span className="text-xs text-muted-foreground leading-relaxed">Gelişmiş akıl yürütme. (Varsayılan)</span>
|
||
</label>
|
||
<label onClick={() => setAiProvider("openai")} className={`flex flex-col p-4 rounded-xl cursor-pointer relative overflow-hidden transition-all ${aiProvider === "openai" ? "border-2 border-primary bg-primary/5" : "border border-border bg-card hover:border-primary/50"}`}>
|
||
{aiProvider === "openai" && <div className="absolute top-3 right-3"><div className="w-2.5 h-2.5 rounded-full bg-primary"></div></div>}
|
||
<span className="font-semibold text-foreground mb-1">OpenAI (GPT)</span>
|
||
<span className="text-xs text-muted-foreground leading-relaxed">GPT-4o veya GPT-4.</span>
|
||
</label>
|
||
<label onClick={() => setAiProvider("groq")} className={`flex flex-col p-4 rounded-xl cursor-pointer relative overflow-hidden transition-all ${aiProvider === "groq" ? "border-2 border-primary bg-primary/5" : "border border-border bg-card hover:border-primary/50"}`}>
|
||
{aiProvider === "groq" && <div className="absolute top-3 right-3"><div className="w-2.5 h-2.5 rounded-full bg-primary"></div></div>}
|
||
<span className="font-semibold text-foreground mb-1">Groq (Llama 3)</span>
|
||
<span className="text-xs text-muted-foreground leading-relaxed">Yüksek hızlı bulut çıkarımı.</span>
|
||
</label>
|
||
<label onClick={() => setAiProvider("ollama")} className={`flex flex-col p-4 rounded-xl cursor-pointer relative overflow-hidden transition-all ${aiProvider === "ollama" ? "border-2 border-primary bg-primary/5" : "border border-border bg-card hover:border-primary/50"}`}>
|
||
{aiProvider === "ollama" && <div className="absolute top-3 right-3"><div className="w-2.5 h-2.5 rounded-full bg-primary"></div></div>}
|
||
<span className="font-semibold text-foreground mb-1">Ollama (Yerel)</span>
|
||
<span className="text-xs text-muted-foreground leading-relaxed">Gizlilik odaklı yerel modeller.</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
{aiProvider !== "ollama" && (
|
||
<div className="space-y-4">
|
||
<h3 className="text-sm font-semibold border-b border-border pb-2">API Keys</h3>
|
||
<div className="bg-muted/30 border border-border rounded-xl p-5 flex flex-col gap-3">
|
||
<div className="flex items-center gap-2 mb-1">
|
||
<Key className="h-4 w-4 text-muted-foreground" />
|
||
<Label className="text-sm font-medium">{aiProvider.toUpperCase()} API Key</Label>
|
||
</div>
|
||
<Input
|
||
type="password"
|
||
value={apiKey}
|
||
onChange={(e) => setApiKey(e.target.value)}
|
||
placeholder={hasApiKey ? "Kayıtlı anahtarı korumak için boş bırakın" : "sk-..."}
|
||
/>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<div className="flex items-center gap-4 pt-4">
|
||
<Button variant="default" effect="shine" onClick={handleSaveAI} className="gap-2">
|
||
<Save className="h-4 w-4" /> Ayarları Kaydet
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
{["Integrations", "Notifications", "Billing & Plans"].includes(activeTab) && (
|
||
<Card className="animate-in fade-in duration-300">
|
||
<CardContent className="flex flex-col items-center justify-center h-[400px] opacity-60">
|
||
<Blocks className="h-12 w-12 text-muted-foreground mb-4" />
|
||
<h2 className="text-lg font-bold mb-2 text-foreground">{activeTab}</h2>
|
||
<p className="text-sm text-center text-muted-foreground">Bu bölüm şu an geliştirme aşamasındadır.</p>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
type BrandingAssetFieldProps = {
|
||
asset: BrandingAsset;
|
||
inputId: string;
|
||
name: string;
|
||
title: string;
|
||
description?: string;
|
||
accept: string;
|
||
currentUrl: string;
|
||
pendingUrl: string;
|
||
hasCustomAsset: boolean;
|
||
previewTone: "light" | "dark" | "neutral";
|
||
compact?: boolean;
|
||
disabled: boolean;
|
||
onChange: (asset: BrandingAsset, event: React.ChangeEvent<HTMLInputElement>) => void;
|
||
onRemove: (asset: BrandingAsset) => void;
|
||
};
|
||
|
||
function BrandingAssetField({
|
||
asset,
|
||
inputId,
|
||
name,
|
||
title,
|
||
description,
|
||
accept,
|
||
currentUrl,
|
||
pendingUrl,
|
||
hasCustomAsset,
|
||
previewTone,
|
||
compact = false,
|
||
disabled,
|
||
onChange,
|
||
onRemove,
|
||
}: BrandingAssetFieldProps) {
|
||
const previewUrl = pendingUrl || (hasCustomAsset ? currentUrl : "");
|
||
const previewClassName = {
|
||
light: "bg-white",
|
||
dark: "bg-neutral-950",
|
||
neutral: "bg-muted/40",
|
||
}[previewTone];
|
||
|
||
return (
|
||
<div className={`grid gap-4 rounded-md border border-border p-4 ${compact ? "max-w-2xl sm:grid-cols-[minmax(0,1fr)_160px]" : ""}`}>
|
||
<div className="space-y-3">
|
||
<div className="space-y-1">
|
||
<Label htmlFor={inputId}>{title}</Label>
|
||
{description ? <p className="text-xs text-muted-foreground">{description}</p> : null}
|
||
</div>
|
||
<Input
|
||
id={inputId}
|
||
name={name}
|
||
type="file"
|
||
accept={accept}
|
||
onChange={(event) => onChange(asset, event)}
|
||
className="cursor-pointer"
|
||
/>
|
||
{hasCustomAsset ? (
|
||
<Button effect="shine"
|
||
type="button"
|
||
variant="secondary"
|
||
size="sm"
|
||
disabled={disabled}
|
||
onClick={() => onRemove(asset)}
|
||
className="gap-2 text-destructive hover:text-destructive"
|
||
>
|
||
<Trash2 className="h-4 w-4" aria-hidden="true" />
|
||
Kaldır
|
||
</Button>
|
||
) : null}
|
||
</div>
|
||
|
||
<div className={`flex min-h-28 items-center justify-center overflow-hidden rounded-md border border-border p-4 ${previewClassName}`}>
|
||
{previewUrl ? (
|
||
<Image
|
||
src={previewUrl}
|
||
alt={`${title} önizlemesi`}
|
||
width={compact ? 72 : 220}
|
||
height={compact ? 72 : 80}
|
||
unoptimized
|
||
className={compact ? "h-16 w-16 object-contain" : "max-h-20 w-auto max-w-full object-contain"}
|
||
/>
|
||
) : (
|
||
<div className={previewTone === "dark" ? "text-neutral-400" : "text-muted-foreground"}>
|
||
<ImageIcon className="h-7 w-7" aria-hidden="true" />
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function getTranslationValue(
|
||
translations: TranslationRow[],
|
||
locale: string,
|
||
reference: ReferenceKey,
|
||
): string {
|
||
return translations.find(
|
||
(translation) =>
|
||
translation.locale === locale &&
|
||
translation.namespace === reference.namespace &&
|
||
translation.key === reference.translationKey,
|
||
)?.value ?? "";
|
||
}
|
||
|
||
function toLocalizedValues(rows: ContentTranslationRow[]) {
|
||
return rows.reduce<Record<string, Record<string, string>>>((result, row) => {
|
||
result[row.locale] = result[row.locale] ?? {};
|
||
result[row.locale][row.field] = row.value;
|
||
return result;
|
||
}, {});
|
||
}
|