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.
48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
import React from "react";
|
|
import {LucideIcon} from "lucide-react";
|
|
|
|
type IconContainerSize = 'sm' | 'md' | 'lg' | 'xl';
|
|
type IconContainerShape = 'square' | 'rounded' | 'circle';
|
|
|
|
interface IconContainerProps {
|
|
icon: LucideIcon;
|
|
size?: IconContainerSize;
|
|
shape?: IconContainerShape;
|
|
filled?: boolean;
|
|
}
|
|
|
|
const sizeClasses: Record<IconContainerSize, { container: string; icon: string }> = {
|
|
sm: {container: 'w-10 h-10', icon: 'w-4 h-4'},
|
|
md: {container: 'w-12 h-12', icon: 'w-5 h-5'},
|
|
lg: {container: 'w-16 h-16', icon: 'w-8 h-8'},
|
|
xl: {container: 'w-20 h-20', icon: 'w-10 h-10'},
|
|
};
|
|
|
|
const shapeClasses: Record<IconContainerShape, string> = {
|
|
square: 'rounded-lg',
|
|
rounded: 'rounded-2xl',
|
|
circle: 'rounded-full',
|
|
};
|
|
|
|
export default function IconContainer(
|
|
{
|
|
icon: Icon,
|
|
size = 'sm',
|
|
shape = 'square',
|
|
filled = false,
|
|
}: IconContainerProps) {
|
|
const sizeConfig = sizeClasses[size];
|
|
|
|
return (
|
|
<div
|
|
className={`
|
|
${filled ? 'bg-primary' : 'bg-primary/10'} flex items-center justify-center
|
|
${sizeConfig.container}
|
|
${shapeClasses[shape]}
|
|
`}
|
|
>
|
|
<Icon className={`${filled ? 'text-text-primary' : 'text-primary'} ${sizeConfig.icon}`} strokeWidth={1.75}/>
|
|
</div>
|
|
);
|
|
}
|