Open History to see the last commit
1import { AndroidIcon, AppleIcon } from "../Icons";
2import { Button } from "../ui/button";
3import { Popover, PopoverPopup, PopoverTitle, PopoverTrigger } from "../ui/popover";
4import { QRCodeSvg } from "../ui/qr-code";
5import { SettingsRow } from "./settingsLayout";
6import { searchableSetting } from "./settingsSearch";
7
8const stores = [
9 {
10 label: "iPhone and iPad",
11 store: "App Store",
12 url: "https://apps.apple.com/us/app/t3-code-remote-claude-more/id6787819824",
13 Icon: AppleIcon,
14 },
15 {
16 label: "Android",
17 store: "Google Play",
18 url: "https://play.google.com/store/apps/details?id=com.t3tools.t3code",
19 Icon: AndroidIcon,
20 },
21];
22
23export function MobileAppSettingsRow() {
24 return (
25 <SettingsRow
26 {...searchableSetting("mobile-app")}
27 description="Connect to your server from your phone or tablet."
28 control={
29 <div className="flex items-center gap-2">
30 {stores.map(({ label, store, url, Icon }) => (
31 <Popover key={store}>
32 <PopoverTrigger render={<Button size="sm" variant="outline" />}>
33 <Icon />
34 {label}
35 </PopoverTrigger>
36 <PopoverPopup align="end">
37 <div className="flex flex-col items-center gap-3">
38 <PopoverTitle>{store}</PopoverTitle>
39 <p className="text-xs text-muted-foreground">Scan with your phone camera.</p>
40 <div className="rounded-lg bg-white p-1.5">
41 <QRCodeSvg
42 value={url}
43 size={128}
44 level="M"
45 marginSize={1}
46 title={`${store} link`}
47 />
48 </div>
49 <Button
50 size="sm"
51 variant="outline"
52 render={<a href={url} target="_blank" rel="noreferrer noopener" />}
53 >
54 Open {store}
55 </Button>
56 </div>
57 </PopoverPopup>
58 </Popover>
59 ))}
60 </div>
61 }
62 />
63 );
64}