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.
54 lines
2.0 KiB
TypeScript
54 lines
2.0 KiB
TypeScript
'use client'
|
|
import {ReactNode, useEffect, useState} from "react";
|
|
import {X} from "lucide-react";
|
|
import {createPortal} from "react-dom";
|
|
|
|
interface SettingsPanelProps {
|
|
title: string;
|
|
sidebar: ReactNode;
|
|
children: ReactNode;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export default function SettingsPanel({title, sidebar, children, onClose}: SettingsPanelProps) {
|
|
const [mounted, setMounted] = useState<boolean>(false);
|
|
|
|
useEffect((): void => {
|
|
setMounted(true);
|
|
}, []);
|
|
|
|
if (!mounted) return null;
|
|
|
|
return createPortal(
|
|
<div className="fixed inset-0 z-40 bg-darkest-background/60 backdrop-blur-md flex items-center justify-center">
|
|
<div className="w-3/4 h-[85vh] bg-tertiary rounded-2xl border border-secondary flex flex-col">
|
|
|
|
<div className="px-6 py-4 rounded-t-2xl flex justify-between items-center">
|
|
<h2 className="font-['ADLaM_Display'] text-xl text-text-primary">{title}</h2>
|
|
<button
|
|
onClick={onClose}
|
|
className="text-text-primary/80 hover:text-text-primary p-2 rounded-lg hover:bg-text-primary/10 transition-all"
|
|
>
|
|
<X className="w-5 h-5" strokeWidth={1.75}/>
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex flex-1 min-h-0">
|
|
<div className="w-56 flex-shrink-0 overflow-y-auto">
|
|
{sidebar}
|
|
</div>
|
|
<div className="flex-1 min-h-0 p-2 pl-0">
|
|
<div className="h-full bg-darkest-background rounded-xl overflow-hidden">
|
|
<div className="h-full overflow-y-auto">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>,
|
|
document.body
|
|
);
|
|
}
|