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.
62 lines
1.8 KiB
TypeScript
62 lines
1.8 KiB
TypeScript
import React, {ReactNode} from "react";
|
|
import {LucideIcon} from 'lucide-react';
|
|
|
|
type BadgeVariant = 'primary' | 'success' | 'warning' | 'error' | 'muted';
|
|
type BadgeSize = 'sm' | 'md';
|
|
type BadgeShape = 'pill' | 'rounded';
|
|
|
|
interface BadgeProps {
|
|
variant?: BadgeVariant;
|
|
size?: BadgeSize;
|
|
shape?: BadgeShape;
|
|
icon?: LucideIcon;
|
|
children?: ReactNode;
|
|
interactive?: boolean;
|
|
floating?: boolean;
|
|
}
|
|
|
|
const variantClasses: Record<BadgeVariant, string> = {
|
|
primary: 'bg-primary/20 text-primary border border-primary/30',
|
|
success: 'bg-success/20 text-success border border-success/30',
|
|
warning: 'bg-warning/20 text-warning border border-warning/30',
|
|
error: 'bg-error/20 text-error border border-error/30',
|
|
muted: 'bg-secondary text-muted border border-secondary',
|
|
};
|
|
|
|
const sizeClasses: Record<BadgeSize, string> = {
|
|
sm: 'text-[10px] px-2 py-0.5',
|
|
md: 'text-xs px-3 py-1',
|
|
};
|
|
|
|
const shapeClasses: Record<BadgeShape, string> = {
|
|
pill: 'rounded-full',
|
|
rounded: 'rounded-lg',
|
|
};
|
|
|
|
export default function Badge(
|
|
{
|
|
variant = 'primary',
|
|
size = 'md',
|
|
shape = 'pill',
|
|
icon: Icon,
|
|
children,
|
|
interactive = false,
|
|
floating = false,
|
|
}: BadgeProps) {
|
|
return (
|
|
<span
|
|
className={`
|
|
font-medium inline-flex items-center gap-1.5
|
|
${shapeClasses[shape]}
|
|
${variantClasses[variant]}
|
|
${sizeClasses[size]}
|
|
${interactive ? 'cursor-pointer group transition-colors' : ''}
|
|
${floating ? 'absolute top-3 right-3' : ''}
|
|
`}
|
|
>
|
|
{Icon && <Icon className="w-3 h-3" strokeWidth={1.75}/>}
|
|
{children}
|
|
</span>
|
|
);
|
|
}
|