git.iko.soy/urbit.org
on master help sign in
header: detect OS for shortcut

Fixes #737

commit40fbeae52fe0d0f507f72c61dd0618f3af6b7898 authorMatilde Park <matilde@tlon.io> dateWed 28 Jul 2021, 16:29 (5 years ago) parentb6b0712
2 files changed+37−3
compare with master
unifiedsplit
components/ContentArea.js+19−1 components/Header.js+18−2
components/ContentArea.js+19−1
@@ -1,6 +1,24 @@
11import Section from "./Section";
2+import { useState, useEffect } from "react";
23
34export default function ContentArea(props) {
5+ const [shortcut, setShortcut] = useState("");
6+
7+ const detectOS = () => {
8+ const agent = window.navigator.appVersion;
9+ if (agent.includes("Win")) {
10+ return "Ctrl+K";
11+ } else if (agent.includes("Mac")) {
12+ return "⌘K";
13+ } else if (agent.includes("Linux")) {
14+ return "Ctrl+K";
15+ }
16+ };
17+
18+ useEffect(() => {
19+ setShortcut(detectOS());
20+ }, []);
21+
422 return (
523 <div className="w-full min-w-0 flex flex-col">
624 <div className="px-4 md:px-12 lg:px-24 pb-24 pt-8 md:pt-10 lg:pt-16 flex flex-col w-full max-h-screen h-screen overflow-y-scroll">
@@ -14,7 +32,7 @@ export default function ContentArea(props) {
1432 }}
1533 className="button-sm bg-wall text-gray"
1634 >
17− Search<div className="ml-4 text-lightGray">⌘K</div>
35+ Search<div className="ml-4 text-lightGray">{shortcut}</div>
1836 </button>
1937 </div>
2038 </div>
components/Header.js+18−2
@@ -1,6 +1,6 @@
11import Link from "next/link";
22import { useRouter } from "next/router";
3−import { useState } from "react";
3+import { useState, useEffect } from "react";
44import classnames from "classnames";
55import path from "path";
66import MenuTray from "../components/MenuTray";
@@ -24,6 +24,7 @@ function ActiveLink({ children, href, className, currentPath }) {
2424
2525export default function Header(props) {
2626 const [isOpen, setTray] = useState(false);
27+ const [shortcut, setShortcut] = useState("");
2728
2829 const currentPath = useRouter().asPath;
2930
@@ -31,6 +32,21 @@ export default function Header(props) {
3132
3233 const firstCrumb = currentPath.split("/")[1];
3334
35+ const detectOS = () => {
36+ const agent = window.navigator.appVersion;
37+ if (agent.includes("Win")) {
38+ return "Ctrl+K";
39+ } else if (agent.includes("Mac")) {
40+ return "⌘K";
41+ } else if (agent.includes("Linux")) {
42+ return "Ctrl+K";
43+ }
44+ };
45+
46+ useEffect(() => {
47+ setShortcut(detectOS());
48+ }, []);
49+
3450 return (
3551 <header className="w-full px-4 md:px-8 md:w-10/12 flex flex-row justify-between items-center pt-8 md:pt-10 lg:pt-12 pb-10 md:pb-12 lg:pb-24">
3652 <div>
@@ -84,7 +100,7 @@ export default function Header(props) {
84100 }}
85101 className="button-sm bg-wall text-gray"
86102 >
87− Search<div className="ml-4 text-lightGray">⌘K</div>
103+ Search<div className="ml-4 text-lightGray">{shortcut}</div>
88104 </button>
89105 </nav>
90106