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
2.3 KiB
TypeScript
66 lines
2.3 KiB
TypeScript
import React, {ReactNode, useState} from "react";
|
|
import {ChevronDown, ChevronUp, LucideIcon} from 'lucide-react';
|
|
import IconContainer from "@/components/ui/IconContainer";
|
|
|
|
type CollapseVariant = 'default' | 'card';
|
|
|
|
export interface CollapseProps {
|
|
title: string;
|
|
icon?: LucideIcon;
|
|
variant?: CollapseVariant;
|
|
content?: ReactNode;
|
|
children?: ReactNode;
|
|
defaultOpen?: boolean;
|
|
}
|
|
|
|
export default function Collapse(
|
|
{
|
|
title,
|
|
icon,
|
|
variant = 'default',
|
|
content,
|
|
children,
|
|
defaultOpen = false,
|
|
}: CollapseProps) {
|
|
const [isOpen, setIsOpen] = useState<boolean>(defaultOpen);
|
|
const renderContent: ReactNode = children || content;
|
|
const isCard: boolean = variant === 'card';
|
|
const ChevronIcon = isOpen ? ChevronUp : ChevronDown;
|
|
|
|
return (
|
|
<div
|
|
className={`mb-4 transition-colors duration-150 ${isCard ? 'bg-tertiary rounded-xl' : ''}`}>
|
|
<button
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
className={`
|
|
w-full text-left transition-all duration-200 p-4 flex items-center justify-between group
|
|
${isCard
|
|
? ''
|
|
: `bg-secondary hover:bg-gray-dark ${isOpen ? 'rounded-t-xl' : 'rounded-xl'}`
|
|
}
|
|
`}
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
{icon && (
|
|
<div className="transition-colors duration-150">
|
|
<IconContainer icon={icon} size="sm" shape="circle" filled/>
|
|
</div>
|
|
)}
|
|
<span className="text-text-primary font-bold">{title}</span>
|
|
</div>
|
|
<ChevronIcon className="text-primary w-4 h-4 transition-transform"
|
|
strokeWidth={1.75}/>
|
|
</button>
|
|
|
|
{isOpen && (
|
|
<div className={`animate-fadeIn ${isCard
|
|
? 'p-3 m-4 mt-0 bg-darkest-background rounded-lg'
|
|
: 'bg-darkest-background border-l-4 border-primary p-4 rounded-b-xl'
|
|
}`}>
|
|
{renderContent}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|