From cb6c82889a0c47c103532a0cd533bbb3692ed278 Mon Sep 17 00:00:00 2001
From: Matt Kirby <MattJKirby@outlook.com>
Date: Wed, 15 Mar 2023 14:05:47 +0000
Subject: [PATCH] Added more detail to POST component
---
.../src/components/post/Post.tsx | 47 ++++++++++++++++---
1 file changed, 41 insertions(+), 6 deletions(-)
diff --git a/daily-thought-frontend/src/components/post/Post.tsx b/daily-thought-frontend/src/components/post/Post.tsx
index 9129560c..da29b005 100644
--- a/daily-thought-frontend/src/components/post/Post.tsx
+++ b/daily-thought-frontend/src/components/post/Post.tsx
@@ -1,5 +1,8 @@
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 LikeStack from "./LikeStack";
type PostProps = {
post: Post;
@@ -24,18 +27,50 @@ const Post:FC<PropsWithChildren<PostProps>> = ({
</div>
- <div className="flex-1 rounded-3xl bg-c-pink font-white ml-16">
+ <div className="flex-1 rounded-3xl bg-c-pink font-white md: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 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>
+ </div>
+
+
+ <div className="md:ml-16 m-2">
+
+ </div>
- </div>
</div>
</>
--
GitLab