Twitter clone Part4 投稿情報を表示

# 概要
今回は投稿内容を表示する機能を実装します。
データはダミーデータを使います。
以下画像は実装後の様子です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/a1082347-8b4f-a0bf-f8e4-767a2218d55c.png)




# 開発環境

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"
  }
}
```

# 実装のポイント

## レスポンシブデザイン　ヘッダーに依存しているので今回は考慮しない
以下参照

https://qiita.com/RYA234/items/be586055506439831ef5

## 投稿情報のUIを作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/daf7ca2f-2d0e-0f7e-c9c7-713befafa694.png)


## Feed.jsxにてダミーデータを用意し、Post.jsxで表示する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/a1082347-8b4f-a0bf-f8e4-767a2218d55c.png)

# コード部分
## Feed
```diff_jsx:Feed.jsx


import { SparklesIcon} from "@heroicons/react/solid";
import Input from "./Input";
import Post from "./Post";
export default function Feed(){
+    const posts = [
+        {
+          id: "1",
+          name: "Sahand Ghavidel",
+          username: "codewithsahand",
+          userImg: "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/profile-images/1655538932",
+          img: "https://images.unsplash.com/photo-1469474968028-56623f02e42e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=874&q=80",
+          text: "nice view!",
+          timestamp: "2 hours ago",
+        },
+        {
+          id: "2",
+          name: "Sahand Ghavidel",
+          username: "codewithsahand",
+          userImg: "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/profile-images/1655538932",
+          img: "https://images.unsplash.com/photo-1465146344425-f00d5f5c8f07?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=876&q=80",
+          text: "wow!",
+          timestamp: "2 days ago",
+        },
+      ];

    return(
        <div className="xl:ml-[370px] border-1 border-r border-gray-200 xl:min-w-[576px] sm:ml-[73px] flex-grow max-w-xl">
            <div className="flex py-2 px-3 sticky top-0 z-50 bg-white border-b border-gray-200">
                <h2 className="text-lg sm:text-xl font-bold cursor-pointer">Home</h2>
                <div className="hoverEffect flex items-center justify-center px-0 ml-auto w-9 h-9">
                    <SparklesIcon className="h-5"/>
                </div>
            </div>
            <Input />
+            {posts.map((post) =>(
+                <Post key={post.id} post={post} />
            ))}
        </div>
    )
}
```



## Post
```diff_jsx:Post.jsx

import { ChartBarIcon,ChatIcon,DotsHorizontalIcon,HeartIcon,ShareIcon,TrashIcon } from "@heroicons/react/outline";

export default function Post({ post }){
    return(
        <div className="flex p-3 cursor-pointer border-b border-gray-200"> 
            {/* userImage */}
            <img 
                className="h-11 w-11 rounded-full mr-4"
                src={post.userImg}
                alt="user-img"
            />
            {/* rightSide */}
            <div>
                {/* Header */}
                <div>
                    <div>
                        {/* post user info */}
                        <div className="flex items-center justify-between">
                            <h4 className="font-bold text-[15px] sm:text-[16px] hover:underline">
                                {post.name}
                            </h4>
                        </div>
                        <span className="text-sm sm:text-[15px] hover:underline">@{post.username} - </span>
                        <span className="text-sm sm:text-[15px] hover:underline">
                            {post.timestamp}
                        </span>
                    </div>
                    {/* dot icon */}
                    <DotsHorizontalIcon className="h-10 hoverEffect w-10 hover:bg-sky-100 hover:text-sky-500 p-2"/>
                </div>
                {/* post text */}
                <p className="text-gray-800 text-[16px] mb-2">
                    {post.text}
                </p>

                {/* post image */}
                <img className="rounded-2xl mr-2" src={post.img} alt="" />

                {/* icon */}
                <div className="flex justify-between between text-gray-500 p-2">
                    <ChatIcon className="h-9 w-9 hoverEffect p-2 hover:text-sky-500 hover:bg-sky-100" />
                    <TrashIcon className="h-9 w-9 hoverEffect p-2 hover:text-red-600 hover:bg-red-100" />
                    <HeartIcon className="h-9 w-9 hoverEffect p-2 hover:text-red-600 hover:bg-red-100" />
                    <ShareIcon className="h-9 w-9 hoverEffect p-2 hover:text-sky-500 hover:bg-sky-100" />
                    <ChartBarIcon className="h-9 w-9 hoverEffect p-2 hover:text-sky-500 hover:bg-sky-100" />
                </div>
            </div>
        </div>
    )
}
```

# 参考

## css

## javascript

## Next.js


## React

## firebase

## その他

Udemy

71. Add the post section of the feed component

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

githubコミット分

https://github.com/RYA234/twitter-clone/commit/9c09490f63c9cae86ea5e9f7504f1761316ab13c