From 01bba773602db2649b8287990088f1a16abe500f Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Mon, 11 Sep 2023 17:12:52 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=89=20Added=20CommentListing=20compone?=
 =?UTF-8?q?nt=20=F0=9F=9A=80=20Ready=20to=20display=20user=20comments!=20?=
 =?UTF-8?q?=F0=9F=94=A7=20Updated=20CommentListing=20interface=20?=
 =?UTF-8?q?=F0=9F=92=84=20Improved=20CommentListing=20styles=20?=
 =?UTF-8?q?=F0=9F=93=9D=20Added=20sample=20data=20for=20CommentListing?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CommentListing.tsx | 79 +++++++++++++++++++++++++++++++
 1 file changed, 79 insertions(+)
 create mode 100644 src/components/CommentListing.tsx

diff --git a/src/components/CommentListing.tsx b/src/components/CommentListing.tsx
new file mode 100644
index 0000000..21d14a0
--- /dev/null
+++ b/src/components/CommentListing.tsx
@@ -0,0 +1,79 @@
+import { StarIcon } from "@heroicons/react/24/solid";
+import React, { FC } from "react";
+import Avatar from "@/shared/Avatar";
+
+interface CommentListingDataType {
+  name: string;
+  avatar?: string;
+  date: string;
+  comment: string;
+  starPoint: number;
+}
+
+export interface CommentListingProps {
+  className?: string;
+  data?: CommentListingDataType;
+  hasListingTitle?: boolean;
+}
+
+const DEMO_DATA: CommentListingDataType = {
+  name: "Cody Fisher",
+  date: "May 20, 2021",
+  comment:
+    "There’s no stopping the tech giant. Apple now opens its 100th store in China.There’s no stopping the tech giant.",
+  starPoint: 5,
+};
+
+const CommentListing: FC<CommentListingProps> = ({
+  className = "",
+  data = DEMO_DATA,
+  hasListingTitle,
+}) => {
+  return (
+    <div
+      className={`nc-CommentListing flex space-x-4 ${className}`}
+      data-nc-id="CommentListing"
+    >
+      <div className="pt-0.5">
+        <Avatar
+          sizeClass="h-10 w-10 text-lg"
+          radius="rounded-full"
+          userName={data.name}
+          imgUrl={data.avatar}
+        />
+      </div>
+      <div className="flex-grow">
+        <div className="flex justify-between space-x-3">
+          <div className="flex flex-col">
+            <div className="text-sm font-semibold">
+              <span>{data.name}</span>
+              {hasListingTitle && (
+                <>
+                  <span className="text-neutral-500 dark:text-neutral-400 font-normal">
+                    {` review in `}
+                  </span>
+                  <a href="/">The Lounge & Bar</a>
+                </>
+              )}
+            </div>
+            <span className="text-sm text-neutral-500 dark:text-neutral-400 mt-0.5">
+              {data.date}
+            </span>
+          </div>
+          <div className="flex text-yellow-500">
+            <StarIcon className="w-4 h-4" />
+            <StarIcon className="w-4 h-4" />
+            <StarIcon className="w-4 h-4" />
+            <StarIcon className="w-4 h-4" />
+            <StarIcon className="w-4 h-4" />
+          </div>
+        </div>
+        <span className="block mt-3 text-neutral-6000 dark:text-neutral-300">
+          {data.comment}
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default CommentListing;