google clone Part10　23 Update the search header　検索バーの実装

# 概要

目次

https://qiita.com/RYA234/items/3aa9934b5dc3ae8fa9fc

今回はヘッダーの検索バーを実装します。
下gifアニメは実装後の様子です。

![zzzzzzzzxxz.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/d013a313-b4db-2c48-11f2-32b258552d12.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"

# 実装のポイント

## レイアウト

inputのw-fullが重要で、これがないとアイコン類は右端に配置できません。

### ディスプレイサイズ640px以下
検索アイコンとマイクアイコンを非表示にします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/d8654dc8-3518-06f0-df70-e703a9e58564.png)


### ディスプレイサイズ640px以上
検索アイコンとマイクアイコンは表示されてます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/622e810e-832f-db95-807b-236ad62765e6.png)



## 検索機能　
過去の投稿参照


# コード部分
## SearchBox
```diff_jsx:SearchBox.jsx
"use client";
import { useSearchParams, useRouter} from "next/navigation";

import { RxCross2 } from "react-icons/rx";
import { BsFillMicFill } from "react-icons/bs";
import { AiOutlineSearch } from "react-icons/ai";
import { useState } from "react";


export default function SearchBox() {
  const searchParams = useSearchParams();
  const router = useRouter();
  const searchTerm = searchParams.get("searchTerm");
  const [term,setTerm] = useState(searchTerm || "");

  function handleSubmit(e){
    e.preventDefault();
    if(!term.trim()) return;
    router.push(`/search/web?searchTerm=${term}`);
  }

  return (
   <form className="flex border border-gray-200-rounded-full shadow-lg px-6 py-3 ml-10 mr-5 flex-grow max-w-3xl items-center" onSubmit={handleSubmit}>
      <input text="text" className="w-full focus:outline-none" value={term} onChange={(e) => setTerm(e.target.value)}/>

      <RxCross2 className="text-2xl text-gray-500 cursor-pointer sm:mr-2" onClick={()=>setTerm("")} />

      <BsFillMicFill className="hidden sm:inline-flex text-blue-500 pl-4 border-1-2 border-gray-300 mr-3" />
      <AiOutlineSearch className="text-2xl hidden sm:inline-flex text-blue-500 cursor-pointer" onClick={handleSubmit}/>
   </form>
  )
}

```




# 参考

## css

### shadow-lg

https://tailwindcss.com/docs/box-shadow

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/beb7cf85-06b0-9203-fd0f-d245f44edee9.png)

### outline-none

https://tailwindcss.com/docs/outline-style

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/86f55e3d-c1e9-07ca-7e08-fe1340f8061a.png)


### inline-flex

 https://tailwindcss.com/docs/display

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/58bc0594-feb7-aaf7-6b54-8f6d2e7b3cbe.png)


### w-full

https://tailwindcss.com/docs/width

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/18123994-4358-5b7d-b121-af66baf0bcac.png)


## その他

BsFillMicFill

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

AiOutlineSearch

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

RxCross2

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

Udemy

githubコミット分

https://github.com/RYA234/googlecone12/commit/1e558991a2262516747e99159edc061f755119ad