🐛 Text content does not match server-rendered HTML (#1407)

Render Kbd component only on client side

.github/CONTRIBUTING.md

@@ -11,8 +11,8 @@ If you would like to add a new emoji to gitmoji, fill the provided `ISSUE_TEMPLA
 1. Fork [this repository](https://github.com/carloscuesta/gitmoji/fork).
 2. Create a new branch with the feature name. (Eg: add-emoji-deploy, fix-website-header)
 3. Make your changes.
-4. Test you changes by running `yarn test`
-   - 4.1. If the snapshots are failing run `yarn test -u` and be sure that the new snapshots match your changes
+4. Test you changes by running `yarn turbo test`
+   - 4.1. If the snapshots are failing run `yarn turbo test -- -u` and be sure that the new snapshots match your changes
 5. Commit your changes. Don't forget to add a commit title with an emoji and a description.
 6. Push your changes.
 7. Submit your pull request.

packages/website/src/__tests__/__snapshots__/pages.spec.tsx.snap

@@ -564,12 +564,6 @@ exports[`Pages Index should render the page 1`] = `
             type="search"
             value=""
           />
-          <kbd
-            className="kbd"
-          >
-            Ctrl
-             K
-          </kbd>
         </div>
         <div
           className="actionsContainer"

packages/website/src/components/GitmojiList/Toolbar/Kbd/index.tsx

@@ -0,0 +1,14 @@
+import styles from './styles.module.css'
+
+const isMacOs = () => {
+  return (
+    typeof window !== 'undefined' &&
+    window.navigator.platform.toUpperCase().includes('MAC')
+  )
+}
+
+const Kbd = () => {
+  return <kbd className={styles.kbd}>{isMacOs() ? '⌘' : 'Ctrl'} K</kbd>
+}
+
+export default Kbd

packages/website/src/components/GitmojiList/Toolbar/Kbd/styles.module.css

@@ -0,0 +1,21 @@
+.kbd {
+  right: 0;
+  align-items: center;
+  border-radius: 3px;
+  border: solid 1px #999;
+  color: #595959;
+  display: flex;
+  font-family: system-ui;
+  margin-right: 0.5rem;
+  padding: 0.25rem 0.5rem;
+}
+
+[data-theme='dark'] .kbd {
+  color: #b8b8b8;
+}
+
+@media (max-width: 568px) {
+  .kbd {
+    display: none;
+  }
+}

packages/website/src/components/GitmojiList/Toolbar/index.tsx

@@ -1,7 +1,9 @@
 import { useEffect, useRef } from 'react'
+import dynamic from 'next/dynamic'
 
 import ListModeSelector from './ListModeSelector'
 import ThemeSelector from './ThemeSelector'
+const Kbd = dynamic(() => import('./Kbd'), { ssr: false })
 import styles from './styles.module.css'
 
 type Props = {
@@ -11,12 +13,6 @@ type Props = {
   setSearchInput: (searchInput: string) => void
 }
 
-const isMacOs = () => {
-  return typeof window === 'undefined'
-    ? true
-    : window.navigator.platform.toUpperCase().indexOf('MAC') >= 0
-}
-
 const Toolbar = (props: Props) => {
   const searchInputRef = useRef<HTMLInputElement>(null)
 
@@ -55,7 +51,7 @@ const Toolbar = (props: Props) => {
           value={props.searchInput}
         />
 
-        <kbd className={styles.kbd}>{isMacOs() ? '⌘' : 'Ctrl'} K</kbd>
+        <Kbd />
       </div>
 
       <div className={styles.actionsContainer}>

packages/website/src/components/GitmojiList/Toolbar/styles.module.css

@@ -41,26 +41,10 @@
   outline: none;
 }
 
-.kbd {
-  right: 0;
-  align-items: center;
-  border-radius: 3px;
-  border: solid 1px #999;
-  color: #595959;
-  display: flex;
-  font-family: system-ui;
-  margin-right: 0.5rem;
-  padding: 0.25rem 0.5rem;
-}
-
 [data-theme='dark'] .searchInput {
   color: var(--text);
 }
 
-[data-theme='dark'] .kbd {
-  color: #b8b8b8;
-}
-
 @media (max-width: 568px) {
   .searchInput {
     margin: 0;
@@ -71,8 +55,4 @@
     flex-direction: column-reverse;
     align-items: stretch;
   }
-
-  .kbd {
-    display: none;
-  }
 }

packages/website/src/components/GitmojiList/__tests__/__snapshots__/gitmojiList.spec.tsx.snap

@@ -360,12 +360,6 @@ exports[`GitmojiList when is not list mode should render the component 1`] = `
           type="search"
           value=""
         />
-        <kbd
-          className="kbd"
-        >
-          Ctrl
-           K
-        </kbd>
       </div>
       <div
         className="actionsContainer"