mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-28 09:33:46 +00:00
Refactor TopUpModal for improved code clarity and structure
- Consolidated content rendering into a single JSX variable for better readability. - Simplified modal rendering logic by removing nested components and using a single conditional return. - Enhanced mobile and desktop modal handling for clearer separation of concerns.
This commit is contained in:
@@ -258,7 +258,8 @@ export default function TopUpModal({ method, onClose, initialAmountRubles }: Top
|
|||||||
// Calculate display amount for preview
|
// Calculate display amount for preview
|
||||||
const displayAmount = amount && parseFloat(amount) > 0 ? parseFloat(amount) : 0
|
const displayAmount = amount && parseFloat(amount) > 0 ? parseFloat(amount) : 0
|
||||||
|
|
||||||
const renderContent = () => (
|
// Content JSX - shared between mobile and desktop
|
||||||
|
const contentJSX = (
|
||||||
<div className="space-y-5">
|
<div className="space-y-5">
|
||||||
{/* Header icon and method */}
|
{/* Header icon and method */}
|
||||||
<div className="flex items-center gap-4 pb-1">
|
<div className="flex items-center gap-4 pb-1">
|
||||||
@@ -403,8 +404,8 @@ export default function TopUpModal({ method, onClose, initialAmountRubles }: Top
|
|||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|
||||||
// Mobile bottom sheet
|
// Render modal based on screen size - NO nested components!
|
||||||
const MobileModal = () => (
|
const modalContent = isMobileScreen ? (
|
||||||
<>
|
<>
|
||||||
{/* Backdrop */}
|
{/* Backdrop */}
|
||||||
<div
|
<div
|
||||||
@@ -442,14 +443,11 @@ export default function TopUpModal({ method, onClose, initialAmountRubles }: Top
|
|||||||
|
|
||||||
{/* Content */}
|
{/* Content */}
|
||||||
<div className="px-5 py-5 overflow-y-auto">
|
<div className="px-5 py-5 overflow-y-auto">
|
||||||
{renderContent()}
|
{contentJSX}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
)
|
) : (
|
||||||
|
|
||||||
// Desktop modal - positioned higher
|
|
||||||
const DesktopModal = () => (
|
|
||||||
<div
|
<div
|
||||||
className="fixed inset-0 bg-black/60 z-[60] flex items-start justify-center p-4 pt-[10vh]"
|
className="fixed inset-0 bg-black/60 z-[60] flex items-start justify-center p-4 pt-[10vh]"
|
||||||
onClick={handleClose}
|
onClick={handleClose}
|
||||||
@@ -477,16 +475,14 @@ export default function TopUpModal({ method, onClose, initialAmountRubles }: Top
|
|||||||
|
|
||||||
{/* Content */}
|
{/* Content */}
|
||||||
<div className="p-6">
|
<div className="p-6">
|
||||||
{renderContent()}
|
{contentJSX}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|
||||||
const content = isMobileScreen ? <MobileModal /> : <DesktopModal />
|
|
||||||
|
|
||||||
if (typeof document !== 'undefined') {
|
if (typeof document !== 'undefined') {
|
||||||
return createPortal(content, document.body)
|
return createPortal(modalContent, document.body)
|
||||||
}
|
}
|
||||||
return content
|
return modalContent
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user