50 lines
1.8 KiB
TypeScript
50 lines
1.8 KiB
TypeScript
|
"use client"
|
||
|
|
|
||
|
|
import { PencilLine } from "lucide-react"
|
||
|
|
import { cn } from "@/lib/utils"
|
||
|
|
|
||
|
|
export type CompactScoreFabProps = {
|
||
|
|
/** Controls the fade + scale in/out. Driven from outside (the page's
|
||
|
|
* existing `inFlowButtonVisible` state) -- this component owns no
|
||
|
|
* hide/show-on-scroll logic of its own. */
|
||
|
|
visible: boolean
|
||
|
|
/** Scrolls the user back to the player list (same action as the in-flow
|
||
|
|
* button). No navigation, no new page. */
|
||
|
|
onClick: () => void
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Compact, corner-anchored "Score" quick button (FAB).
|
||
|
|
*
|
||
|
|
* Replaces the old full-width bottom banner (round-detail.tsx, removed
|
||
|
|
* 2026-08-23 -- see CHANGELOG). Because it's small and pinned to the
|
||
|
|
* bottom-right corner, it never needs to hide to avoid covering content --
|
||
|
|
* so there is no scrim, no reserved bottom spacer, and no slide-up
|
||
|
|
* animation. It simply fades + scales in place.
|
||
|
|
*/
|
||
|
|
export function CompactScoreFab({ visible, onClick }: CompactScoreFabProps) {
|
||
|
|
return (
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={onClick}
|
||
|
|
aria-hidden={!visible}
|
||
|
|
tabIndex={visible ? 0 : -1}
|
||
|
|
className={cn(
|
||
|
|
"fixed bottom-[calc(1.25rem+env(safe-area-inset-bottom))] right-[calc(1.25rem+env(safe-area-inset-right))] z-30",
|
||
|
|
"inline-flex h-12 items-center gap-2 rounded-full px-5",
|
||
|
|
"bg-primary text-primary-foreground font-bold",
|
||
|
|
"shadow-lg shadow-black/20",
|
||
|
|
"transition-all duration-200 ease-in-out",
|
||
|
|
"hover:brightness-95 active:scale-[0.98]",
|
||
|
|
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
|
||
|
|
visible ? "scale-100 opacity-100" : "pointer-events-none scale-90 opacity-0",
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
<PencilLine aria-hidden="true" className="size-5" />
|
||
|
|
Score
|
||
|
|
</button>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default CompactScoreFab
|