mirror of
https://github.com/farion1231/cc-switch.git
synced 2026-07-28 08:44:41 +08:00
YoVinchen
ddb0b68b4c
Comprehensive refactoring of core UI components to improve code quality, maintainability, and user experience. FullScreenPanel Component: - Enhanced props interface with better TypeScript types - Improved layout flexibility with customizable padding - Better header/footer composition patterns - Enhanced scroll behavior for long content - Added support for custom actions in header - Improved responsive design for different screen sizes - Better integration with parent components - Cleaner prop drilling with context where appropriate Dialog Component (shadcn/ui): - Updated to latest component patterns - Improved animation timing and easing - Better focus trap management - Enhanced overlay styling with backdrop blur - Improved accessibility (ARIA labels, keyboard navigation) - Better close button positioning and styling - Enhanced mobile responsiveness - Cleaner composition with DialogHeader/Footer App Component Routing: - Refactored routing logic for better clarity - Improved state management for navigation - Better integration with settings page - Enhanced error boundary handling - Cleaner separation of layout concerns - Improved provider context propagation - Better handling of deep links - Optimized re-renders with React.memo where appropriate Code Quality Improvements: - Reduced prop drilling with better component composition - Improved TypeScript type safety - Better separation of concerns - Enhanced code readability with clearer naming - Eliminated redundant logic Performance Optimizations: - Reduced unnecessary re-renders - Better memoization of callbacks - Optimized component tree structure - Improved event handler efficiency User Experience: - Smoother transitions and animations - Better visual feedback for interactions - Improved loading states - More consistent behavior across features These changes create a more maintainable and performant foundation for the application's UI layer while improving the overall user experience with smoother interactions and better visual polish.
68 lines
1.7 KiB
TypeScript
68 lines
1.7 KiB
TypeScript
import React from "react";
|
|
import { createPortal } from "react-dom";
|
|
import { ArrowLeft } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
interface FullScreenPanelProps {
|
|
isOpen: boolean;
|
|
title: string;
|
|
onClose: () => void;
|
|
children: React.ReactNode;
|
|
footer?: React.ReactNode;
|
|
}
|
|
|
|
/**
|
|
* Reusable full-screen panel component
|
|
* Handles portal rendering, header with back button, and footer
|
|
* Uses solid theme colors without transparency
|
|
*/
|
|
export const FullScreenPanel: React.FC<FullScreenPanelProps> = ({
|
|
isOpen,
|
|
title,
|
|
onClose,
|
|
children,
|
|
footer,
|
|
}) => {
|
|
if (!isOpen) return null;
|
|
|
|
return createPortal(
|
|
<div
|
|
className="fixed inset-0 z-[60] flex flex-col"
|
|
style={{ backgroundColor: "hsl(var(--background))" }}
|
|
>
|
|
{/* Header */}
|
|
<div
|
|
className="flex-shrink-0 px-6 py-4 flex items-center gap-4"
|
|
style={{ backgroundColor: "hsl(var(--background))" }}
|
|
>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={onClose}
|
|
className="hover:bg-black/5 dark:hover:bg-white/5"
|
|
>
|
|
<ArrowLeft className="h-5 w-5" />
|
|
</Button>
|
|
<h2 className="text-lg font-semibold text-foreground">{title}</h2>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="flex-1 overflow-y-auto px-6 py-6 space-y-6 max-w-5xl mx-auto w-full">
|
|
{children}
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
{footer && (
|
|
<div
|
|
className="flex-shrink-0 px-6 py-4 flex items-center justify-end gap-3"
|
|
style={{ backgroundColor: "hsl(var(--background))" }}
|
|
>
|
|
{footer}
|
|
</div>
|
|
)}
|
|
</div>,
|
|
document.body,
|
|
);
|
|
};
|