目玉プロジェクトに星マークをつける (#16)

* nullは使わない

* 目玉プロジェクトに星マークをつける

src/components/Common/MaterialIcon.tsx

@@ -7,6 +7,7 @@ export interface MaterialIconProps {
   className?: string
   refObj?: RefObject<HTMLSpanElement>
   testID?: string
+  size?: number
 }
 
 export const MaterialIcon: React.FC<MaterialIconProps> = ({
@@ -15,10 +16,11 @@ export const MaterialIcon: React.FC<MaterialIconProps> = ({
   className = '',
   refObj,
   testID,
+  size = 24,
 }) => {
   return (
     <span
-      style={{ color }}
+      style={{ color, fontSize: `${size}px` }}
       className={toClass('material-icons', className)}
       ref={refObj}
       data-testid={testID}

src/components/Portfolio/FavoriteIcon.tsx

@@ -0,0 +1,24 @@
+import { CSSProperties, memo } from 'react'
+import { MaterialIcon } from '../Common/MaterialIcon'
+
+export type FavoriteIconPros = {
+  size: number
+  color?: string
+}
+const FavoriteIcon = ({
+  size,
+  color = 'orange',
+}: FavoriteIconPros): JSX.Element => {
+  const style: CSSProperties = {
+    width: `${size}px`,
+    height: `${size}px`,
+    padding: '2px',
+  }
+  return (
+    <div className="bg-white rounded-circle border" style={style}>
+      <MaterialIcon color={color} name="star" size={size - 5} />
+    </div>
+  )
+}
+
+export default memo(FavoriteIcon)

src/components/Portfolio/ProjectItem.tsx

@@ -8,11 +8,17 @@ import githubIcon from '../../resources/images/common/github.png'
 import { useMemo } from 'react'
 import { Project } from '@/models/project'
 import TechnologyTag from './TechnologyTag'
+import FavoriteIcon from './FavoriteIcon'
 
 const ProjectItemDiv = styled.div`
   min-width: 200px;
   max-width: 100%;
 `
+const FavoriteIconDiv = styled.div`
+  position: absolute;
+  right: -10px;
+  top: -10px;
+`
 
 export type ProjectItemProps = {
   project: Project
@@ -35,9 +41,15 @@ export const ProjectItem: React.FC<ProjectItemProps> = ({
   return (
     <ProjectItemDiv
       className={
-        'p-3 rounded border d-flex flex-column align-items-center ' + className
+        'p-3 rounded border d-flex flex-column align-items-center position-relative ' +
+        className
       }
     >
+      {project.getIsFavorite() && (
+        <FavoriteIconDiv>
+          <FavoriteIcon size={42} />
+        </FavoriteIconDiv>
+      )}
       {qiita ? (
         <Link href={qiita} target="_blank">
           {renderTitle()}

src/data/projects.yml

@@ -7,6 +7,7 @@
     - typescript
     - react
     - postgres
+  isFavorite: true
 - title: スタンプ作成補助
   id: kokosuko-stamp
   description: Youtubeのコメント欄でタイムスタンプを作成するのを補助する拡張機能です
@@ -15,14 +16,14 @@
   detailSrc: ''
   technologies:
     - react
+  isFavorite: false
 - title: 絵文字召喚bot
   id: emoji-creater
   description: slack上で使える絵文字を自動で生成するslackアプリです
   github: 'https://github.com/piny940/emoji-creater'
   detailSrc: ''
   technologies:
     - rails
-  link: null
 - title: チャットアプリ
   id: clubroom
   description: discordのようにグループごとにメンバーやトークルームを作ることができます。
@@ -33,7 +34,7 @@
     - typescript
     - react
     - postgres
-  link: null
+  isFavorite: true
 - title: ポートフォリオ
   id: portfolio
   description: Piny940のポートフォリオです
@@ -43,22 +44,23 @@
   technologies:
     - react
     - docker
+  isFavorite: false
 - title: スタンプラリー
   id: mashiro-calender
   description: Vtuber凪乃ましろさん休暇中のスタンプラリー
   github: 'https://github.com/piny940/mashiro-calender'
   detailSrc: ''
   technologies:
     - python
-  link: null
+  isFavorite: false
 - title: オセロアプリ
   id: python-reverse
   description: 大学の授業でオセロアプリをチーム開発しました。
   github: 'https://github.com/piny940/python-reverse'
   detailSrc: ''
   technologies:
     - python
-  link: null
+  isFavorite: false
 - title: メカ少女シューティング
   id: mekashojo
   description: 大学のサークルでシューティングゲームをチームで開発しました。
@@ -67,3 +69,4 @@
   technologies:
     - unity
   qiita: 'https://qiita.com/piny940/items/d5519acb423ad22c51a8'
+  isFavorite: true

src/models/project.ts

@@ -8,6 +8,7 @@ export interface ProjectData {
   github?: string
   qiita?: string
   technologies: string[]
+  isFavorite: boolean
 }
 export type ProjectsData = ProjectData[]
 
@@ -38,6 +39,8 @@ export class Project {
       ? `${GITHUB_URL}/${this.#data.id}`
       : this.#data.github
   }
+
+  getIsFavorite = () => this.#data.isFavorite
 }
 
 export class Projects {