| 1 | import ArrowUpRight from "lucide-solid/icons/arrow-up-right"; |
| 2 | import type { JSX } from "solid-js"; |
| 3 | import type { ServiceSummary } from "../types/model.ts"; |
| 4 | import { AppIcon } from "./AppIcon.tsx"; |
| 5 | |
| 6 | /** |
| 7 | * A chip out to the real app a page wraps, placed after the page title: the app's icon, then `children` if given. |
| 8 | * The tooltip says where it lands; with `icon={false}` the chip shows that address instead, for pages that already |
| 9 | * show the app's icon. |
| 10 | */ |
| 11 | export function OpenApp(props: { |
| 12 | app: Pick<ServiceSummary, "id" | "name" | "icon">; |
| 13 | href: string; |
| 14 | icon?: false; |
| 15 | children?: JSX.Element; |
| 16 | }) { |
| 17 | // A query is noise in a tooltip, but a hash route like #/master/users says where it lands. |
| 18 | const host = () => props.href.replace(/^https?:\/\//, "").replace(/#?\/?\?.*$/, "").replace(/\/$/, ""); |
| 19 | return ( |
| 20 | <a class="open-app" href={props.href} target="_blank" rel="noreferrer" aria-label={`Open ${props.app.name}`} |
| 21 | data-tip={props.icon === false ? undefined : host()}> |
| 22 | {props.icon === false ? host() : <AppIcon id={props.app.id} name={props.app.name} icon={props.app.icon} />} |
| 23 | {props.children} |
| 24 | <ArrowUpRight size={12} class="arrow" aria-hidden="true" /> |
| 25 | </a> |
| 26 | ); |
| 27 | } |