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

概要 目次 今回はヘッダーの検索バーを実装します。 下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以下 検索アイコンとマイクアイコンを非表示にします。