Repository navigation
Expand file tree
/
Copy pathPhoneHome.tsx
More file actions
89 lines (87 loc) · 3.16 KB
/
Copy pathPhoneHome.tsx
File metadata and controls
89 lines (87 loc) · 3.16 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
import { getReleaseCopy } from "../release-i18n";
import type { PhoneLocale } from "../phone-types";
import { DeviceHomeCard } from "./DeviceBattery";
import type { FastCanvasBattery } from "../glasses";
import type { ReactNode } from "react";
import { APP_VERSION } from "../app-metadata";
import type { PhoneStringKey } from "../phone-i18n";
import type { PhoneIconName } from "../phone-icons";
import { PhoneIcon } from "../phone-icons";
import type { PhoneScreen } from "../phone-types";
type HomeCard = {
readonly screen: Exclude<PhoneScreen, "home">;
readonly icon: PhoneIconName;
readonly titleKey: PhoneStringKey;
readonly status: string;
};
export function PhoneHome({
t,
locale = "en",
cards,
preview,
appearance,
battery,
onOpen,
}: {
readonly locale?: PhoneLocale;
readonly t: (key: PhoneStringKey) => string;
readonly cards: readonly HomeCard[];
readonly preview: ReactNode;
readonly appearance?: ReactNode;
readonly battery?: FastCanvasBattery;
readonly onOpen: (screen: Exclude<PhoneScreen, "home">) => void;
}) {
return (
<div className="phone-home">
{appearance}
<section className="phone-home__preview" aria-label={t("liveHudPreview")}>
<div className="phone-home__preview-slot" data-phone-preview-slot>
{preview}
</div>
</section>
<h2 className="phone-home__section-title">{t("dashboard")}</h2>
<nav className="phone-home__grid" aria-label={t("dashboard")}>
{cards.map((card) => (
<button
key={card.screen}
type="button"
className={`phone-home-card${card.screen === "devices" ? " phone-home-card--devices" : ""}`}
aria-label={card.screen === "devices" ? undefined : `${t(card.titleKey)} · ${card.status}`}
onClick={() => onOpen(card.screen)}
>
{card.screen === "devices" ? <DeviceHomeCard battery={battery} t={t}/> : <>
<PhoneIcon
name={card.icon}
size={30}
className="phone-home-card__icon"
/>
<span className="phone-home-card__copy">
<strong>{t(card.titleKey)}</strong>
<small>{card.status}</small>
</span>
</>}
</button>
))}
</nav>
<footer className="phone-home__footer">
<div>
<strong>{t("project")}</strong>
<span>v{APP_VERSION}</span>
</div>
<a
href="https://github.com/hmmhmmhm/sandevistan"
target="_blank"
rel="noreferrer"
aria-label={t("github")}
>
<PhoneIcon name="github" size={24} />
</a>
<p>
© <a href="https://openmaptiles.org/" target="_blank" rel="noreferrer">OpenMapTiles</a>
{" · "}© <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noreferrer">OpenStreetMap contributors</a>
</p>
<p><a href="https://open-meteo.com/" target="_blank" rel="noreferrer">{getReleaseCopy(locale, "sourceWeather")}</a>{" · "}<a href="https://www.geonames.org/" target="_blank" rel="noreferrer">{getReleaseCopy(locale, "sourceGeocoding")}</a></p>
</footer>
</div>
);
}