From 3f3e3b545211068d6d2641c25efe17f57d95d715 Mon Sep 17 00:00:00 2001
From: Matt Kirby <MattJKirby@outlook.com>
Date: Tue, 14 Mar 2023 21:36:57 +0000
Subject: [PATCH] Refactored post component
---
.../src/components/post/Post.tsx | 43 ++++++++++++++++---
1 file changed, 37 insertions(+), 6 deletions(-)
diff --git a/daily-thought-frontend/src/components/post/Post.tsx b/daily-thought-frontend/src/components/post/Post.tsx
index 61a3b40a..9129560c 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>
+
</>
)
}
--
GitLab