Twitter clone Part5　右側に検索欄のUIを実装

# 概要
今回は右側に検索欄を追加します。
以下gifアニメはディスプレイサイズに応じて右側の検索欄が変化している様子です。

![SearchBar11.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/a12c1966-cef0-5ce3-c6c9-96c856c25417.gif)



# 開発環境

OS:Windows10
IDE:VSCode


```package.json
{
  "name": "",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@heroicons/react": "^1.0.6",
    "next": "12.0.9",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "@types/node": "^20.4.2",
    "@types/react": "^18.2.15",
    "autoprefixer": "^10.4.2",
    "eslint": "8.8.0",
    "eslint-config-next": "12.0.9",
    "postcss": "^8.4.5",
    "tailwindcss": "^3.0.18"
  }
}
```

# 実装のポイント

## ディスプレイサイズ

右側検索欄について
ディスプレイサイズ|説明
---------|-----
1280px以上|普通
1024-1280px|短縮
1024px以下|非表示


### 1280px以上
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/348e0019-5965-120d-2e8f-44865bd20989.png)


### 1024-1280 px
w-9/10の挙動がわからない

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/fb69c883-2105-24c3-c5bf-7396a9ad4adc.png)


### 1024 px以下

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/e512b990-bc57-313a-3da4-b6bdaeaea0c4.png)



## type="input"　における tailswindcss/form　の有無の確認

### 有りの場合
![searchbarwithform111.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/05230256-15ee-c160-472f-dba8534fb716.gif)

### 無しの場合

![searchbarwithoutform111.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/60d85e40-1eb9-f95e-f85e-e7f1d6f94dee.gif)


# コード部分
## Widget
```diff_jsx:Widget.jsx
import {SearchIcon} from "@heroicons/react/outline"

export default function Widgets(){
    return(
        <div className="xl:w-[600px] hidden lg:inline ml-8 space-y-5">
            <div className="w-[90%] xl:w-[75%] sticky top-0 bg-white py-1.5 z-50">
                <div className="flex items-center p-3 rounded-full py-1.5 relative">
                    <SearchIcon className="h-5 z-50"/>
                    <input className="absolute inset-0 rounded-full pl-11 border-gray-500 text-gray-700 focus:shadow-lg focus:bg-white bg-gray-100" type="text" placeholder="Search Twitter" />
                </div>
            </div>

        </div>
    )
}

```



## pages/index
```diff_jsx:index.jsx
import Head from 'next/head'
import Image from 'next/image'
import Sidebar from '../components/Sidebar'
import Feed from '../components/Feed'
import Widgets from '../components/Widgets'

export default function Home() {
  return (
    <div>
      <Head>
        <title>Twitter Clone</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className="flex min-h-screen max-w-7xl mx-auto">
        {/* Header */}

        {/* Sidebar */}
        <Sidebar />


        {/* Feed */}
        <Feed/>
        {/* Modal */}
+        <Widgets />
      </main>
    </div>
  )
}
```





# 参考

## css

### tailwindcss/form

### width fiexed-width

https://tailwindcss.com/docs/width#fixed-widths
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/41045e6b-e62c-5b53-4a7f-1a3fb1307aff.png)


### width percentage widths

https://tailwindcss.com/docs/width#percentage-widths

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/c04b032a-554e-98fc-aa37-61c9914da4b2.png)


## javascript

## Next.js


## React

## firebase

## その他

Udemy

72. Create the widgets component and the search bar

https://www.udemy.com/course/react-js-tutorial/learn/lecture/32461744#overview


githubコミット分

https://github.com/RYA234/twitter-clone/commit/a3adad1cefc28837e8aacbe26964584196d8cb49