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.
44 lines
1.4 KiB
TypeScript
44 lines
1.4 KiB
TypeScript
import React, {ReactNode} from "react";
|
|
import {LucideIcon} from "lucide-react";
|
|
import Badge from "@/components/ui/Badge";
|
|
import IconContainer from "@/components/ui/IconContainer";
|
|
|
|
interface SectionHeaderProps {
|
|
icon?: LucideIcon;
|
|
title: string;
|
|
badge?: string;
|
|
description?: string;
|
|
actions?: ReactNode;
|
|
}
|
|
|
|
export default function SectionHeader(
|
|
{
|
|
icon,
|
|
title,
|
|
badge,
|
|
description,
|
|
actions,
|
|
}: SectionHeaderProps) {
|
|
return (
|
|
<div className="shrink-0">
|
|
<div className="flex justify-between items-center">
|
|
<div className="flex-1">
|
|
<h2 className="text-xl text-text-primary font-bold flex items-center gap-3 flex-wrap">
|
|
{icon && <IconContainer icon={icon} size="sm"/>}
|
|
<span className="tracking-wide">{title}</span>
|
|
{badge && <Badge>{badge}</Badge>}
|
|
</h2>
|
|
{description && (
|
|
<p className="text-text-secondary text-xs mt-2 ml-13">{description}</p>
|
|
)}
|
|
</div>
|
|
{actions && (
|
|
<div className="flex items-center gap-2">
|
|
{actions}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|