fix(map): one close button on the spot sheet
SheetContent renders a built-in close X, and SpotBottomSheet adds its own in the header row - so tapping a spot showed two. Added an opt-in hideClose prop to SheetContent and used it on the spot sheet (which keeps its own, placed in the header). Also padded the new mint sheet header clear of the built-in close.
This commit is contained in:
parent
daedf7ac57
commit
8394d006dd
3 changed files with 13 additions and 7 deletions
|
|
@ -49,12 +49,15 @@ const sheetVariants = cva(
|
|||
|
||||
interface SheetContentProps
|
||||
extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
|
||||
VariantProps<typeof sheetVariants> { }
|
||||
VariantProps<typeof sheetVariants> {
|
||||
/** Hide the built-in close button — for sheets that render their own. */
|
||||
hideClose?: boolean;
|
||||
}
|
||||
|
||||
const SheetContent = React.forwardRef<
|
||||
React.ElementRef<typeof SheetPrimitive.Content>,
|
||||
SheetContentProps
|
||||
>(({ side = "right", className, children, ...props }, ref) => (
|
||||
>(({ side = "right", className, children, hideClose = false, ...props }, ref) => (
|
||||
<SheetPortal>
|
||||
<SheetOverlay />
|
||||
<SheetPrimitive.Content
|
||||
|
|
@ -63,10 +66,12 @@ const SheetContent = React.forwardRef<
|
|||
{...props}
|
||||
>
|
||||
{children}
|
||||
<SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
|
||||
<X className="h-4 w-4" />
|
||||
<span className="sr-only">Close</span>
|
||||
</SheetPrimitive.Close>
|
||||
{!hideClose && (
|
||||
<SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
|
||||
<X className="h-4 w-4" />
|
||||
<span className="sr-only">Close</span>
|
||||
</SheetPrimitive.Close>
|
||||
)}
|
||||
</SheetPrimitive.Content>
|
||||
</SheetPortal>
|
||||
))
|
||||
|
|
|
|||
|
|
@ -2058,6 +2058,7 @@ export default function MapPage() {
|
|||
<Sheet open={!!selectedSpot} onOpenChange={(open) => { if (!open) setSelectedSpot(null); }}>
|
||||
<SheetContent
|
||||
side="bottom"
|
||||
hideClose
|
||||
className="h-auto max-h-[55vh] rounded-t-2xl px-0 pb-0 bg-black/95 border-t border-white/10"
|
||||
>
|
||||
<SheetTitle className="sr-only">{selectedSpot?.title ?? 'Spot details'}</SheetTitle>
|
||||
|
|
|
|||
|
|
@ -320,7 +320,7 @@ export default function MintsPage() {
|
|||
{selected && (
|
||||
<>
|
||||
<SheetHeader className="pb-3 text-left">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center gap-3 pr-8">
|
||||
{selected.iconUrl ? (
|
||||
<img
|
||||
src={selected.iconUrl}
|
||||
|
|
|
|||
Loading…
Reference in a new issue