imdb clone Part16　11 CardComponent   3/3 テキスト系をを実装　スクロールバーが出ないようにする。

# 概要
目次

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

今回はカードコンポーネントにテキスト情報　投票数を追加してコンポーネントを完成させます。あとスクロールバーを非表示にします。
以下画像は実装後の様子です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/1e3af8ba-6d07-81d4-3a5f-4794f54361ea.png)


# 開発環境

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"

# 実装のポイント
1.コンポーネントを完成させる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/eea2a6c8-beb5-b580-25a6-57ed70f16934.png)


2.スクロールを消す
通常の場合と比較します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/931b96f6-a3d1-98b3-1437-33225fc5992a.png)


# コード部分
## package.json
```diff_json:package.jsx
{
  "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",
    "next-themes": "^0.2.1",
    "postcss": "8.4.23",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-icons": "^4.8.0",
    "tailwindcss": "3.3.2"
  },
  "devDependencies": {
+    "@tailwindcss/line-clamp": "^0.4.4"
  }
}

```

## global.css
```diff_css:global.css
@tailwind base;
@tailwind components;
@tailwind utilities;

+ html::-webkit-scrollbar{display: none; }

```


## tailwind.config.js
```diff_jsx:tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [

    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
+  plugins: [require("@tailwindcss/line-clamp")],
  darkMode:"class",
}
```
## Card
```diff_jsx:Card.jsx
import React from 'react'
import Link from 'next/link'
import Image from 'next/image'
import { FiThumbsUp } from "react-icons/fi";

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">
      <Link href={`/movie/${result.id}`}>
        <Image 
         src={`https://image.tmdb.org/t/p/original/${
            result.backdrop_path ||
            result.poster_path
         }`}
         width={500}
         height={300}
         className="sm:rounded-t-lg
         group-hover:opacity-80
         transition-opacity
         duration-200"

         style={{
              maxWidth:"100%",
              height:"auto",
         }}
         placeholder="blur"
         blurDataURL="/spinner.svg"
         alt="image is not available"
        ></Image>
+        <div className="p-2">
+            <p className="line-clamp-2 text-md">{result.overview}</p>
+            <h2 className="truncate text-lg font-bold">{result.title || result.name}</h2>
+            <p className="flex items-center ">
+                {result.release_date || result.first_air_date}
+                <FiThumbsUp className="h-5 mr-1 ml-3"/> {result.vote_count}
+            </p>
+        </div>
      </Link>
    </div>
  )
}
```



# 参考

## css

### line-clamp

導入方法

https://github.com/tailwindlabs/tailwindcss-line-clamp


https://tailwindcss.com/docs/line-clamp

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/3fe9808f-05c1-b91e-bff3-9e5b94bedc16.png)



### html::-webkit-scrollbar

https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/e8a6fc9f-cccc-bd29-2a94-eca14b9bf8c3.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/595d07ea-0bc8-e3ff-142c-49d3e126b46b.png)




## その他



Udemy

https://www.udemy.com/course/react-js-tutorial/learn/lecture/36119296#content

githubコミット分

https://github.com/RYA234/imcbclone/commit/b028817d38453758713615aca46bf90ab87fbab9