google clone Part14 Create Search result component 2/3 検索結果を実装

概要

目次

今回は文字検索の結果を実装します。
以下実装後の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"

実装のポイント

検索結果のレイアウト

flex-colを使って各要素を縦並びに配置します。

groupを使ってhover時にタイトルだけハイライトするようにする

親要素にてgroupを指定することで、他の子要素（URLとスニペット）をhoverしてもタイトルがhoverすることができます。

コード部分

WebSearchResults

WebSearchResults.jsx

+import Link from "next/link";

export default function WebSearchResults({results}){
   return(
    <div>
        <p className="text-gray-600 text-sm mb-5 mt-3">
            About {results.searchInformation?.formattedTotalResults}
            results ({results.searchInformation?.formattedSearchTime} seconds)
        </p>  
+        {results.items?.map((result) => (
+            <div className="mb-8 max-w-xl" key={result.link}>
+                <div className="group flex flex-col">
+                    <Link className="text-sm truncate" href={result.link}>
+                        {result.formattedUrl}
+                    </Link>
+                    <Link className="group-hover:underline decoration-blue-800 text-xl truncate font-medium text-blue-900" href={result.link}>
+                        {result.title}
+                    </Link>
+                    <p className="text-gray-600">
+                        {result.htmlSnippet}
+                    </p>
+                </div>
+            </div>
+        ))}
    </div>
   ) 
}

参考

css

ml-8

group

truncate

その他

Google API レスポンス

Udemy

githubコミット分