Add favicon generator with color picker and text
This commit is contained in:
openhands committed
1 parent
4a80742e1c
commit
29f8a44f0f
4 files changed
+258
-52
No files matched your search
@@ -3,6 +3,7 @@
|
||||
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");
|
||||
@@ -42,62 +43,81 @@ export function FaviconForm({ currentUrl }: { currentUrl: string | null }) {
|
||||
}
|
||||
}
|
||||
|
||||
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="admin-card max-w-lg">
|
||||
{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 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>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
|
||||
<form action={handleUpload} ref={formRef}>
|
||||
<div className="mb-4">
|
||||
<label className="block text-xs font-bold text-[var(--color-text-muted)] uppercase tracking-wider mb-2">
|
||||
{t("uploadLabel")}
|
||||
</label>
|
||||
<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>
|
||||
<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")}
|
||||
<div className="flex gap-2">
|
||||
<button type="submit" disabled={uploading} className="btn btn-primary">
|
||||
{uploading ? t("uploading") : t("upload")}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
{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>
|
||||
)}
|
||||
{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>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user