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>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user