45 lines
1.0 KiB
TypeScript
45 lines
1.0 KiB
TypeScript
"use client";
|
|
|
|
import type { CSSProperties } from "react";
|
|
import type { LucideIcon } from "lucide-react";
|
|
import type { CanvasToolbarItemConfig } from "@/lib/canvas-toolbar-config";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type CanvasToolbarIconProps = {
|
|
item?: CanvasToolbarItemConfig | null;
|
|
iconUrl?: string | null;
|
|
fallback: LucideIcon;
|
|
className?: string;
|
|
style?: CSSProperties;
|
|
active?: boolean;
|
|
};
|
|
|
|
export function CanvasToolbarIcon({
|
|
item,
|
|
iconUrl,
|
|
fallback: FallbackIcon,
|
|
className,
|
|
style,
|
|
active = false,
|
|
}: CanvasToolbarIconProps) {
|
|
const resolvedIconUrl = String(iconUrl || item?.iconUrl || "").trim();
|
|
|
|
if (resolvedIconUrl) {
|
|
return (
|
|
<img
|
|
alt=""
|
|
aria-hidden="true"
|
|
className={cn(
|
|
"object-contain",
|
|
active ? "brightness-0 invert opacity-95" : "brightness-0 opacity-80 dark:invert",
|
|
className
|
|
)}
|
|
src={resolvedIconUrl}
|
|
style={style}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return <FallbackIcon className={className} style={style} />;
|
|
}
|