25 lines
884 B
TypeScript
25 lines
884 B
TypeScript
import React, { ReactNode } from 'react';
|
|
|
|
interface IconContainerProps {
|
|
children: ReactNode;
|
|
variant?: 'default' | 'primary' | 'telemetry' | 'warning';
|
|
}
|
|
|
|
/**
|
|
* IconContainer - A semantic UI component for wrapping icons.
|
|
*/
|
|
export function IconContainer({ children, variant = 'default' }: IconContainerProps) {
|
|
const variantClasses = {
|
|
default: 'bg-[var(--ui-color-bg-base)] border-[var(--ui-color-border-default)]',
|
|
primary: 'bg-[var(--ui-color-intent-primary)]/10 border-[var(--ui-color-intent-primary)]/20',
|
|
telemetry: 'bg-[var(--ui-color-intent-telemetry)]/10 border-[var(--ui-color-intent-telemetry)]/20',
|
|
warning: 'bg-[var(--ui-color-intent-warning)]/10 border-[var(--ui-color-intent-warning)]/20',
|
|
};
|
|
|
|
return (
|
|
<div className={`w-10 h-10 flex items-center justify-center border ${variantClasses[variant]}`}>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|