diff --git a/daily-thought-frontend/src/components/post/Post.tsx b/daily-thought-frontend/src/components/post/Post.tsx index 61a3b40a91e499188c842ed3c22e91da64fde512..9129560ce311aeb820ffad1f13f74a4d68e8d8ac 100644 --- a/daily-thought-frontend/src/components/post/Post.tsx +++ b/daily-thought-frontend/src/components/post/Post.tsx @@ -1,12 +1,43 @@ -const Post = () => { +import { Post } from "@/types/post" +import { FC, PropsWithChildren } from "react"; + +type PostProps = { + post: Post; +} + +const Post:FC<PropsWithChildren<PostProps>> = ({ + post +}) => { return ( <> - <img - className="mx-auto h-10 w-10 rounded-full" - src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" - alt="" - /> + <div className="flex w-full py-4 flex-col"> + + <div className="flex m-2 items-center"> + <div className="flex h-12 w-12 max-w-xs items-center justify-center rounded-full bg-c-pink text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-pink-400 mr-2"> + <img className="h-12 w-12 rounded-full" src={post.User.Avatar} alt="" /> + </div> + <div className="flex-1 flex-col"> + <p className="">{post.User.Name}</p> + <p className="text-sm text-gray-500">{`@${post.User.Username}`}</p> + </div> + </div> + + + <div className="flex-1 rounded-3xl bg-c-pink font-white ml-16"> + <div className="m-2 text-sm px-2 font-bold text-c-green"> + This is my amazing question of the day? + </div> + <div className="flex-1 rounded-3xl p-4 bg-white text-lg shadow-lg"> + <p className="text-sm text-gray-600">{`${post.User.Name}'s answer`}</p> + <div> + This is my super duper answer. My name is Timmy C and I enjoy smooth jazz. + </div> + </div> + + </div> + </div> + </> ) }