git.iko.soy/urbit.org
on master help sign in
header: detect OS for shortcut
40fbeaeMatilde Park
components/ContentArea.js+19−1
compare with master
unifiedsplit
@@ -1,6 +1,24 @@
1import Section from "./Section";
1import Section from "./Section";
2+import { useState, useEffect } from "react";
2
3
3export default function ContentArea(props) {
4export 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+
4 return (
22 return (
5 <div className="w-full min-w-0 flex flex-col">
23 <div className="w-full min-w-0 flex flex-col">
6 <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">
24 <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) {
14 }}
32 }}
15 className="button-sm bg-wall text-gray"
33 className="button-sm bg-wall text-gray"
16 >
34 >
17− Search<div className="ml-4 text-lightGray">⌘K</div>
35+ Search<div className="ml-4 text-lightGray">{shortcut}</div>
18 </button>
36 </button>
19 </div>
37 </div>
20 </div>
38 </div>
components/Header.js+18−2
@@ -1,6 +1,6 @@
1import Link from "next/link";
1import Link from "next/link";
2import { useRouter } from "next/router";
2import { useRouter } from "next/router";
3−import { useState } from "react";
3+import { useState, useEffect } from "react";
4import classnames from "classnames";
4import classnames from "classnames";
5import path from "path";
5import path from "path";
6import MenuTray from "../components/MenuTray";
6import MenuTray from "../components/MenuTray";
@@ -24,6 +24,7 @@ function ActiveLink({ children, href, className, currentPath }) {
24
24
25export default function Header(props) {
25export default function Header(props) {
26 const [isOpen, setTray] = useState(false);
26 const [isOpen, setTray] = useState(false);
27+ const [shortcut, setShortcut] = useState("");
27
28
28 const currentPath = useRouter().asPath;
29 const currentPath = useRouter().asPath;
29
30
@@ -31,6 +32,21 @@ export default function Header(props) {
31
32
32 const firstCrumb = currentPath.split("/")[1];
33 const firstCrumb = currentPath.split("/")[1];
33
34
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+
34 return (
50 return (
35 <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">
51 <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">
36 <div>
52 <div>
@@ -84,7 +100,7 @@ export default function Header(props) {
84 }}
100 }}
85 className="button-sm bg-wall text-gray"
101 className="button-sm bg-wall text-gray"
86 >
102 >
87− Search<div className="ml-4 text-lightGray">⌘K</div>
103+ Search<div className="ml-4 text-lightGray">{shortcut}</div>
88 </button>
104 </button>
89 </nav>
105 </nav>
90
106