Extract language switch component

components/LanguageSwitch/index.module.scss

@@ -0,0 +1,56 @@
+.languageSwitch {
+  $height: 24px;
+
+  background: $grey-60;
+  border-radius: calc($height / 2);
+  border: none;
+  position: relative;
+  width: 44px;
+  height: $height;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  .thumb {
+    $diameter: 18px;
+
+    background: $grey-100;
+    border-radius: calc($diameter / 2);
+    display: block;
+    height: $diameter;
+    width: $diameter;
+    position: absolute;
+    top: 3px;
+    left: 3px;
+    z-index: 3;
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    &[data-state='checked'] {
+      background: $grey-100;
+      left: 23px;
+    }
+  }
+
+  .left,
+  .right {
+    color: $grey-100;
+    font-size: 10px;
+    font-weight: $bold;
+    position: absolute;
+    z-index: 2;
+  }
+
+  .left {
+    top: 6px;
+    left: 6px;
+  }
+
+  .right {
+    top: 6px;
+    right: 5px;
+  }
+}

components/LanguageSwitch/index.tsx

@@ -0,0 +1,51 @@
+import React, { PropsWithChildren, useEffect, useState } from 'react'
+import { useRouter } from 'next/router'
+import { setCookie } from 'cookies-next'
+import { retrieveLocaleCookies } from '~utils/retrieveCookies'
+import * as SwitchPrimitive from '@radix-ui/react-switch'
+import styles from './index.module.scss'
+
+interface Props extends SwitchPrimitive.SwitchProps {}
+
+export const LanguageSwitch = React.forwardRef<HTMLButtonElement, Props>(
+  function languageSwitch(
+    { children }: PropsWithChildren<Props>,
+    forwardedRef
+  ) {
+    // Router and locale data
+    const router = useRouter()
+    const localeData = retrieveLocaleCookies()
+
+    // State
+    const [languageChecked, setLanguageChecked] = useState(false)
+
+    // Hooks
+    useEffect(() => {
+      setLanguageChecked(localeData === 'ja' ? true : false)
+    }, [localeData])
+
+    function changeLanguage(value: boolean) {
+      const language = value ? 'ja' : 'en'
+      const expiresAt = new Date()
+      expiresAt.setDate(expiresAt.getDate() + 120)
+
+      setCookie('NEXT_LOCALE', language, { path: '/', expires: expiresAt })
+      router.push(router.asPath, undefined, { locale: language })
+    }
+
+    return (
+      <SwitchPrimitive.Root
+        className={styles.languageSwitch}
+        onCheckedChange={changeLanguage}
+        checked={languageChecked}
+        ref={forwardedRef}
+      >
+        <SwitchPrimitive.Thumb className={styles.thumb} />
+        <span className={styles.left}>JP</span>
+        <span className={styles.right}>EN</span>
+      </SwitchPrimitive.Root>
+    )
+  }
+)
+
+export default LanguageSwitch