d4765e6576
- Introduced foundational UI components (`Badge`, `LockCard`, `SectionHeader`, `AvatarIcon`, etc.) for flexible layouts and consistent design. - Added migration support with the `MigrationModal` component and backend integration for exporting/importing data between Electron and Tauri. - Extended form components with `TextAreaInput`, `OrderInput`, `ToggleField`, and `ToolbarSelect` for improved input handling. - Updated `ScribeShell` with migration popup logic to prompt users for data migration. - Integrated `AlertStack` for better alert handling and notification management. - Enhanced Rust/Tauri services with migration command implementations. - Added translations and styles for new components.
70 lines
2.2 KiB
TypeScript
70 lines
2.2 KiB
TypeScript
import React from "react";
|
|
import {LucideIcon} from "lucide-react";
|
|
|
|
type IconButtonVariant = 'primary' | 'danger' | 'ghost' | 'muted' | 'light';
|
|
type IconButtonSize = 'sm' | 'md' | 'lg';
|
|
type IconButtonShape = 'circle' | 'square';
|
|
|
|
interface IconButtonProps {
|
|
icon: LucideIcon;
|
|
variant?: IconButtonVariant;
|
|
size?: IconButtonSize;
|
|
shape?: IconButtonShape;
|
|
onClick?: () => void | Promise<void>;
|
|
disabled?: boolean;
|
|
selected?: boolean;
|
|
tooltip?: string;
|
|
}
|
|
|
|
const variantClasses: Record<IconButtonVariant, string> = {
|
|
primary: 'text-muted hover:text-primary hover:bg-primary/10',
|
|
danger: 'text-muted hover:text-error hover:bg-error/10',
|
|
ghost: 'text-text-secondary hover:text-text-primary hover:bg-secondary',
|
|
muted: 'bg-secondary hover:bg-gray-dark text-text-secondary hover:text-text-primary',
|
|
light: 'text-text-primary/80 hover:text-text-primary hover:bg-text-primary/10',
|
|
};
|
|
|
|
const sizeClasses: Record<IconButtonSize, { button: string; icon: string }> = {
|
|
sm: {button: 'p-1.5', icon: 'w-4 h-4'},
|
|
md: {button: 'p-2', icon: 'w-5 h-5'},
|
|
lg: {button: 'p-2', icon: 'w-6 h-6'},
|
|
};
|
|
|
|
const shapeClasses: Record<IconButtonShape, string> = {
|
|
circle: 'rounded-full',
|
|
square: 'rounded-lg',
|
|
};
|
|
|
|
export default function IconButton(
|
|
{
|
|
icon: Icon,
|
|
variant = 'ghost',
|
|
size = 'md',
|
|
shape = 'square',
|
|
onClick,
|
|
disabled = false,
|
|
selected = false,
|
|
tooltip,
|
|
}: IconButtonProps) {
|
|
const sizeConfig = sizeClasses[size];
|
|
const selectedClass: string = selected ? 'bg-secondary text-primary' : '';
|
|
|
|
return (
|
|
<button
|
|
onClick={onClick}
|
|
disabled={disabled}
|
|
title={tooltip}
|
|
className={`
|
|
flex items-center justify-center
|
|
transition-all duration-200
|
|
${shapeClasses[shape]}
|
|
${selected ? selectedClass : variantClasses[variant]}
|
|
${sizeConfig.button}
|
|
${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
|
|
`}
|
|
>
|
|
<Icon className={sizeConfig.icon} strokeWidth={2.25}/>
|
|
</button>
|
|
);
|
|
}
|