From 217787abf2036bac97e7ea386b20e849dc9331b7 Mon Sep 17 00:00:00 2001
From: Matt Kirby <MattJKirby@outlook.com>
Date: Wed, 15 Mar 2023 14:11:06 +0000
Subject: [PATCH] Added basic comment component
---
.../src/components/comments/Comment.tsx | 32 +++++++++++++++++++
1 file changed, 32 insertions(+)
create mode 100644 daily-thought-frontend/src/components/comments/Comment.tsx
diff --git a/daily-thought-frontend/src/components/comments/Comment.tsx b/daily-thought-frontend/src/components/comments/Comment.tsx
new file mode 100644
index 00000000..75457291
--- /dev/null
+++ b/daily-thought-frontend/src/components/comments/Comment.tsx
@@ -0,0 +1,32 @@
+import { Comment } from "@/types/comment"
+import { HeartIcon } from '@heroicons/react/24/outline'
+import { FC, PropsWithChildren } from "react"
+
+type CommentProps = {
+ Comment: Comment,
+
+}
+
+const Comment: FC<PropsWithChildren<CommentProps>> = ({
+ Comment
+}) => {
+
+ return (
+ <div className="w-full flex items-center justify-between p-2">
+ <div className="flex flex-1">
+ <div className="flex h-8 w-8 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-8 w-8 rounded-full" src={Comment.User.Avatar} alt="" />
+ </div>
+ <div>
+ <p className="text-xs font-bold">{Comment.User.Name}</p>
+ <p className="text-sm">This is my comment</p>
+ <p className="text-xs text-gray-500">1 like</p>
+ </div>
+ </div>
+
+ <HeartIcon className="block h-3 w-3" aria-hidden="true" />
+ </div>
+ )
+}
+
+export default Comment;
\ No newline at end of file
--
GitLab