55 lines
1.1 KiB
TypeScript
55 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import { LucideIcon } from 'lucide-react';
|
|
import { Button } from './Button';
|
|
import { Icon } from './Icon';
|
|
|
|
interface IconButtonProps {
|
|
icon: LucideIcon;
|
|
onClick?: React.MouseEventHandler<HTMLButtonElement>;
|
|
variant?: 'primary' | 'secondary' | 'danger' | 'ghost';
|
|
size?: 'sm' | 'md' | 'lg';
|
|
title?: string;
|
|
disabled?: boolean;
|
|
color?: string;
|
|
className?: string;
|
|
backgroundColor?: string;
|
|
}
|
|
|
|
export function IconButton({
|
|
icon,
|
|
onClick,
|
|
variant = 'secondary',
|
|
size = 'md',
|
|
title,
|
|
disabled,
|
|
color,
|
|
className = '',
|
|
backgroundColor,
|
|
}: IconButtonProps) {
|
|
const sizeMap = {
|
|
sm: { w: '8', h: '8', icon: 4 },
|
|
md: { w: '10', h: '10', icon: 5 },
|
|
lg: { w: '12', h: '12', icon: 6 },
|
|
};
|
|
|
|
return (
|
|
<Button
|
|
variant={variant}
|
|
onClick={onClick}
|
|
title={title}
|
|
disabled={disabled}
|
|
w={sizeMap[size].w}
|
|
h={sizeMap[size].h}
|
|
p={0}
|
|
rounded="full"
|
|
display="flex"
|
|
center
|
|
minHeight="0"
|
|
className={className}
|
|
backgroundColor={backgroundColor}
|
|
>
|
|
<Icon icon={icon} size={sizeMap[size].icon} color={color} />
|
|
</Button>
|
|
);
|
|
}
|