Move answer out of Post component

daily-thought-frontend/src/components/post/Post.tsx

 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>