Pin button: its hint is the site's tooltip, not the browser's title
1 file+24−190/1 viewed
| 8 | 8 | import { useFetcher } from "react-router"; | |
| 9 | 9 | ||
| 10 | 10 | import { cn } from "../lib/cn"; | |
| 11 | + | import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip"; | |
| 11 | 12 | ||
| 12 | 13 | export function PinButton({ | |
| 13 | 14 | workspace, | |
| ⋯ | |||
| 38 | 39 | <fetcher.Form method="post" action={`/${workspace}/-/pins`} className={cn("relative flex", className)}> | |
| 39 | 40 | <input type="hidden" name="intent" value={shown ? "unpin" : "pin"} /> | |
| 40 | 41 | <input type="hidden" name="slug" value={slug} /> | |
| 41 | − | <button | |
| 42 | − | type="submit" | |
| 43 | − | aria-label={label} | |
| 44 | − | aria-pressed={shown} | |
| 45 | − | title={error ?? (shown ? "Unpin from the sidebar" : "Pin to the sidebar")} | |
| 46 | − | className={cn( | |
| 47 | − | "inline-flex shrink-0 items-center justify-center gap-1.5 rounded-md text-[0.8125rem] transition-colors outline-none focus-visible:ring-2 focus-visible:ring-accent", | |
| 48 | − | small | |
| 49 | − | ? "relative z-10 size-6 hover:bg-raised" | |
| 50 | − | : compact | |
| 51 | − | ? "relative z-10 size-8 hover:bg-raised" | |
| 52 | − | : "h-8 border border-line px-2.5 text-fg/80 hover:border-line-strong hover:bg-surface hover:text-fg", | |
| 53 | − | shown ? "text-accent" : compact || small ? "text-faint hover:text-fg" : "", | |
| 54 | − | error && "text-danger", | |
| 55 | − | )} | |
| 56 | − | > | |
| 57 | − | <Pin size={small ? 12 : 14} className={shown ? "fill-current" : undefined} /> | |
| 58 | − | {!compact && !small && <span className="hidden sm:inline">{shown ? "Unpin" : "Pin"}</span>} | |
| 59 | − | </button> | |
| 42 | + | <Tooltip> | |
| 43 | + | <TooltipTrigger asChild> | |
| 44 | + | <button | |
| 45 | + | type="submit" | |
| 46 | + | aria-label={label} | |
| 47 | + | aria-pressed={shown} | |
| 48 | + | className={cn( | |
| 49 | + | "inline-flex shrink-0 items-center justify-center gap-1.5 rounded-md text-[0.8125rem] transition-colors outline-none focus-visible:ring-2 focus-visible:ring-accent", | |
| 50 | + | small | |
| 51 | + | ? "relative z-10 size-6 hover:bg-raised" | |
| 52 | + | : compact | |
| 53 | + | ? "relative z-10 size-8 hover:bg-raised" | |
| 54 | + | : "h-8 border border-line px-2.5 text-fg/80 hover:border-line-strong hover:bg-surface hover:text-fg", | |
| 55 | + | shown ? "text-accent" : compact || small ? "text-faint hover:text-fg" : "", | |
| 56 | + | error && "text-danger", | |
| 57 | + | )} | |
| 58 | + | > | |
| 59 | + | <Pin size={small ? 12 : 14} className={shown ? "fill-current" : undefined} /> | |
| 60 | + | {!compact && !small && <span className="hidden sm:inline">{shown ? "Unpin" : "Pin"}</span>} | |
| 61 | + | </button> | |
| 62 | + | </TooltipTrigger> | |
| 63 | + | <TooltipContent>{error ?? (shown ? "Unpin from the sidebar" : "Pin to the sidebar")}</TooltipContent> | |
| 64 | + | </Tooltip> | |
| 60 | 65 | </fetcher.Form> | |
| 61 | 66 | ); | |
| 62 | 67 | } | |