Update ElementToggle to use CSS modules

components/ElementToggle/index.module.scss

@@ -1,4 +1,4 @@
-.ToggleGroup {
+.group {
   $height: 36px;
 
   background-color: var(--toggle-bg);
@@ -15,7 +15,7 @@
     height: auto;
   }
 
-  .ToggleItem {
+  .item {
     background: var(--toggle-bg);
     border: none;
     border-radius: 18px;

components/ElementToggle/index.tsx

@@ -1,74 +1,114 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
 import { useTranslation } from 'next-i18next'
+import classNames from 'classnames'
 
 import * as ToggleGroup from '@radix-ui/react-toggle-group'
-
 import styles from './index.module.scss'
 
 interface Props {
   currentElement: number
-  sendValue: (value: string) => void
+  sendValue: (value: number) => void
 }
 
-const ElementToggle = (props: Props) => {
+const ElementToggle = ({ currentElement, sendValue, ...props }: Props) => {
+  // Router and localization
   const router = useRouter()
-  const { t } = useTranslation('common')
   const locale =
     router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
 
+  const { t } = useTranslation('common')
+
+  // State: Component
+  const [element, setElement] = useState(currentElement)
+
+  // Methods: Handlers
+  const handleElementChange = (value: string) => {
+    const newElement = parseInt(value)
+    setElement(newElement)
+    sendValue(newElement)
+  }
+
+  // Methods: Rendering
   return (
     <ToggleGroup.Root
-      className="ToggleGroup"
+      className={styles.group}
       type="single"
-      defaultValue={`${props.currentElement}`}
+      value={`${element}`}
       aria-label="Element"
-      onValueChange={props.sendValue}
+      onValueChange={handleElementChange}
     >
       <ToggleGroup.Item
-        className={`ToggleItem ${locale}`}
+        className={classNames({
+          [styles.item]: true,
+          [styles[`${locale}`]]: true,
+        })}
         value="0"
         aria-label="null"
       >
         {t('elements.null')}
       </ToggleGroup.Item>
       <ToggleGroup.Item
-        className={`ToggleItem wind ${locale}`}
+        className={classNames({
+          [styles.item]: true,
+          [styles.wind]: true,
+          [styles[`${locale}`]]: true,
+        })}
         value="1"
         aria-label="wind"
       >
         {t('elements.wind')}
       </ToggleGroup.Item>
       <ToggleGroup.Item
-        className={`ToggleItem fire ${locale}`}
+        className={classNames({
+          [styles.item]: true,
+          [styles.fire]: true,
+          [styles[`${locale}`]]: true,
+        })}
         value="2"
         aria-label="fire"
       >
         {t('elements.fire')}
       </ToggleGroup.Item>
       <ToggleGroup.Item
-        className={`ToggleItem water ${locale}`}
+        className={classNames({
+          [styles.item]: true,
+          [styles.water]: true,
+          [styles[`${locale}`]]: true,
+        })}
         value="3"
         aria-label="water"
       >
         {t('elements.water')}
       </ToggleGroup.Item>
       <ToggleGroup.Item
-        className={`ToggleItem earth ${locale}`}
+        className={classNames({
+          [styles.item]: true,
+          [styles.earth]: true,
+          [styles[`${locale}`]]: true,
+        })}
         value="4"
         aria-label="earth"
       >
         {t('elements.earth')}
       </ToggleGroup.Item>
       <ToggleGroup.Item
-        className={`ToggleItem dark ${locale}`}
+        className={classNames({
+          [styles.item]: true,
+          [styles.dark]: true,
+          [styles[`${locale}`]]: true,
+        })}
         value="5"
         aria-label="dark"
       >
         {t('elements.dark')}
       </ToggleGroup.Item>
       <ToggleGroup.Item
-        className={`ToggleItem light ${locale}`}
+        className={classNames({
+          [styles.item]: true,
+          [styles.light]: true,
+          [styles[`${locale}`]]: true,
+        })}
         value="6"
         aria-label="light"
       >