mirror of
https://github.com/Noooste/garage-ui.git
synced 2026-08-27 15:37:03 +00:00
Noooste
37 lines
1.2 KiB
TypeScript
37 lines
1.2 KiB
TypeScript
import * as React from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
import { cva, type VariantProps } from 'class-variance-authority';
|
|
|
|
const iconTileVariants = cva(
|
|
'inline-flex items-center justify-center shrink-0 border',
|
|
{
|
|
variants: {
|
|
tone: {
|
|
primary: 'bg-[var(--accent-primary-soft)] border-[var(--accent-primary-border)] text-[var(--primary)]',
|
|
destructive: 'bg-[var(--danger-soft)] border-[var(--danger-border)] text-[var(--destructive)]',
|
|
neutral: 'bg-muted border-border text-muted-foreground',
|
|
},
|
|
size: {
|
|
sm: 'h-8 w-8 rounded-md [&>svg]:h-4 [&>svg]:w-4',
|
|
md: 'h-10 w-10 rounded-lg [&>svg]:h-5 [&>svg]:w-5',
|
|
lg: 'h-14 w-14 rounded-xl [&>svg]:h-7 [&>svg]:w-7',
|
|
},
|
|
},
|
|
defaultVariants: { tone: 'primary', size: 'md' },
|
|
}
|
|
);
|
|
|
|
export interface IconTileProps
|
|
extends React.HTMLAttributes<HTMLDivElement>,
|
|
VariantProps<typeof iconTileVariants> {
|
|
icon: React.ReactNode;
|
|
}
|
|
|
|
export function IconTile({ icon, tone, size, className, ...props }: IconTileProps) {
|
|
return (
|
|
<div className={cn(iconTileVariants({ tone, size }), className)} {...props}>
|
|
{icon}
|
|
</div>
|
|
);
|
|
}
|