From 84048a66f55970306dd418473085d7646f3f6c08 Mon Sep 17 00:00:00 2001
From: Matt Kirby <MattJKirby@outlook.com>
Date: Wed, 15 Mar 2023 20:43:07 +0000
Subject: [PATCH] Move answer out of Post component
---
.../src/components/post/Post.tsx | 43 +++----------------
1 file changed, 7 insertions(+), 36 deletions(-)
diff --git a/daily-thought-frontend/src/components/post/Post.tsx b/daily-thought-frontend/src/components/post/Post.tsx
index da29b005..7656af8b 100644
--- a/daily-thought-frontend/src/components/post/Post.tsx
+++ b/daily-thought-frontend/src/components/post/Post.tsx
@@ -1,7 +1,7 @@
import { Post } from "@/types/post"
-import { Bars3Icon, HeartIcon, ChatBubbleLeftIcon } from '@heroicons/react/24/outline'
-import Comment from "../comments/Comment"
+
import { FC, PropsWithChildren } from "react";
+import AnswerCard from "./AnswerCard";
import LikeStack from "./LikeStack";
type PostProps = {
@@ -16,7 +16,7 @@ const Post:FC<PropsWithChildren<PostProps>> = ({
<>
<div className="flex w-full py-4 flex-col">
- <div className="flex m-2 items-center">
+ <div className="flex m-2 items-center bg-white">
<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>
@@ -24,6 +24,9 @@ const Post:FC<PropsWithChildren<PostProps>> = ({
<p className="">{post.User.Name}</p>
<p className="text-sm text-gray-500">{`@${post.User.Username}`}</p>
</div>
+ <div className="flex flex-col justify-end">
+ <p className="text-xs text-gray-500">Just now</p>
+ </div>
</div>
@@ -31,39 +34,7 @@ const Post:FC<PropsWithChildren<PostProps>> = ({
<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 bg-white text-lg shadow-lg overflow-hidden">
- <div className="p-4">
- <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 className="mt-2 flex ">
- <div className="flex-1">
- <button
- type="button"
- className="ml-auto mr-2 flex-shrink-0 rounded-full bg-white p-1 text-c-pink hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-c-pink"
- >
- <span className="sr-only">View notifications</span>
- <HeartIcon className="h-6 w-6" aria-hidden="true"/>
- </button>
- <button
- type="button"
- className="ml-auto mr-2 flex-shrink-0 rounded-full bg-white p-1 text-c-pink hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-c-pink"
- >
- <span className="sr-only">View notifications</span>
- <ChatBubbleLeftIcon className="h-6 w-6" aria-hidden="true"/>
- </button>
- </div>
- <LikeStack Users={[]} />
- </div>
- </div>
-
-
-
- <div className="border-t bg-gray-50 p-2">
- <Comment Comment={{Data: "asdfg", User: post.User}} />
- </div>
- </div>
+ <AnswerCard post={post}/>
</div>
--
GitLab