diff --git a/beta/src/components/Search.tsx b/beta/src/components/Search.tsx
index 5ab7251c..cac28bc9 100644
--- a/beta/src/components/Search.tsx
+++ b/beta/src/components/Search.tsx
@@ -30,11 +30,14 @@ function Hit({hit, children}: any) {
);
}
-function Kbd(props: {children?: React.ReactNode}) {
+function Kbd(props: {children?: React.ReactNode; wide?: boolean}) {
+ const {wide, ...rest} = props;
+ const width = wide ? 'w-10' : 'w-5';
+
return (
);
}
@@ -168,7 +171,10 @@ export function Search({
Search
- ⌘
+ ⌘
+
+ Ctrl
+
K
diff --git a/beta/src/pages/_document.tsx b/beta/src/pages/_document.tsx
index 2408be01..4596b7bc 100644
--- a/beta/src/pages/_document.tsx
+++ b/beta/src/pages/_document.tsx
@@ -49,6 +49,14 @@ const MyDocument = () => {
setTheme(e.matches ? 'dark' : 'light');
}
});
+
+ // Detect whether the browser is Mac to display platform specific content
+ // An example of such content can be the keyboard shortcut displayed in the search bar
+ document.documentElement.classList.add(
+ window.navigator.platform.includes('Mac')
+ ? "platform-mac"
+ : "platform-win"
+ );
})();
`,
}}
diff --git a/beta/src/styles/index.css b/beta/src/styles/index.css
index c7cc1ab7..309470e3 100644
--- a/beta/src/styles/index.css
+++ b/beta/src/styles/index.css
@@ -97,6 +97,15 @@
display: none;
}
+ /* Hide all content that's relevant only to a specific platform */
+ html.platform-mac [data-platform='win'] {
+ display: none;
+ }
+
+ html.platform-win [data-platform='mac'] {
+ display: none;
+ }
+
html,
body {
padding: 0;