b1b4f56b47
Created responsive dialog pattern for better mobile UX:
Components Added:
1. drawer.tsx - Vaul-based drawer component (bottom sheet)
2. responsive-dialog.tsx - Smart wrapper that switches based on screen size
3. use-media-query.ts - Hook to detect screen size
Pattern:
- Desktop (≥768px): Use Dialog (modal overlay)
- Mobile (<768px): Use Drawer (bottom sheet)
- Provides consistent API for both
Usage Example:
<ResponsiveDialog
open={isOpen}
onOpenChange={setIsOpen}
title="Settings"
description="Configure your options"
footer={<Button>Save</Button>}
>
<FormContent />
</ResponsiveDialog>
Benefits:
- Better mobile UX with native-feeling bottom sheet
- Easier to reach buttons on mobile
- Consistent desktop experience
- Single component API
Dependencies:
- npm install vaul (drawer library)
- @radix-ui/react-dialog (already installed)
Next Steps:
- Convert payment gateway modal to use ResponsiveDialog
- Use AlertDialog for confirmations
- Apply pattern to other modals in project
Note: Payment gateway modal needs custom implementation
due to complex layout (scrollable body + sticky footer)
20 lines
456 B
TypeScript
20 lines
456 B
TypeScript
import * as React from "react"
|
|
|
|
export function useMediaQuery(query: string) {
|
|
const [value, setValue] = React.useState(false)
|
|
|
|
React.useEffect(() => {
|
|
function onChange(event: MediaQueryListEvent) {
|
|
setValue(event.matches)
|
|
}
|
|
|
|
const result = matchMedia(query)
|
|
result.addEventListener("change", onChange)
|
|
setValue(result.matches)
|
|
|
|
return () => result.removeEventListener("change", onChange)
|
|
}, [query])
|
|
|
|
return value
|
|
}
|