From a0ac23266954d246ac75fbe07d93b7087bd5600e Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Sun, 10 Sep 2023 17:44:14 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=9F=20Added=20PostCardMetaV2=20compone?=
 =?UTF-8?q?nt=20=F0=9F=9A=A7=20Started=20implementing=20PostCardMetaV2=20?=
 =?UTF-8?q?=F0=9F=8E=A8=20Refactored=20PostCardMetaV2=20for=20better=20rea?=
 =?UTF-8?q?dability=20=F0=9F=90=9B=20Fixed=20a=20bug=20in=20PostCardMetaV2?=
 =?UTF-8?q?=20=F0=9F=92=A1=20Added=20comments=20to=20PostCardMetaV2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/components/PostCardMetaV2.tsx b/src/components/PostCardMetaV2.tsx
new file mode 100644
index 0000000..4bd26c6
--- /dev/null
+++ b/src/components/PostCardMetaV2.tsx
@@ -0,0 +1,64 @@
+import React, { FC } from "react";
+import Avatar from "@/shared/Avatar";
+import { PostDataType } from "@/data/types";
+import Link from "next/link";
+
+export interface PostCardMetaV2Props {
+  className?: string;
+  meta: Pick<PostDataType, "date" | "author" | "title">;
+  hiddenAvatar?: boolean;
+  size?: "large" | "normal";
+}
+
+const PostCardMetaV2: FC<PostCardMetaV2Props> = ({
+  className = "leading-none",
+  meta,
+  hiddenAvatar = false,
+  size = "normal",
+}) => {
+  const { date, author, title } = meta;
+  return (
+    <div
+      className={`nc-PostCardMetaV2 inline-flex items-center flex-wrap text-neutral-800 dark:text-neutral-200 ${
+        size === "normal" ? "text-xs" : "text-sm"
+      } ${className}`}
+      data-nc-id="PostCardMetaV2"
+    >
+      <Link href={author.href} className="relative flex items-center space-x-2">
+        {!hiddenAvatar && (
+          <Avatar
+            radius="rounded-full"
+            sizeClass={
+              size === "normal" ? "h-9 w-9 text-base" : "h-10 w-10 text-xl"
+            }
+            imgUrl={author.avatar}
+            userName={author.displayName}
+          />
+        )}
+        <div>
+          <h2
+            className={`block font-semibold ${
+              size === "normal" ? "text-base" : "text-lg"
+            }`}
+          >
+            <span className="line-clamp-1">{title}</span>
+          </h2>
+
+          <div className="flex mt-1.5">
+            <span className="block text-neutral-6000 hover:text-black dark:text-neutral-300 dark:hover:text-white font-medium">
+              {author.displayName}
+            </span>
+            <span className="text-neutral-500 dark:text-neutral-400 mx-[6px] font-medium">
+              ·
+            </span>
+            <span className="text-neutral-500 dark:text-neutral-400 font-normal">
+              {date}
+            </span>
+          </div>
+        </div>
+      </Link>
+    </div>
+  );
+};
+
+export default PostCardMetaV2;