fix dependency

koh110 · Oct 23, 2024 · ed547c6 · ed547c6
1 parent 1f8187f
commit ed547c6
Show file tree

Hide file tree

Showing 12 changed files with 159 additions and 1,184 deletions.
diff --git a/app/(commonLayout)/contact/ClientComponent.tsx b/app/(commonLayout)/contact/ClientComponent.tsx
@@ -1,16 +1,14 @@
 'use client'
 import styles from './styles.module.css'
-import TwitterIcon from '@mui/icons-material/Twitter'
-import Stack from '@mui/material/Stack'
-import MailOutlineIcon from '@mui/icons-material/MailOutline'
+import Icon from '../../../components/Icon'
 
 export default function ClientComponent() {
   return (
-    <Stack className={styles.content}>
+    <div className={styles.content}>
       <p className={styles.head}>依頼・ご相談等は下記メール、またはtwitterでご連絡ください。</p>
-      <Stack direction="row" spacing={1}>
+      <div className={styles.account}>
         <a className={styles.link} href="mailto:kohta110@gmail.com">
-          <MailOutlineIcon fontSize="small" />
+          <Icon iconName="ri-mail-line" />
           mail
         </a>
         <a
@@ -19,10 +17,10 @@ export default function ClientComponent() {
           target="_blank"
           rel="noopener noreferrer"
         >
-          <TwitterIcon fontSize="small" />
+          <Icon iconName="ri-twitter-x-line" />
           @koh110
         </a>
-      </Stack>
-    </Stack>
+      </div>
+    </div>
   )
 }
diff --git a/app/(commonLayout)/contact/styles.module.css b/app/(commonLayout)/contact/styles.module.css
@@ -12,14 +12,24 @@
   background: var(--color-body-card);
   color: var(--color-on-card);
 }
+
 .head {
   font-size: 0.875rem;
 }
+
+.account {
+  display: flex;
+  gap: 1em 1em;
+}
+
 .link {
   border: 1px solid var(--color-link);
   padding: 5px 15px;
   border-radius: 4px;
+  display: flex;
+  align-items: center;
 }
-.link :global(svg) {
-  margin-right: 8px;
+
+.link i {
+  margin-right: 0.6em;
 }
diff --git a/app/(commonLayout)/layout.tsx b/app/(commonLayout)/layout.tsx
@@ -1,5 +1,6 @@
 import 'sanitize.css'
-import { type PropsWithChildren, type ReactNode } from 'react'
+import 'remixicon/fonts/remixicon.css'
+import { type PropsWithChildren } from 'react'
 import styles from './styles.module.css'
 import Providers from '../../context/Providers'
 import Header from '../../components/Header'

diff --git a/components/CookieConsent/index.module.css b/components/CookieConsent/index.module.css
@@ -51,3 +51,14 @@
   border-radius: 4px;
   cursor: pointer;
 }
+
+.icon-button {
+  display: inline-flex;
+  background-color: transparent;
+  font-size: 1.5rem;
+  padding: 8px;
+  outline: 0;
+  border: 0;
+  margin: 0;
+  cursor: pointer;
+}
diff --git a/components/CookieConsent/index.tsx b/components/CookieConsent/index.tsx
@@ -2,8 +2,7 @@
 
 import { useState, type FormEventHandler } from 'react'
 import styles from './index.module.css'
-import IconButton from '@mui/material/IconButton'
-import ClearIcon from '@mui/icons-material/Clear'
+import Icon from '../Icon'
 
 import {
   getConsentValue,
@@ -40,9 +39,9 @@ export default function CookieConsent() {
   return (
     <div className={styles.wrap} data-show-flag={showFlag}>
       <div className={styles.close}>
-        <IconButton onClick={onClose}>
-          <ClearIcon fontSize="small" />
-        </IconButton>
+        <button className={styles['icon-button']} onClick={onClose}>
+          <Icon iconName="ri-close-line" style={{ color: 'var(--color-body)' }} />
+        </button>
       </div>
       <section className={styles.section}>
         <p>当サイトでは分析のためにCookieを使用しています。</p>

diff --git a/components/Icon/index.module.css b/components/Icon/index.module.css
@@ -0,0 +1,7 @@
+.icon {
+  font-size: 1.25rem;
+}
+
+.medium {
+  font-size: 1.5rem;
+}
diff --git a/components/Icon/index.tsx b/components/Icon/index.tsx
@@ -0,0 +1,24 @@
+import type { CSSProperties } from 'react'
+import styles from './index.module.css'
+
+// https://remixicon.com/
+
+type Props = {
+  iconName: string
+  size?: 'small' | 'medium'
+  style?: CSSProperties
+}
+
+export default function Icon({ iconName, style, size }: Props) {
+  const classNames = [styles.icon, iconName]
+  if (size && size !== 'small') {
+    classNames.unshift(styles[size])
+  }
+
+  return (
+    <i
+      className={classNames.join(' ')}
+      style={style}
+    ></i>
+  )
+}
diff --git a/components/pages/About/ProfileIcon/index.tsx b/components/pages/About/ProfileIcon/index.tsx
@@ -1,11 +1,7 @@
 'use client'
 import { useEffect, useState } from 'react'
-import RssFeedIcon from '@mui/icons-material/RssFeed'
-import TwitterIcon from '@mui/icons-material/Twitter'
-import GitHubIcon from '@mui/icons-material/GitHub'
-import FacebookIcon from '@mui/icons-material/Facebook'
-import LinkedInIcon from '@mui/icons-material/LinkedIn'
 import styles from './index.module.css'
+import Icon from '../../../Icon'
 
 export default function ProfileIcon() {
   const [animationClass, setAnimationClass] = useState<string>('')
@@ -27,39 +23,39 @@ export default function ProfileIcon() {
         target="_blank"
         rel="noopener noreferrer"
       >
-        <RssFeedIcon fontSize="medium" />
+        <Icon iconName="ri-rss-line" size="medium" />
       </a>
       <a
         className={`${styles.account_icon} ${animationClass}`}
         href="https://twitter.com/koh110"
         target="_blank"
         rel="noopener noreferrer"
       >
-        <TwitterIcon fontSize="medium" />
+        <Icon iconName="ri-twitter-x-line" size="medium" />
       </a>
       <a
         className={`${styles.account_icon} ${animationClass}`}
         href="https://github.com/koh110"
         target="_blank"
         rel="noopener noreferrer"
       >
-        <GitHubIcon fontSize="medium" />
+        <Icon iconName="ri-github-fill" size="medium" />
       </a>
       <a
         className={`${styles.account_icon} ${animationClass}`}
         href="https://www.facebook.com/kohta110"
         target="_blank"
         rel="noopener noreferrer"
       >
-        <FacebookIcon fontSize="medium" />
+        <Icon iconName="ri-facebook-circle-fill" size="medium" />
       </a>
       <a
         className={`${styles.account_icon} ${animationClass}`}
         href="https://jp.linkedin.com/in/ito-kohta-24078410b"
         target="_blank"
         rel="noopener noreferrer"
       >
-        <LinkedInIcon fontSize="medium" />
+        <Icon iconName="ri-linkedin-box-fill" size="medium" />
       </a>
     </div>
   )

diff --git a/components/pages/Log/LogElement.module.css b/components/pages/Log/LogElement.module.css
@@ -9,17 +9,31 @@
   font-weight: 400;
   font-size: 0.875rem;
 }
+
 .img_wrap {
   width: 100%;
 }
+
 .img_wrap img {
   width: 100%;
 }
+
 .content {
   flex: 1;
   padding: 0 1em ;
   color: var(--color-on-card);
 }
+
 .footer {
   padding: 0 1em 1em;
 }
+
+.footer a {
+  font-size: 0.875rem;
+  display: flex;
+  align-items: center;
+}
+
+.footer a span {
+  margin-left: 0.3em;
+}
diff --git a/components/pages/Log/LogElement.tsx b/components/pages/Log/LogElement.tsx
@@ -1,5 +1,5 @@
-import AttachFileIcon from '@mui/icons-material/AttachFile'
 import Card from '../../Card/index'
+import Icon from '../../Icon/index'
 import styles from './LogElement.module.css'
 
 export type Props = {
@@ -48,10 +48,9 @@ function Doc(props: { doc: string }) {
       href={props.doc}
       target="_blank"
       rel="noopener noreferrer"
-      style={{ fontSize: '0.875rem', display: 'flex' }}
     >
-      <AttachFileIcon fontSize="small" />
-      資料
+      <Icon iconName="ri-attachment-2" />
+      <span>資料</span>
     </a>
   )
 }