From bde5b7e766476ff906faa5d7d75ef31729286377 Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Sat, 9 Sep 2023 17:24:48 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F=20Refactor=20Comment=20co?=
 =?UTF-8?q?mponent=20=F0=9F=9A=A7=20Improved=20code=20structure=20?=
 =?UTF-8?q?=F0=9F=8E=A8=20Enhanced=20readability=20=F0=9F=94=A7=20Added=20?=
 =?UTF-8?q?comments=20for=20clarity=20=E2=9C=85=20Code=20review=20and=20te?=
 =?UTF-8?q?sting=20complete?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/shared/Comment.tsx | 62 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 src/shared/Comment.tsx

diff --git a/src/shared/Comment.tsx b/src/shared/Comment.tsx
new file mode 100644
index 0000000..8c8a223
--- /dev/null
+++ b/src/shared/Comment.tsx
@@ -0,0 +1,62 @@
+import React from "react";
+import { FC } from "react";
+import Avatar from "@/shared/Avatar";
+
+export interface CommentProps {
+  isSmall?: boolean;
+}
+
+const Comment: FC<CommentProps> = ({ isSmall }) => {
+  return (
+    <div className="nc-CommentCard flex ">
+      <div className="pt-1">
+        <Avatar sizeClass={`w-6 h-6 ${!isSmall ? "sm:h-8 sm:w-8 " : ""}`} />
+      </div>
+      <div className="flex-grow flex flex-col p-4 ml-2 text-sm border border-neutral-200 rounded-xl sm:ml-3 sm:text-base dark:border-neutral-700">
+        <div className="relative flex items-center pr-6">
+          <a
+            className="flex-shrink-0 font-semibold text-neutral-800 dark:text-neutral-100"
+            href="/"
+          >
+            Foulcher Nathanil
+          </a>
+          <span className="mx-2">·</span>
+          <span className="text-neutral-500 dark:text-neutral-400 text-xs line-clamp-1 sm:text-sm">
+            May 20, 2021
+          </span>
+        </div>
+        <span className="block text-neutral-700 mt-2 mb-3 sm:mt-3 sm:mb-4 dark:text-neutral-300">
+          In sagittis dui vel nisl. Duis ac nibh. Fusce lacus purus, aliquet at,
+          feugiat non, pretium quis, lectus. Suspendisse potenti. In eleifend
+          quam a odio. In hac habitasse platea dictumst.
+        </span>
+        <div>
+          <button
+            className="inline-flex items-center min-w-[68px] rounded-full text-neutral-6000 bg-neutral-100 dark:text-neutral-200 dark:bg-neutral-800 px-3 h-8 hover:bg-teal-50 hover:text-teal-600 dark:hover:text-teal-500 focus:outline-none "
+            title="Reply"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="h-[18px] w-[18px] mr-2"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="1.5"
+                d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"
+              ></path>
+            </svg>
+            <span className="text-xs leading-none text-neutral-900 dark:text-neutral-200">
+              Reply
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Comment;