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:
SkateSpots 2026-09-29 17:56:01 +07:00
parent daedf7ac57
commit 8394d006dd
3 changed files with 13 additions and 7 deletions

View file

@ -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>
))

View file

@ -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>

View file

@ -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}