ロゴを追加

piny940 · Jul 1, 2023 · 2a6caae · 2a6caae
1 parent db95615
commit 2a6caae
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 5 deletions.
diff --git a/public/images/skills/rails.svg b/public/images/skills/rails.svg
diff --git a/public/images/skills/react.svg b/public/images/skills/react.svg
diff --git a/src/components/Common/PieItem.tsx b/src/components/Common/PieItem.tsx
@@ -1,6 +1,7 @@
+import { ReactNode } from 'react'
 import styled from 'styled-components'
 
-const CircleSpan = styled.span`
+const CircleDiv = styled.div`
   width: 160px;
   height: 160px;
   background-color: white;
@@ -9,6 +10,7 @@ const CircleSpan = styled.span`
   top: 20px;
   left: 20px;
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
   font-size: 30px;
@@ -33,13 +35,13 @@ const PieDiv = styled.div<{
 
 export type PieItemProps = {
   percent: number
-  label: string
+  children: ReactNode
   className?: string
 }
 
 export const PieItem: React.FC<PieItemProps> = ({
   percent,
-  label,
+  children,
   className,
 }) => {
   const start = [0, 85, 255]
@@ -48,7 +50,7 @@ export const PieItem: React.FC<PieItemProps> = ({
 
   return (
     <PieDiv start={start} end={color} percent={percent} className={className}>
-      <CircleSpan>{label}</CircleSpan>
+      <CircleDiv>{children}</CircleDiv>
     </PieDiv>
   )
 }
diff --git a/src/components/Portfolio/SkillItem.tsx b/src/components/Portfolio/SkillItem.tsx
@@ -1,5 +1,6 @@
 import { SkillType } from '@/resources/types'
 import { PieItem } from '../Common/PieItem'
+import Image from 'next/image'
 
 export type SkillItemProps = {
   skill: SkillType
@@ -9,7 +10,21 @@ export type SkillItemProps = {
 export const SkillItem: React.FC<SkillItemProps> = ({ skill, className }) => {
   return (
     <div className={className}>
-      <PieItem className="mx-auto" label={skill.name} percent={skill.percent} />
+      <PieItem className="mx-auto" percent={skill.percent}>
+        <div className="d-flex flex-column mb-3">
+          {skill.logoSrc && (
+            <div className="icon text-center">
+              <Image
+                alt={`${skill.name}-logo`}
+                src={skill.logoSrc}
+                width={70}
+                height={70}
+              />
+            </div>
+          )}
+          <span className="text-center">{skill.name}</span>
+        </div>
+      </PieItem>
     </div>
   )
 }
diff --git a/src/data/skills.ts b/src/data/skills.ts
@@ -4,10 +4,12 @@ export const skillsData: SkillType[] = [
   {
     name: 'Rails',
     percent: 90,
+    logoSrc: '/images/skills/rails.svg',
   },
   {
     name: 'React',
     percent: 90,
+    logoSrc: '/images/skills/react.svg',
   },
   {
     name: 'Typescript',

diff --git a/src/resources/types.ts b/src/resources/types.ts
@@ -3,4 +3,5 @@ export type Theme = 'dark' | 'light'
 export type SkillType = {
   name: string
   percent: number
+  logoSrc?: string
 }