clsxを使う

saitamau-maximum · Mar 25, 2024 · c815b9b · c815b9b
1 parent 3c66e43
commit c815b9b
Showing 1 changed file with 9 additions and 8 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import Link from 'next/link';
 import { LinkButton } from '../components/LinkButton';
 import style from './page.module.scss';
@@ -18,12 +19,12 @@ export default function Home() {
           <h1 className={style.contentTitle}>活動内容</h1>
           <p className={style.aboutText}>
             Maximumでは
-            <span className={style.span}>
-              <span className={style.bold}>競技プログラミング</span>
+            <span className={clsx(style.span, style.bold)}>
+              競技プログラミング
             </span>
             (週2回)と
-            <span className={style.span}>
-              <span className={style.bold}>Web研究会</span>
+            <span className={clsx(style.span, style.bold)}>
+              Web研究会
             </span>
             (週1回)の2つの活動を行っています。
           </p>
@@ -36,12 +37,12 @@ export default function Home() {
               <p>Competitive programming</p>
             </div>
             <p className={style.activityCPcontent}>
-              <span className={style.span}>
-                <span className={style.bold}>AtCoder</span>
+              <span className={clsx(style.span, style.bold)}>
+                AtCoder
               </span>
               &nbsp;や&nbsp;
-              <span className={style.span}>
-                <span className={style.bold}>ICPC</span>
+              <span className={clsx(style.span, style.bold)}>
+                ICPC
               </span>
               に向けて
               <br />