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.
66 lines
1.9 KiB
TypeScript
66 lines
1.9 KiB
TypeScript
import React from 'react';
|
|
import {LucideIcon} from 'lucide-react';
|
|
|
|
type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
|
|
interface AvatarIconProps {
|
|
size?: AvatarSize;
|
|
image?: string | null;
|
|
icon?: LucideIcon;
|
|
initial?: string;
|
|
alt?: string;
|
|
}
|
|
|
|
const sizeClasses: Record<AvatarSize, string> = {
|
|
xs: 'w-7 h-7',
|
|
sm: 'w-10 h-10',
|
|
md: 'w-12 h-12',
|
|
lg: 'w-14 h-14',
|
|
xl: 'w-16 h-16',
|
|
};
|
|
|
|
const iconSizeClasses: Record<AvatarSize, string> = {
|
|
xs: 'w-3.5 h-3.5',
|
|
sm: 'w-5 h-5',
|
|
md: 'w-6 h-6',
|
|
lg: 'w-7 h-7',
|
|
xl: 'w-8 h-8',
|
|
};
|
|
|
|
const initialSizeClasses: Record<AvatarSize, string> = {
|
|
xs: 'text-xs',
|
|
sm: 'text-sm',
|
|
md: 'text-base',
|
|
lg: 'text-lg',
|
|
xl: 'text-xl',
|
|
};
|
|
|
|
export default function AvatarIcon({
|
|
size = 'md',
|
|
image,
|
|
icon: Icon,
|
|
initial,
|
|
alt = '',
|
|
}: AvatarIconProps): React.JSX.Element {
|
|
return (
|
|
<div
|
|
className={`${sizeClasses[size]} rounded-full border-2 border-primary overflow-hidden bg-secondary transition-colors flex items-center justify-center`}
|
|
>
|
|
{image ? (
|
|
<img
|
|
src={image}
|
|
alt={alt}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
) : Icon ? (
|
|
<Icon className={`text-primary ${iconSizeClasses[size]}`} strokeWidth={1.75}/>
|
|
) : initial ? (
|
|
<div
|
|
className={`w-full h-full flex items-center justify-center bg-primary/10 text-primary font-bold ${initialSizeClasses[size]}`}>
|
|
{initial}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|