feat(admin): render inline SVG category icons in tables
AdminThumb detects raw <svg> markup and renders it inline (object-contain); categories list shows an Icon column. Admin-entered, authenticated input. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -30,6 +30,18 @@ export function AdminThumb({
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Inline SVG markup (admin-entered, e.g. category icons) → render directly.
|
||||||
|
if (url.startsWith("<svg")) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={{ width: size, height: size }}
|
||||||
|
className={`flex items-center justify-center border border-[#262b40] bg-[#0c0e1a] p-1 text-gray-200 [&>svg]:h-full [&>svg]:w-full [&>svg]:object-contain ${rounded}`}
|
||||||
|
// Admin-only, authenticated input.
|
||||||
|
dangerouslySetInnerHTML={{ __html: url }}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
return (
|
return (
|
||||||
// eslint-disable-next-line @next/next/no-img-element
|
// eslint-disable-next-line @next/next/no-img-element
|
||||||
<img
|
<img
|
||||||
|
|||||||
@@ -44,6 +44,7 @@ export const categoriesConfig: ResourceConfig = {
|
|||||||
canDelete: true,
|
canDelete: true,
|
||||||
columns: [
|
columns: [
|
||||||
{ key: "image_url", label: "Image", type: "image" },
|
{ key: "image_url", label: "Image", type: "image" },
|
||||||
|
{ key: "icon", label: "Icon", type: "image" },
|
||||||
{ key: "name", label: "Name" },
|
{ key: "name", label: "Name" },
|
||||||
{ key: "slug", label: "Slug" },
|
{ key: "slug", label: "Slug" },
|
||||||
{ key: "is_active", label: "Active", render: (r) => badge(!!r.is_active, "active", "hidden") },
|
{ key: "is_active", label: "Active", render: (r) => badge(!!r.is_active, "active", "hidden") },
|
||||||
|
|||||||
Reference in New Issue
Block a user