mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-22 15:06:32 +00:00
Maurice
85b5756e89
Ride minutes and late marks follow an edited timetable instead of the routing that fetched them; a landing day's join band reads as the ride it is rather than a nine hour drive of no length; the refuel offer is there on the road out of a terminal or a pick-up desk; the phone's stage map draws the ride; the share page numbers its stops the way the planner does; the PDF lists a day the way the day plan lists it, from both shells; a poster-less clip draws its play badge everywhere, not only in the editor; the hero title has room for its descenders and the list card keeps its badge clear; the release notice keeps its close control in reach when it stacks; a link chip's actions are thumb-sized and its delete asks first; the Google retry line and the Google-only switch appear only where Google answers.
43 lines
1.7 KiB
TypeScript
43 lines
1.7 KiB
TypeScript
import React from 'react'
|
|
import { ChevronRight } from 'lucide-react'
|
|
|
|
interface GoogleOptionsProps {
|
|
/** "Google options" — the heading of the fold. */
|
|
title: string
|
|
/** Right-hand summary while folded, e.g. "4 of 5 on". */
|
|
summary: string
|
|
children: React.ReactNode
|
|
}
|
|
|
|
/**
|
|
* The fold that holds what a Google key is allowed to be spent on.
|
|
*
|
|
* Only these switches fold away. The key fields above stay visible: a field you
|
|
* have to go looking for is worse than a long page, and the keys are the reason
|
|
* an admin opens this card at all. The switches are the opposite — set once,
|
|
* then never touched, and there are five of them.
|
|
*
|
|
* A native <details> rather than a state hook: keyboard operable and announced
|
|
* to screen readers without writing any of that, and it survives a re-render
|
|
* without state.
|
|
*/
|
|
export default function GoogleOptions({ title, summary, children }: GoogleOptionsProps): React.ReactElement {
|
|
return (
|
|
<details className="group rounded-lg border border-edge-secondary bg-surface-secondary/40">
|
|
<summary
|
|
className="flex cursor-pointer list-none items-center gap-2 px-4 py-2.5
|
|
focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent
|
|
[&::-webkit-details-marker]:hidden"
|
|
>
|
|
<ChevronRight
|
|
className="h-4 w-4 flex-shrink-0 text-content-faint transition-transform group-open:rotate-90"
|
|
aria-hidden="true"
|
|
/>
|
|
<span className="flex-1 text-sm font-medium text-content-secondary">{title}</span>
|
|
<span className="text-xs text-content-faint">{summary}</span>
|
|
</summary>
|
|
<div className="border-t border-edge-faint px-4">{children}</div>
|
|
</details>
|
|
)
|
|
}
|