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;