50 lines
1.1 KiB
TypeScript
50 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: { btn: 'w-8 h-8 p-0', icon: 4 },
|
|
md: { btn: 'w-10 h-10 p-0', icon: 5 },
|
|
lg: { btn: 'w-12 h-12 p-0', icon: 6 },
|
|
};
|
|
|
|
return (
|
|
<Button
|
|
variant={variant}
|
|
onClick={onClick}
|
|
title={title}
|
|
disabled={disabled}
|
|
className={`${sizeMap[size].btn} rounded-full flex items-center justify-center min-h-0 ${className}`}
|
|
backgroundColor={backgroundColor}
|
|
>
|
|
<Icon icon={icon} size={sizeMap[size].icon} color={color} />
|
|
</Button>
|
|
);
|
|
}
|