| 1 | import { Show } from "solid-js"; |
| 2 | import type { ServiceSummary } from "../types/model.ts"; |
| 3 | |
| 4 | function slot(id: string) { |
| 5 | let seed = 0; |
| 6 | for (const char of id) seed = (seed * 31 + char.charCodeAt(0)) % 997; |
| 7 | return (seed % 8) + 1; |
| 8 | } |
| 9 | |
| 10 | /** The service's in-tree icon, or a lettered tile when it has none. */ |
| 11 | export function AppIcon(props: { id: string; name: string; icon: ServiceSummary["icon"] }) { |
| 12 | return ( |
| 13 | <Show when={props.icon} fallback={ |
| 14 | <span class="monogram" aria-hidden="true" style={{ background: `var(--series-${slot(props.id)})` }}> |
| 15 | {props.name.slice(0, 1).toUpperCase()} |
| 16 | </span> |
| 17 | }> |
| 18 | {(icon) => ( |
| 19 | <picture> |
| 20 | <source srcset={icon().dark} media="(prefers-color-scheme: dark)" /> |
| 21 | <img src={icon().light} alt="" /> |
| 22 | </picture> |
| 23 | )} |
| 24 | </Show> |
| 25 | ); |
| 26 | } |