124 lines
4.3 KiB
TypeScript
124 lines
4.3 KiB
TypeScript
"use client";
|
|
|
|
import { useRef, useState } from "react";
|
|
import { useTranslations } from "next-intl";
|
|
import { saveFavicon, deleteFavicon } 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);
|
|
|
|
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") });
|
|
}
|
|
}
|
|
|
|
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") });
|
|
}
|
|
}
|
|
|
|
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") });
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="grid gap-6 lg:grid-cols-2">
|
|
<div className="admin-card">
|
|
<h3 className="text-sm font-extrabold text-[var(--color-text)] mb-4">{t("uploadLabel")}</h3>
|
|
{preview && (
|
|
<div className="mb-6">
|
|
<label className="block text-xs font-bold text-[var(--color-text-muted)] uppercase tracking-wider mb-2">
|
|
{t("current")}
|
|
</label>
|
|
<div className="flex items-center gap-4">
|
|
<img
|
|
src={preview}
|
|
alt="Favicon preview"
|
|
className="w-16 h-16 rounded-lg border-2 border-[var(--border)] object-contain bg-white"
|
|
/>
|
|
<div className="text-xs text-[var(--color-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)] file:mr-3 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-[var(--color-primary)] file:text-white hover:file:bg-[var(--color-primary-hover)] cursor-pointer"
|
|
/>
|
|
<p className="mt-1 text-xs text-[var(--color-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>
|
|
|
|
{message && (
|
|
<div
|
|
className={`mt-4 p-3 rounded-lg text-sm ${
|
|
message.type === "success"
|
|
? "bg-green-500/10 text-green-600 dark:text-green-400"
|
|
: "bg-red-500/10 text-red-600 dark:text-red-400"
|
|
}`}
|
|
>
|
|
{message.text}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<FaviconGenerator onSave={handleGenerated} />
|
|
</div>
|
|
);
|
|
}
|