This commit is contained in:
openhands committed
1 parent
8efd032cc6
commit
df38dccbf1
735 files changed
+128321
-120870
No files matched your search
@@ -1,127 +1,145 @@
|
||||
"use client";
|
||||
|
||||
import { useRef, useState } from "react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import Image from "next/image";
|
||||
import { saveFavicon, deleteFavicon } from "@/actions/save-favicon";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useRef, useState } from "react";
|
||||
import { deleteFavicon, saveFavicon } from "@/actions/save-favicon";
|
||||
import { FaviconGenerator } from "./favicon-generator";
|
||||
|
||||
export function FaviconForm({ currentUrl }: { currentUrl: string | null }) {
|
||||
const t = useTranslations("pages.admin.favicon");
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [deleting, setDeleting] = useState(false);
|
||||
const [preview, setPreview] = useState<string | null>(currentUrl);
|
||||
const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);
|
||||
const formRef = useRef<HTMLFormElement>(null);
|
||||
const t = useTranslations("pages.admin.favicon");
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [deleting, setDeleting] = useState(false);
|
||||
const [preview, setPreview] = useState<string | null>(currentUrl);
|
||||
const [message, setMessage] = useState<{
|
||||
type: "success" | "error";
|
||||
text: string;
|
||||
} | null>(null);
|
||||
const formRef = useRef<HTMLFormElement>(null);
|
||||
|
||||
async function handleUpload(formData: FormData) {
|
||||
setUploading(true);
|
||||
setMessage(null);
|
||||
const result = await saveFavicon(formData);
|
||||
setUploading(false);
|
||||
async function handleUpload(formData: FormData) {
|
||||
setUploading(true);
|
||||
setMessage(null);
|
||||
const result = await saveFavicon(formData);
|
||||
setUploading(false);
|
||||
|
||||
if (result.success && result.url) {
|
||||
setPreview(result.url);
|
||||
setMessage({ type: "success", text: t("saved") });
|
||||
formRef.current?.reset();
|
||||
} else {
|
||||
setMessage({ type: "error", text: result.error ?? t("error") });
|
||||
}
|
||||
}
|
||||
if (result.success && result.url) {
|
||||
setPreview(result.url);
|
||||
setMessage({ type: "success", text: t("saved") });
|
||||
formRef.current?.reset();
|
||||
} else {
|
||||
setMessage({ type: "error", text: result.error ?? t("error") });
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete() {
|
||||
if (!confirm(t("confirmDelete"))) return;
|
||||
setDeleting(true);
|
||||
setMessage(null);
|
||||
const result = await deleteFavicon();
|
||||
setDeleting(false);
|
||||
async function handleDelete() {
|
||||
if (!confirm(t("confirmDelete"))) return;
|
||||
setDeleting(true);
|
||||
setMessage(null);
|
||||
const result = await deleteFavicon();
|
||||
setDeleting(false);
|
||||
|
||||
if (result.success) {
|
||||
setPreview(null);
|
||||
setMessage({ type: "success", text: t("deleted") });
|
||||
} else {
|
||||
setMessage({ type: "error", text: result.error ?? t("error") });
|
||||
}
|
||||
}
|
||||
if (result.success) {
|
||||
setPreview(null);
|
||||
setMessage({ type: "success", text: t("deleted") });
|
||||
} else {
|
||||
setMessage({ type: "error", text: result.error ?? t("error") });
|
||||
}
|
||||
}
|
||||
|
||||
async function handleGenerated(blob: Blob) {
|
||||
setUploading(true);
|
||||
setMessage(null);
|
||||
const file = new File([blob], "favicon.png", { type: "image/png" });
|
||||
const fd = new FormData();
|
||||
fd.append("file", file);
|
||||
const result = await saveFavicon(fd);
|
||||
setUploading(false);
|
||||
async function handleGenerated(blob: Blob) {
|
||||
setUploading(true);
|
||||
setMessage(null);
|
||||
const file = new File([blob], "favicon.png", { type: "image/png" });
|
||||
const fd = new FormData();
|
||||
fd.append("file", file);
|
||||
const result = await saveFavicon(fd);
|
||||
setUploading(false);
|
||||
|
||||
if (result.success && result.url) {
|
||||
setPreview(result.url);
|
||||
setMessage({ type: "success", text: t("saved") });
|
||||
} else {
|
||||
setMessage({ type: "error", text: result.error ?? t("error") });
|
||||
}
|
||||
}
|
||||
if (result.success && result.url) {
|
||||
setPreview(result.url);
|
||||
setMessage({ type: "success", text: t("saved") });
|
||||
} else {
|
||||
setMessage({ type: "error", text: result.error ?? t("error") });
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid gap-6 lg:grid-cols-2">
|
||||
<div className="admin-card">
|
||||
<h3 className="text-sm font-extrabold text-[var(--admin-text)] mb-4">{t("uploadLabel")}</h3>
|
||||
{preview && (
|
||||
<div className="mb-6">
|
||||
<label className="block text-xs font-bold text-[var(--admin-text-muted)] uppercase tracking-wider mb-2">
|
||||
{t("current")}
|
||||
</label>
|
||||
<div className="flex items-center gap-4">
|
||||
<Image
|
||||
src={preview}
|
||||
alt="Favicon preview"
|
||||
width={64}
|
||||
height={64}
|
||||
className="rounded-lg border-2 border-[var(--admin-border)] object-contain bg-[var(--admin-surface)]"
|
||||
unoptimized
|
||||
/>
|
||||
<div className="text-xs text-[var(--admin-text-muted)] break-all">{preview}</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
return (
|
||||
<div className="grid gap-6 lg:grid-cols-2">
|
||||
<div className="admin-card">
|
||||
<h3 className="text-sm font-extrabold text-[var(--admin-text)] mb-4">
|
||||
{t("uploadLabel")}
|
||||
</h3>
|
||||
{preview && (
|
||||
<div className="mb-6">
|
||||
<label className="block text-xs font-bold text-[var(--admin-text-muted)] uppercase tracking-wider mb-2">
|
||||
{t("current")}
|
||||
</label>
|
||||
<div className="flex items-center gap-4">
|
||||
<Image
|
||||
src={preview}
|
||||
alt="Favicon preview"
|
||||
width={64}
|
||||
height={64}
|
||||
className="rounded-lg border-2 border-[var(--admin-border)] object-contain bg-[var(--admin-surface)]"
|
||||
unoptimized
|
||||
/>
|
||||
<div className="text-xs text-[var(--admin-text-muted)] break-all">
|
||||
{preview}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form action={handleUpload} ref={formRef}>
|
||||
<div className="mb-4">
|
||||
<input
|
||||
type="file"
|
||||
name="file"
|
||||
accept=".png,.jpg,.jpeg,.gif,.webp,.ico,.svg"
|
||||
required
|
||||
className="block w-full text-sm text-[var(--color-text-readable)] file:mr-3 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-[var(--admin-accent)] file:text-[var(--color-primary-foreground-readable)] cursor-pointer"
|
||||
/>
|
||||
<p className="mt-1 text-xs text-[var(--admin-text-muted)]">{t("uploadHint")}</p>
|
||||
</div>
|
||||
<form action={handleUpload} ref={formRef}>
|
||||
<div className="mb-4">
|
||||
<input
|
||||
type="file"
|
||||
name="file"
|
||||
accept=".png,.jpg,.jpeg,.gif,.webp,.ico,.svg"
|
||||
required
|
||||
className="block w-full text-sm text-[var(--color-text-readable)] file:mr-3 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-[var(--admin-accent)] file:text-[var(--color-primary-foreground-readable)] cursor-pointer"
|
||||
/>
|
||||
<p className="mt-1 text-xs text-[var(--admin-text-muted)]">
|
||||
{t("uploadHint")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<button type="submit" disabled={uploading} className="btn btn-primary">
|
||||
{uploading ? t("uploading") : t("upload")}
|
||||
</button>
|
||||
{preview && (
|
||||
<button type="button" onClick={handleDelete} disabled={deleting} className="btn btn-danger">
|
||||
{deleting ? t("deleting") : t("delete")}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={uploading}
|
||||
className="btn btn-primary"
|
||||
>
|
||||
{uploading ? t("uploading") : t("upload")}
|
||||
</button>
|
||||
{preview && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleDelete}
|
||||
disabled={deleting}
|
||||
className="btn btn-danger"
|
||||
>
|
||||
{deleting ? t("deleting") : t("delete")}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{message && (
|
||||
<div
|
||||
className={`mt-4 p-3 rounded-lg text-sm ${
|
||||
message.type === "success"
|
||||
? "bg-[var(--admin-success-subtle)] text-[var(--admin-success)] dark:text-[var(--admin-success)]"
|
||||
: "bg-[var(--admin-error-subtle)] text-[var(--admin-error)] dark:text-[var(--admin-error)]"
|
||||
}`}
|
||||
>
|
||||
{message.text}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{message && (
|
||||
<div
|
||||
className={`mt-4 p-3 rounded-lg text-sm ${
|
||||
message.type === "success"
|
||||
? "bg-[var(--admin-success-subtle)] text-[var(--admin-success)] dark:text-[var(--admin-success)]"
|
||||
: "bg-[var(--admin-error-subtle)] text-[var(--admin-error)] dark:text-[var(--admin-error)]"
|
||||
}`}
|
||||
>
|
||||
{message.text}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<FaviconGenerator onSave={handleGenerated} />
|
||||
</div>
|
||||
);
|
||||
<FaviconGenerator onSave={handleGenerated} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,179 +1,195 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
|
||||
const SIZE = 64;
|
||||
const HALF = SIZE / 2;
|
||||
|
||||
interface Props {
|
||||
onSave: (blob: Blob) => void;
|
||||
onSave: (blob: Blob) => void;
|
||||
}
|
||||
|
||||
export function FaviconGenerator({ onSave }: Props) {
|
||||
const t = useTranslations("pages.admin.favicon.generator");
|
||||
const [bgColor, setBgColor] = useState("#6366f1");
|
||||
const [textColor, setTextColor] = useState("#ffffff");
|
||||
const [text, setText] = useState("A");
|
||||
const [rounded, setRounded] = useState(true);
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
const t = useTranslations("pages.admin.favicon.generator");
|
||||
const [bgColor, setBgColor] = useState("#6366f1");
|
||||
const [textColor, setTextColor] = useState("#ffffff");
|
||||
const [text, setText] = useState("A");
|
||||
const [rounded, setRounded] = useState(true);
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
|
||||
const render = useCallback(() => {
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas) return;
|
||||
const ctx = canvas.getContext("2d");
|
||||
if (!ctx) return;
|
||||
const render = useCallback(() => {
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas) return;
|
||||
const ctx = canvas.getContext("2d");
|
||||
if (!ctx) return;
|
||||
|
||||
canvas.width = SIZE;
|
||||
canvas.height = SIZE;
|
||||
canvas.width = SIZE;
|
||||
canvas.height = SIZE;
|
||||
|
||||
// Background
|
||||
ctx.clearRect(0, 0, SIZE, SIZE);
|
||||
ctx.fillStyle = bgColor;
|
||||
if (rounded) {
|
||||
const r = 12;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(r, 0);
|
||||
ctx.lineTo(SIZE - r, 0);
|
||||
ctx.quadraticCurveTo(SIZE, 0, SIZE, r);
|
||||
ctx.lineTo(SIZE, SIZE - r);
|
||||
ctx.quadraticCurveTo(SIZE, SIZE, SIZE - r, SIZE);
|
||||
ctx.lineTo(r, SIZE);
|
||||
ctx.quadraticCurveTo(0, SIZE, 0, SIZE - r);
|
||||
ctx.lineTo(0, r);
|
||||
ctx.quadraticCurveTo(0, 0, r, 0);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
} else {
|
||||
ctx.fillRect(0, 0, SIZE, SIZE);
|
||||
}
|
||||
// Background
|
||||
ctx.clearRect(0, 0, SIZE, SIZE);
|
||||
ctx.fillStyle = bgColor;
|
||||
if (rounded) {
|
||||
const r = 12;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(r, 0);
|
||||
ctx.lineTo(SIZE - r, 0);
|
||||
ctx.quadraticCurveTo(SIZE, 0, SIZE, r);
|
||||
ctx.lineTo(SIZE, SIZE - r);
|
||||
ctx.quadraticCurveTo(SIZE, SIZE, SIZE - r, SIZE);
|
||||
ctx.lineTo(r, SIZE);
|
||||
ctx.quadraticCurveTo(0, SIZE, 0, SIZE - r);
|
||||
ctx.lineTo(0, r);
|
||||
ctx.quadraticCurveTo(0, 0, r, 0);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
} else {
|
||||
ctx.fillRect(0, 0, SIZE, SIZE);
|
||||
}
|
||||
|
||||
// Text
|
||||
const displayText = text.trim() || "?";
|
||||
const fontSize = displayText.length > 2 ? 28 : displayText.length > 1 ? 32 : 40;
|
||||
ctx.fillStyle = textColor;
|
||||
ctx.font = `bold ${fontSize}px Arial, sans-serif`;
|
||||
ctx.textAlign = "center";
|
||||
ctx.textBaseline = "middle";
|
||||
ctx.fillText(displayText, HALF, HALF + 1);
|
||||
}, [bgColor, textColor, text, rounded]);
|
||||
// Text
|
||||
const displayText = text.trim() || "?";
|
||||
const fontSize =
|
||||
displayText.length > 2 ? 28 : displayText.length > 1 ? 32 : 40;
|
||||
ctx.fillStyle = textColor;
|
||||
ctx.font = `bold ${fontSize}px Arial, sans-serif`;
|
||||
ctx.textAlign = "center";
|
||||
ctx.textBaseline = "middle";
|
||||
ctx.fillText(displayText, HALF, HALF + 1);
|
||||
}, [bgColor, textColor, text, rounded]);
|
||||
|
||||
useEffect(() => {
|
||||
render();
|
||||
}, [render]);
|
||||
useEffect(() => {
|
||||
render();
|
||||
}, [render]);
|
||||
|
||||
function handleSave() {
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas) return;
|
||||
canvas.toBlob((blob) => {
|
||||
if (blob) onSave(blob);
|
||||
}, "image/png");
|
||||
}
|
||||
function handleSave() {
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas) return;
|
||||
canvas.toBlob((blob) => {
|
||||
if (blob) onSave(blob);
|
||||
}, "image/png");
|
||||
}
|
||||
|
||||
const swatches = [
|
||||
"#6366f1",
|
||||
"#3b82f6",
|
||||
"#06b6d4",
|
||||
"#10b981",
|
||||
"#f59e0b",
|
||||
"#ef4444",
|
||||
"#ec4899",
|
||||
"#8b5cf6",
|
||||
"#1e1b4b",
|
||||
"#1f2937",
|
||||
"#000000",
|
||||
"#ffffff",
|
||||
];
|
||||
const swatches = [
|
||||
"#6366f1",
|
||||
"#3b82f6",
|
||||
"#06b6d4",
|
||||
"#10b981",
|
||||
"#f59e0b",
|
||||
"#ef4444",
|
||||
"#ec4899",
|
||||
"#8b5cf6",
|
||||
"#1e1b4b",
|
||||
"#1f2937",
|
||||
"#000000",
|
||||
"#ffffff",
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="admin-card">
|
||||
<h3 className="text-sm font-extrabold text-[var(--admin-text)] mb-4">{t("title")}</h3>
|
||||
return (
|
||||
<div className="admin-card">
|
||||
<h3 className="text-sm font-extrabold text-[var(--admin-text)] mb-4">
|
||||
{t("title")}
|
||||
</h3>
|
||||
|
||||
<div className="flex justify-center mb-6">
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
width={SIZE}
|
||||
height={SIZE}
|
||||
className="border-2 border-[var(--admin-border)] rounded-xl shadow-lg"
|
||||
style={{ width: 128, height: 128, imageRendering: "pixelated" }}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-center mb-6">
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
width={SIZE}
|
||||
height={SIZE}
|
||||
className="border-2 border-[var(--admin-border)] rounded-xl shadow-lg"
|
||||
style={{ width: 128, height: 128, imageRendering: "pixelated" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-xs font-bold text-[var(--admin-text-muted)] uppercase tracking-wider mb-2">
|
||||
{t("text")}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={text}
|
||||
onChange={(e) => setText(e.target.value.slice(0, 4))}
|
||||
maxLength={4}
|
||||
className="w-full"
|
||||
placeholder="A"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-xs font-bold text-[var(--admin-text-muted)] uppercase tracking-wider mb-2">
|
||||
{t("text")}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={text}
|
||||
onChange={(e) => setText(e.target.value.slice(0, 4))}
|
||||
maxLength={4}
|
||||
className="w-full"
|
||||
placeholder="A"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-bold text-[var(--admin-text-muted)] uppercase tracking-wider mb-2">
|
||||
{t("bgColor")}
|
||||
</label>
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<input
|
||||
type="color"
|
||||
value={bgColor}
|
||||
onChange={(e) => setBgColor(e.target.value)}
|
||||
className="w-10 h-10 rounded-lg cursor-pointer border border-[var(--admin-border)]"
|
||||
/>
|
||||
<span className="text-xs text-[var(--admin-text-muted)] font-mono">{bgColor}</span>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{swatches.map((c) => (
|
||||
<button
|
||||
key={c}
|
||||
type="button"
|
||||
onClick={() => setBgColor(c)}
|
||||
className={`w-7 h-7 rounded-lg border-2 transition-all ${
|
||||
bgColor === c ? "border-[var(--admin-accent)] scale-110" : "border-transparent"
|
||||
}`}
|
||||
style={{ backgroundColor: c }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-bold text-[var(--admin-text-muted)] uppercase tracking-wider mb-2">
|
||||
{t("bgColor")}
|
||||
</label>
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<input
|
||||
type="color"
|
||||
value={bgColor}
|
||||
onChange={(e) => setBgColor(e.target.value)}
|
||||
className="w-10 h-10 rounded-lg cursor-pointer border border-[var(--admin-border)]"
|
||||
/>
|
||||
<span className="text-xs text-[var(--admin-text-muted)] font-mono">
|
||||
{bgColor}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{swatches.map((c) => (
|
||||
<button
|
||||
key={c}
|
||||
type="button"
|
||||
onClick={() => setBgColor(c)}
|
||||
className={`w-7 h-7 rounded-lg border-2 transition-all ${
|
||||
bgColor === c
|
||||
? "border-[var(--admin-accent)] scale-110"
|
||||
: "border-transparent"
|
||||
}`}
|
||||
style={{ backgroundColor: c }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-bold text-[var(--admin-text-muted)] uppercase tracking-wider mb-2">
|
||||
{t("textColor")}
|
||||
</label>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="color"
|
||||
value={textColor}
|
||||
onChange={(e) => setTextColor(e.target.value)}
|
||||
className="w-10 h-10 rounded-lg cursor-pointer border border-[var(--admin-border)]"
|
||||
/>
|
||||
<span className="text-xs text-[var(--admin-text-muted)] font-mono">{textColor}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-bold text-[var(--admin-text-muted)] uppercase tracking-wider mb-2">
|
||||
{t("textColor")}
|
||||
</label>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="color"
|
||||
value={textColor}
|
||||
onChange={(e) => setTextColor(e.target.value)}
|
||||
className="w-10 h-10 rounded-lg cursor-pointer border border-[var(--admin-border)]"
|
||||
/>
|
||||
<span className="text-xs text-[var(--admin-text-muted)] font-mono">
|
||||
{textColor}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="rounded"
|
||||
checked={rounded}
|
||||
onChange={(e) => setRounded(e.target.checked)}
|
||||
className="rounded"
|
||||
/>
|
||||
<label htmlFor="rounded" className="text-sm text-[var(--admin-text)] cursor-pointer">
|
||||
{t("rounded")}
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="rounded"
|
||||
checked={rounded}
|
||||
onChange={(e) => setRounded(e.target.checked)}
|
||||
className="rounded"
|
||||
/>
|
||||
<label
|
||||
htmlFor="rounded"
|
||||
className="text-sm text-[var(--admin-text)] cursor-pointer"
|
||||
>
|
||||
{t("rounded")}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button type="button" onClick={handleSave} className="btn btn-primary w-full">
|
||||
{t("save")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSave}
|
||||
className="btn btn-primary w-full"
|
||||
>
|
||||
{t("save")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,34 +1,40 @@
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import { Image } from "lucide-react";
|
||||
import { FaviconForm } from "./favicon-form";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { FaviconForm } from "./favicon-form";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export default async function AdminFaviconPage() {
|
||||
const t = await getTranslations("pages.admin.favicon");
|
||||
const t = await getTranslations("pages.admin.favicon");
|
||||
|
||||
let faviconUrl: string | null = null;
|
||||
try {
|
||||
const setting = await prisma.websiteSetting.findUnique({ where: { key: "cms_favicon" } });
|
||||
faviconUrl = setting?.value ?? null;
|
||||
} catch {
|
||||
faviconUrl = null;
|
||||
}
|
||||
let faviconUrl: string | null = null;
|
||||
try {
|
||||
const setting = await prisma.websiteSetting.findUnique({
|
||||
where: { key: "cms_favicon" },
|
||||
});
|
||||
faviconUrl = setting?.value ?? null;
|
||||
} catch {
|
||||
faviconUrl = null;
|
||||
}
|
||||
|
||||
return (
|
||||
<main>
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--admin-accent)]/20 to-[var(--admin-accent)]/5 grid place-items-center">
|
||||
<Image size={20} className="text-[var(--admin-accent)]" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="m-0 text-xl font-extrabold text-[var(--admin-text)]">{t("title")}</h1>
|
||||
<p className="m-0 text-xs text-[var(--admin-text-muted)] mt-0.5">{t("subtitle")}</p>
|
||||
</div>
|
||||
</div>
|
||||
return (
|
||||
<main>
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--admin-accent)]/20 to-[var(--admin-accent)]/5 grid place-items-center">
|
||||
<Image size={20} className="text-[var(--admin-accent)]" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="m-0 text-xl font-extrabold text-[var(--admin-text)]">
|
||||
{t("title")}
|
||||
</h1>
|
||||
<p className="m-0 text-xs text-[var(--admin-text-muted)] mt-0.5">
|
||||
{t("subtitle")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<FaviconForm currentUrl={faviconUrl} />
|
||||
</main>
|
||||
);
|
||||
<FaviconForm currentUrl={faviconUrl} />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user