imdb clone Part14　11 CardComponent   カードコンポーネント新規作成　idのみ表示

# 概要
目次

https://qiita.com/RYA234/private/61143e3405c1f1c6f077

今回は映画のidのみを表示するコンポーネントを新規作成します。
下gifアニメは実装後の様子です。

![zzzzzzzzzzzzzzzzz.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/fc9343ce-99d0-a3e8-6d5d-bcd137a395f8.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"

# 実装のポイント
## ディスプレイのサイズについてレイアウトを変える
### 640px~1024px
カードは２個配置されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/3b09b903-2bda-720c-23da-03bc85343c30.png)

### 1024~1280px
カードは３個配置されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/98cf2397-de91-dc20-8a7d-ac99cf098862.png)


### 1280~1536px
カードは4個配置されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/de020a0c-3e0f-2296-c381-f608f359ba25.png)



### 1536px以上
カードは5個配置されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/54cff01f-ccdc-c5a4-0041-c3bcb736b22e.png)


## カード上にカーソルを合わせたときの処理
ディスプレイサイズ問わずに同じ処理が実行されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/9220040b-41f6-5cc5-0963-3248f4050cb8.png)


# コード部分
## Results
```diff_jsx:Results.jsx
+import Card from "./Card";

export default function Results({results}) {
  return (
-    <div>
+    <div className="sm:grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5  max-w-6xl mx-auto py-4">
        {results.map((result) => (
-                <div key={result.id}>{result.original_title}</div>
+                <Card key={result.id} result={result} />
            ))}
    </div>
  );
```

## Card
```diff_jsx:Card.jsx
import React from 'react'

export default function Card({result}) {
  return (
    <div className="cursor-pointer sm:p-3 sm:hover:shadow-slate-400 sm:shadow-md rounded-lg sm:border sm:border-slate-400 sm:m-2 transition-shadow duration-200 group">
        {result.id}
    </div>
  )
}
```



# 参考

## css

### sm lg xl 2xl

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/1e8e9433-ffd5-cd10-3b00-fde7cbc9ef18.png)

### grid

https://tailwindcss.com/docs/grid-template-columns

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/0739da66-1a0f-1bea-49ad-b36b88696442.png)


### grid-cols

https://tailwindcss.com/docs/grid-template-columns

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/397ca70b-f30d-b387-6e10-34a0100608c0.png)



### max-w-6xl

https://tailwindcss.com/docs/max-width

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/557a2af0-2b9c-2ff8-3fa3-b13ed8ea9111.png)


### mx-auto

https://tailwindcss.com/docs/container


### duration

https://tailwindcss.com/docs/transition-duration

![yyyyyyyyyyy.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/513e4883-600a-22d5-412d-2819cbaa64aa.gif)

### transition-shadow

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/62a89c3f-6172-1f35-9e47-8854e4be2bb5.png)

https://tailwindcss.com/docs/transition-property


## その他



Udemy

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

githubコミット分

https://github.com/RYA234/imcbclone/commit/65e054c71ef20582d50594f37a2ba89efe4a91e3