imdb clone Part1　ヘッダー作成　1/2 ReactIconを使ってアイコンを表示

# 概要

目次

https://qiita.com/RYA234/private/045f3d2c03684572d3f9


今回はヘッダーの一部を実装します。
ディスプレイのサイズによってUIを変えるように実装します。
以下gifアニメはディスプレイのサイズを変更したときの様子です。

![imcb1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/d8c4a667-3a88-6f52-2ed3-d91e91cdb939.gif)



# 開発環境

OS:Windows10
IDE:VSCode

"@next/font": "13.1.5",
"autoprefixer": "10.4.14",
"eslint": "8.39.0",
"eslint-config-next": "13.3.1",
"next": "13.3.1",
"postcss": "8.4.23",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-icons": "^4.8.0",
"tailwindcss": "3.3.2"

# 実装のポイント
１．ディスプレイサイズが640以下のときはReactIconが表示されます。下図処理の流れ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/1d561e14-cbbd-f614-87d9-9c8066c53ee1.png)




２．ディスプレイサイズが640-1080pxのときはアイコンの代わりに文字が表示されます。下図処理の流れ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/4550677e-45b2-7069-85ca-03248279df78.png)



# コード部分

## layout
```diff_json:package.json
{
  "name": "imcbclone",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@next/font": "13.1.5",
    "autoprefixer": "10.4.14",
    "eslint": "8.39.0",
    "eslint-config-next": "13.3.1",
    "next": "13.3.1",
    "postcss": "8.4.23",
    "react": "18.2.0",
    "react-dom": "18.2.0",
+    "react-icons": "^4.8.0",
    "tailwindcss": "3.3.2"
  }
}

```

## Header
```diff_jsx:Header.jsx
import MenuItem from "./MenuItem";
import {AiFillHome} from "react-icons/ai"
import {BsFillInfoCircleFill} from "react-icons/bs"

export default function Header(){
    return(
        <div>
            <div className="">
                <MenuItem title="HOME" address="/" Icon={AiFillHome} />
                <MenuItem title="ABOUT" address="/about" Icon={BsFillInfoCircleFill} />
            </div>

            <div className="">

            </div>
            Header
        </div>
    )
}
```

## MenuItem
```diff_jsx:MenuItem.jsx
import React from 'react'
import Link from "next/link";

export default function MenuItem({title,address,Icon}) {
  return (
    <div>
        <Link href={address} className="mx-6 lg:mx-0 hover:text-amber-600">
            <Icon className="text-2xl sm:hidden mx-4"/>
            <p className="hidden sm:inline my-2 text-sm">{title}</p>
        </Link>
    </div>
  )
}
```






# 参考

## css

### mx-6

https://tailwindcss.com/docs/margin

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/e3dd4078-05ab-ac98-1dbd-fefa5d678063.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/4b40731a-3580-dade-a6d8-07f14d385b6d.png)


### lg

https://tailwindcss.com/docs/responsive-design

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/7cb8fa52-06fc-a6e6-7b49-8513973c91a1.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/7c74f30d-e066-dd84-0b3d-7001a2aa0c8c.png)

### text-2xl

https://tailwindcss.com/docs/font-size

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/6a3dceb3-5338-866b-8687-9b04d10e3be1.png)

https://developer.mozilla.org/ja/docs/Web/CSS/line-height

### sm:inline

https://tailwindcss.com/docs/display

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/d7d271f5-7db9-4753-1210-12437ff8a944.png)

https://developer.mozilla.org/ja/docs/Web/CSS/display

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/8d15af34-2400-733f-4584-47d0be4d83cf.png)




## その他

react-icon

https://react-icons.github.io/react-icons/search?q=aifillhome

https://react-icons.github.io/react-icons/search?q=bsfillinfocirclefill


Udemy

https://www.udemy.com/course/react-js-tutorial/learn/lecture/36592886#overview

githubコミット分


https://github.com/RYA234/imcbclone/commit/412d84c9610383aab205d6cc397ea2166c70f029