Mobile Bottom Sheet Component

I'll create a reusable bottom sheet component that slides in from the bottom with a smooth transition. This is commonly used in mobile interfaces for additional options or content without leaving the current screen.

How It Works

The bottom sheet component:

1. Slides in from bottom: Uses Framer Motion to animate the sheet from below the viewport to its final position
2. Overlay backdrop: Includes a semi-transparent backdrop that fades in when the sheet opens
3. Responsive design: Works well on mobile devices with appropriate sizing and touch interactions
4. Customizable height: You can set the maximum height of the sheet through props
5. Accessibility features: Prevents background scrolling when the sheet is open

Key Features

• Smooth spring animation for natural movement
• Drag handle at the top for visual indication
• Optional title with close button
• Scrollable content area for overflow content
• Backdrop click to dismiss
• Prevents body scrolling when open

You can customize this component further by:

• Adding swipe-to-dismiss functionality
• Implementing different animation variants
• Adding custom transition timing
• Creating different height presets (small, medium, large)