create "Basic components"

What does this MR do?

(Summarise what this MR does)

Relevant screenshots

Testing

(Add detailed checkbox test steps for reviewer)

Relevant issues

(List the relevant issues, i.e. Closes #...)

Closes #25 (closed)

daily-thought-frontend/src/components/comments/Comment.tsx

+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