google clone Part11　27 complete the search header options  Allタグと画像タグを追加　切り替えを行えるようにする

# 概要

目次

https://qiita.com/RYA234/items/7cf917e4e5cdea668e2e


今回はヘッダー下に検索オプションのタブ（Allと画像）を追加します。
以下実装後の様子です。

![cczdasadsa.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/375c9f08-c836-f5db-c251-dadd2d21597f.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"

# 実装のポイント
## タブを押してURLを変更するまでの処理

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/0ab2ca1d-9960-b9a4-b10e-e87a6de4fa25.png)


## タブがハイライトされるときの処理
border b-4 border-transparent で透明色の下側境界線を作っておくのが大事です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/edc9a33c-97db-0da8-6960-15b1aa9699ab.png)




# コード部分
## SearchHeaderOptions
```diff_jsx:SearchHeaderOptions.jsx
"use client"

import {AiOutlineSearch,AiOutlineCamera} from "react-icons/ai";
import {usePathname,useRouter,useSearchParams} from "next/navigation";

export default function SearchHeaderOptions() {
  const pathname = usePathname();
  const router = useRouter();
  const searchParams = useSearchParams();
  const searchTerm= searchParams.get("searchTerm");

  function selectTab(tab){
    router.push(`/search/${tab === "Images" ? "image" :"web"}?searchTerm=${searchTerm}`);
  }
  return (
    <div className="flex space-x-2 select-none border-b w-full fustify-center lg:justify-start lg:pl-52 text-gray-700 text-sm">
      <div onClick={()=>selectTab("All")} className={`flex items-center space-x-1 border-b-4 border-transparent active:text-blue-500 cursor-pointer pb-3 px-2 ${pathname === "/search/web" && "!text-blue-600 !border-blue-600"}`}>
        <AiOutlineSearch className="text-md" />
        <p>All</p>
      </div>
      <div onClick={()=>selectTab("Images")} className={`flex items-center space-x-1 border-b-4 border-transparent active:text-blue-500 cursor-pointer pb-3 px-2 ${pathname === "/search/image" && "!text-blue-600 !border-blue-600"}`}>
        <AiOutlineCamera className="text-md" />
        <p>Images</p>
      </div>
    </div>
  )
}
```


## SearchHeader
```diff_jsx:SearchHeader.jsx
import Image from "next/image";
import Link from "next/link";
import SearchBox from "./SearchBox";
import { RiSettings3Line }  from "react-icons/ri";
import { TbGridDots } from "react-icons/tb";
import SearchHeaderOptions from "./SearchHeaderOptions";

export default function SearchHeader() {
  return (
    <header className="sticky top-0 bg-white">
        <div className="flex w-full p-6 items-center justify-between">
            <Link href={"/"}>
                <Image width="120" height="40" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/640px-Google_2015_logo.svg.png"/>
            </Link>
            <div className="flex-1">
                <SearchBox />
            </div>

            <div className="hidden md:inline-flex space-x-2">
                <RiSettings3Line className="header-icon" />
                <TbGridDots className="header-icon" />
            </div>

            <button className="bg-blue-500 text-white px-6 py-2 font-medium rounded-md hover:brightness-105 hover:shadow-md transition-all ml-2">
                Sign in
            </button>
        </div>
+        <SearchHeaderOptions />
    </header>
  )
}
```

## SearchHeaderOptions
```diff_jsx:SearchHeaderOptions.jsx
"use client"

import {AiOutlineSearch,AiOutlineCamera} from "react-icons/ai";
import {usePathname,useRouter,useSearchParams} from "next/navigation";

export default function SearchHeaderOptions() {
  const pathname = usePathname();
  const router = useRouter();
  const searchParams = useSearchParams();
  const searchTerm= searchParams.get("searchTerm");

  function selectTab(tab){
    router.push(`/search/${tab === "Images" ? "image" :"web"}?searchTerm=${searchTerm}`);
  }
  return (
    <div className="flex space-x-2 select-none border-b w-full fustify-center lg:justify-start lg:pl-52 text-gray-700 text-sm">
      <div onClick={()=>selectTab("All")} className={`flex items-center space-x-1 border-b-4 border-transparent active:text-blue-500 cursor-pointer pb-3 px-2 ${pathname === "/search/web" && "!text-blue-600 !border-blue-600"}`}>
        <AiOutlineSearch className="text-md" />
        <p>All</p>
      </div>
      <div onClick={()=>selectTab("Images")} className={`flex items-center space-x-1 border-b-4 border-transparent active:text-blue-500 cursor-pointer pb-3 px-2 ${pathname === "/search/image" && "!text-blue-600 !border-blue-600"}`}>
        <AiOutlineCamera className="text-md" />
        <p>Images</p>
      </div>
    </div>
  )
}
```








# 参考

## css

### border-transparent

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/f5666a8a-ff34-9a11-c557-927e1d393d13.png)



## その他



Udemy

githubコミット分

https://github.com/RYA234/googlecone12/commit/407622493050a3373caff964ad5e2d5527b5b319