使用技術を見やすくする

piny940 · Sep 28, 2023 · 7a9e9b2 · 7a9e9b2
1 parent 2851663
commit 7a9e9b2
Showing 1 changed file with 10 additions and 9 deletions.
diff --git a/src/components/Portfolio/ProjectItem.tsx b/src/components/Portfolio/ProjectItem.tsx
@@ -8,7 +8,6 @@ import githubIcon from '../../resources/images/common/github.png'
 import qiitaIcon from '../../resources/images/common/qiita.png'
 import { useMemo } from 'react'
 import { Project } from '@/models/project'
-import TechnologyTag from './TechnologyTag'
 import FavoriteIcon from './FavoriteIcon'
 
 const ProjectItemDiv = styled.div`
@@ -86,14 +85,16 @@ export const ProjectItem: React.FC<ProjectItemProps> = ({
           </li>
         )}
       </ul>
-      <ul className="list-unstyled mt-1 d-flex justify-content-center flex-wrap">
-        {project.getTechnologies().map((tech) => (
-          <li key={tech.getId()}>
-            <TechnologyTag technology={tech} />
-          </li>
-        ))}
-      </ul>
-      <p className="my-1">{project.getDescription()}</p>
+      <div className="d-flex flex-column align-items-center mt-1">
+        <h4 className="small text-muted fw-normal p-0 m-0">使用技術</h4>
+        <p className="small text-muted text-center">
+          {project
+            .getTechnologies()
+            .map((tech) => tech.getName())
+            .join(', ')}
+        </p>
+      </div>
+      <p className="">{project.getDescription()}</p>
     </ProjectItemDiv>
   )
 }