GuidePage.tsx
4.81 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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
import { useState, useEffect, useMemo } from "react";
import { BookOpen, Smartphone, Monitor } from "lucide-react";
import { DEFAULT_GUIDE_LOCALES } from "../guideContent";
import { KIOSK_EVENT, loadGuideOverrides, mergeGuideLocales } from "../kioskStorage";
import { PAGE_CONTENT_INSET } from "../pageContentInset";
import { useI18n } from "../i18n";
export function GuidePage() {
const { lang } = useI18n();
const [guideRev, setGuideRev] = useState(0);
useEffect(() => {
const h = () => setGuideRev((r) => r + 1);
window.addEventListener(KIOSK_EVENT, h);
window.addEventListener("storage", h);
return () => {
window.removeEventListener(KIOSK_EVENT, h);
window.removeEventListener("storage", h);
};
}, []);
const LOCALES = useMemo(
() => mergeGuideLocales(DEFAULT_GUIDE_LOCALES, loadGuideOverrides()),
[guideRev]
);
const locale = useMemo(() => {
const hit = LOCALES.find((l) => l.htmlLang === lang);
return hit ?? LOCALES[0]!;
}, [LOCALES, lang]);
useEffect(() => {
document.documentElement.lang = locale.htmlLang;
return () => {
document.documentElement.lang = "zh-CN";
};
}, [locale.htmlLang]);
return (
<div
className={`flex h-full min-h-0 w-full flex-1 flex-col overflow-hidden ${PAGE_CONTENT_INSET}`}
>
<div className="flex min-h-0 w-full min-w-0 flex-1 flex-col gap-3 overflow-hidden sm:gap-4">
<header className="shrink-0 space-y-2 sm:space-y-2.5">
<div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4">
<h1
lang={locale.htmlLang}
className={`flex items-center gap-2 text-xl font-bold text-white sm:gap-2 sm:text-2xl ${
locale.htmlLang === "bo" ? "font-serif" : ""
}`}
>
<BookOpen className="h-6 w-6 shrink-0 text-sky-400 sm:h-7 sm:w-7" />
{locale.title}
</h1>
</div>
</header>
<div className="min-h-0 max-h-full flex-1 overflow-y-auto overscroll-y-contain [-webkit-overflow-scrolling:touch] pr-0.5">
<div className="grid grid-cols-1 gap-4 pb-1 lg:grid-cols-2 lg:gap-6 lg:pb-0">
<section
className="flex min-h-0 min-w-0 flex-col rounded-2xl border border-white/20 bg-white/10 p-5 backdrop-blur-xl sm:p-6 lg:min-h-0 lg:p-8"
aria-labelledby={`guide-touch-${locale.htmlLang}`}
>
<h2
id={`guide-touch-${locale.htmlLang}`}
lang={locale.htmlLang}
className={`mb-3 flex shrink-0 items-center gap-2 text-lg font-bold leading-snug text-white sm:mb-4 sm:text-xl ${
locale.htmlLang === "bo" ? "font-serif" : ""
}`}
>
<Smartphone className="h-5 w-5 shrink-0 text-sky-400 sm:h-6 sm:w-6" />
{locale.touchTitle}
</h2>
<ul
className={`list-outside list-disc space-y-3 pl-10 text-sm leading-relaxed text-blue-100 marker:text-sky-400 sm:space-y-3.5 sm:pl-11 sm:text-base sm:leading-loose ${
locale.htmlLang === "bo" ? "font-serif" : ""
}`}
lang={locale.htmlLang}
>
{locale.touchItems.map((line, idx) => (
<li key={`t-${idx}`} className="[overflow-wrap:anywhere]">
{line}
</li>
))}
</ul>
</section>
<section
className="flex min-h-0 min-w-0 flex-col rounded-2xl border border-white/20 bg-white/10 p-5 backdrop-blur-xl sm:p-6 lg:min-h-0 lg:p-8"
aria-labelledby={`guide-software-${locale.htmlLang}`}
>
<h2
id={`guide-software-${locale.htmlLang}`}
lang={locale.htmlLang}
className={`mb-3 flex shrink-0 items-center gap-2 text-lg font-bold leading-snug text-white sm:mb-4 sm:text-xl ${
locale.htmlLang === "bo" ? "font-serif" : ""
}`}
>
<Monitor className="h-5 w-5 shrink-0 text-sky-400 sm:h-6 sm:w-6" />
{locale.softwareTitle}
</h2>
<ul
className={`list-outside list-disc space-y-3 pl-10 text-sm leading-relaxed text-blue-100 marker:text-sky-400 sm:space-y-3.5 sm:pl-11 sm:text-base sm:leading-loose ${
locale.htmlLang === "bo" ? "font-serif" : ""
}`}
lang={locale.htmlLang}
>
{locale.softwareItems.map((line, idx) => (
<li key={`s-${idx}`} className="[overflow-wrap:anywhere]">
{line}
</li>
))}
</ul>
</section>
</div>
</div>
</div>
</div>
);
}