LanguageMenu をCSS Moduleを使った形に置換え

src/components/Header/LanguageMenu.module.css

@@ -0,0 +1,71 @@
+:root {
+  --text-wrapper-background: rgba(54, 46, 43, 0.4);
+  --separator-border: rgba(54, 46, 43, 0.5);
+}
+
+.wrapper {
+  position: absolute;
+  right: 20px;
+  bottom: -70px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0;
+}
+
+@media (max-width: var(--media-query-default-size)) {
+  .wrapper {
+    right: 0;
+  }
+}
+
+.text-wrapper {
+  display: flex;
+  flex: none;
+  flex-direction: row;
+  flex-grow: 0;
+  gap: 10px;
+  align-items: flex-start;
+  width: 125px;
+  height: 39px;
+  padding: 10px 0;
+  background: var(--text-wrapper-background);
+}
+
+.en-text-wrapper {
+  order: 0;
+}
+
+.ja-text-wrapper {
+  order: 2;
+}
+
+.link-text {
+  display: block;
+  flex: none;
+  flex-grow: 0;
+  order: 0;
+  width: 125px;
+  height: 19px;
+  font-family: Roboto, sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 19px;
+  color: var(--background-color);
+  text-align: center;
+  cursor: pointer;
+}
+
+.link {
+  text-decoration: none;
+}
+
+.separator {
+  flex: none;
+  flex-grow: 0;
+  order: 1;
+  width: 125px;
+  height: 0;
+  border: 1px solid var(--separator-border);
+}

src/components/Header/LanguageMenu.module.css.d.ts

@@ -0,0 +1,10 @@
+declare const styles: {
+  readonly wrapper: string;
+  readonly 'text-wrapper': string;
+  readonly 'en-text-wrapper': string;
+  readonly 'ja-text-wrapper': string;
+  readonly 'link-text': string;
+  readonly link: string;
+  readonly separator: string;
+};
+export = styles;

src/components/Header/LanguageMenu.tsx

@@ -1,126 +1,43 @@
 import type { FC } from 'react';
 import Link from 'next/link';
 import { FaAngleRight } from 'react-icons/fa';
-import styled, { css } from 'styled-components';
-import { mixins } from '../../styles';
 import type { Language } from '../../types';
-
-const textWrapperStyle = css`
-  display: flex;
-  flex: none;
-  flex-direction: row;
-  flex-grow: 0;
-  gap: 10px;
-  align-items: flex-start;
-  width: 125px;
-  height: 39px;
-  padding: 10px 0;
-  background: rgba(54, 46, 43, 0.4);
-`;
-
-const _Wrapper = styled.nav`
-  @media (max-width: ${mixins.mediaQuerySize.default}) {
-    right: 0;
-  }
-  position: absolute;
-  right: 20px;
-  bottom: -70px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 0;
-`;
-
-const _EnTextWrapper = styled.span`
-  ${textWrapperStyle};
-  order: 0;
-`;
-
-const _EnText = styled.span`
-  display: block;
-  flex: none;
-  flex-grow: 0;
-  order: 0;
-  width: 125px;
-  height: 19px;
-  font-family: Roboto, sans-serif;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 19px;
-  color: ${mixins.colors.background};
-  text-align: center;
-  cursor: pointer;
-`;
-
-const _Separator = styled.span`
-  flex: none;
-  flex-grow: 0;
-  order: 1;
-  width: 125px;
-  height: 0;
-  border: 1px solid rgba(54, 46, 43, 0.5);
-`;
-
-const _JaTextWrapper = styled.span`
-  ${textWrapperStyle};
-  order: 2;
-`;
-
-const _JaText = styled.span`
-  display: block;
-  flex: none;
-  flex-grow: 0;
-  order: 0;
-  width: 125px;
-  height: 19px;
-  font-family: Roboto, sans-serif;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 19px;
-  color: ${mixins.colors.background};
-  text-align: center;
-  text-decoration: none;
-  cursor: pointer;
-`;
+import styles from './LanguageMenu.module.css';
 
 export type Props = {
   language: Language;
   currentUrlPath: string;
 };
 
 export const LanguageMenu: FC<Props> = ({ language, currentUrlPath }) => (
-  <_Wrapper>
-    <_EnTextWrapper>
-      <Link
-        href={currentUrlPath}
-        locale="en"
-        style={{ textDecoration: 'none' }}
-      >
-        <_EnText data-gtm-click="language-menu-en-link">
+  <nav className={styles.wrapper}>
+    <span className={`${styles['text-wrapper']} ${styles['en-text-wrapper']}`}>
+      <Link href={currentUrlPath} locale="en" className={styles.link}>
+        <span
+          className={styles['link-text']}
+          data-gtm-click="language-menu-en-link"
+        >
           {language === 'en' ? <FaAngleRight /> : ''}
           English
-        </_EnText>
+        </span>
       </Link>
-      <_EnText>
-        {language === 'en' ? <FaAngleRight /> : ''}
-        English
-      </_EnText>
-    </_EnTextWrapper>
-    <_Separator />
-    <_JaTextWrapper>
+    </span>
+    <span className={styles.separator} />
+    <span className={`${styles['text-wrapper']} ${styles['ja-text-wrapper']}`}>
       <Link
         href={currentUrlPath}
         locale="ja"
         prefetch={false}
-        style={{ textDecoration: 'none' }}
+        className={styles.link}
       >
-        <_JaText data-gtm-click="language-menu-ja-link">
+        <span
+          className={styles['link-text']}
+          data-gtm-click="language-menu-ja-link"
+        >
           {language === 'ja' ? <FaAngleRight /> : ''}
           日本語
-        </_JaText>
+        </span>
       </Link>
-    </_JaTextWrapper>
-  </_Wrapper>
+    </span>
+  </nav>
 );