48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
import Icon from '@/components/site/icon';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
const sizes = {
|
|
sm: 'h-10 w-10 rounded-xl text-xl',
|
|
md: 'h-12 w-12 rounded-xl text-2xl',
|
|
lg: 'h-14 w-14 rounded-2xl text-3xl',
|
|
} as const;
|
|
|
|
const tones = {
|
|
soft: 'border border-primary/30 bg-primary-container/10 text-primary dark:bg-primary-container/20',
|
|
solid: 'bg-primary-container text-white',
|
|
neutral:
|
|
'border border-outline-variant/50 bg-surface-container-high text-primary',
|
|
} as const;
|
|
|
|
type IconTileProps = {
|
|
icon: string;
|
|
size?: keyof typeof sizes;
|
|
tone?: keyof typeof tones;
|
|
/** Fill with crimson when the parent `group` is hovered. */
|
|
groupHover?: boolean;
|
|
className?: string;
|
|
};
|
|
|
|
export default function IconTile({
|
|
icon,
|
|
size = 'sm',
|
|
tone = 'soft',
|
|
groupHover = false,
|
|
className,
|
|
}: IconTileProps) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'flex shrink-0 items-center justify-center transition-all',
|
|
sizes[size],
|
|
tones[tone],
|
|
groupHover &&
|
|
'group-hover:bg-primary-container group-hover:text-white',
|
|
className,
|
|
)}
|
|
>
|
|
<Icon name={icon} />
|
|
</div>
|
|
);
|
|
}
|