34 lines
914 B
TypeScript
34 lines
914 B
TypeScript
import { cn } from "@/lib/utils";
|
||
import type { IconKey, Swatch } from "@/shared/appearance";
|
||
import { AppIcon } from "./app-icon";
|
||
|
||
/** Renk anahtarını CSS değişkenine bağlar: --swatch-blue → --swatch (sınıflar bunu kullanır). */
|
||
export const swatchStyle = (color: Swatch) =>
|
||
({ "--swatch": `var(--swatch-${color})` }) as React.CSSProperties;
|
||
|
||
/** Renkli yuvarlak ikon rozeti (kategori/hesap). */
|
||
export function IconBadge({
|
||
icon,
|
||
color,
|
||
className,
|
||
size = "md",
|
||
}: {
|
||
icon: IconKey;
|
||
color: Swatch;
|
||
className?: string;
|
||
size?: "sm" | "md";
|
||
}) {
|
||
return (
|
||
<span
|
||
style={swatchStyle(color)}
|
||
className={cn(
|
||
"inline-flex shrink-0 items-center justify-center rounded-full bg-(--swatch)/15 text-(--swatch)",
|
||
size === "sm" ? "size-7 [&_svg]:size-3.5" : "size-9 [&_svg]:size-4.5",
|
||
className,
|
||
)}
|
||
>
|
||
<AppIcon name={icon} />
|
||
</span>
|
||
);
|
||
}
|