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

概要

目次

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

開発環境

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を使ってアイコンと検索バーを横並びに配置します。

検索ボタン

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

コード部分

global.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

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

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

@ layerと@ apply

focus-within(mdn)

shadow-md

ring-color

その他

Udemy

githubコミット分