google clone Part4 20 Add body   2/5 検索バー　ボタンのUIを実装

# 概要
目次

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

今回は検索機能のUI部分(インプット１つ　ボタン１つ)を実装します。
以下画像は実装後の様子です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/a62fe04b-10be-2778-4552-d60495435333.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"

# 実装のポイント
新規コンポーネントHomeSearchを作成します。
## 検索バー
flex-growを使ってアイコンと検索バーを横並びに配置します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/19e0a9c6-0cf3-4550-992e-9faee897646f.png)





### 検索ボタン
global cssにbtnクラスを作成します。btnはボタンの検索ボタンに適用します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/c0616a1a-dda0-153e-e238-c3ca3b1f48a1.png)


# コード部分
## global.css
```diff_css:global.css
@tailwind base;
@tailwind components;
@tailwind utilities;

+@layer components {
+    .btn {
+      @apply bg-[#f8f9fa] rounded-md text-sm text-gray-800 hover:ring-1 hover:ring-gray-200 focus:outline-none active:ring-gray-300 hover:shadow-md w-36 h-10 transition-shadow;
+    }
+}
```

## app/page
```diff_jsx:page.jsx
import HomeHeader from "@/components/HomeHeader"
import HomeSearch from "@/components/HomeSearch";
import Image from "next/image";

export default function Home() {

  return (
   <>
    <HomeHeader />
    <div className="flex flex-col items-center mt-24">
      <Image
            width="300"
            height="100"
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/640px-Google_2015_logo.svg.png"
          />
+      <HomeSearch />
    </div>
   </>
  )
}
```

## HomeSearch
```diff_jsx:HomeSearch.jsx
import {AiOutlineSearch} from "react-icons/ai";
import {BsFillMicFill} from "react-icons/bs";

export default function HomeSearch() {  
    return (
    <>
        <form className="flex w-full mt-5 mx-auto max-w-[90%] border border-gray-200 px-5 py-3 rounded-full hover:shadow-md focus-within:shadow-md transition-shadow sm:max-w-xl lg:max-w-2xl">
            <AiOutlineSearch className="text-xl text-gray-500 mr-3" />
            <input type="text" className="flex-grow focus:outline-none"/>
            <BsFillMicFill className="text-lg"/>
        </form>

        <div className="">
            <button className="btn">
                Google Search
            </button>
        </div>
    </>
  )
}


```




# 参考

## css

### Flex Grow

https://tailwindcss.com/docs/flex-grow

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/f56317c8-530e-4b00-5cfd-73e05fbfcddd.png)


### @ layerと@ apply

https://tailwindcss.com/docs/functions-and-directives

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/093a4a26-29ea-f35a-eb7f-9aef643f4a37.png)


### focus-within(mdn)

https://developer.mozilla.org/ja/docs/Web/CSS/:focus-within

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/f0476e5d-ffa2-5743-bb49-e2947b36c62b.png)


### shadow-md

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/eb2ce26b-ecad-6a63-7fca-9b063593de08.png)

### ring-color

https://tailwindcss.com/docs/ring-color

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/7100af0a-d8c5-7aa0-6ad8-ad063a583b62.png)


## その他




Udemy

githubコミット分

https://github.com/RYA234/googlecone12/commit/6e7236bbda491077d11128dc3677b4bb42f717fe