From 5d8cfb37bea6801b02af2dfccb503b078db46194 Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Mon, 11 Sep 2023 17:21:35 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=80=20Implemented=20CardAuthorBox=20co?=
 =?UTF-8?q?mponent=20=E2=9C=A8=20Added=20author=20information=20rendering?=
 =?UTF-8?q?=20=F0=9F=8C=9F=20Enhanced=20styling=20for=20CardAuthorBox=20?=
 =?UTF-8?q?=F0=9F=93=9A=20Updated=20CardAuthorBox=20documentation=20?=
 =?UTF-8?q?=F0=9F=A9=BA=20Fixed=20minor=20issues=20in=20CardAuthorBox?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/components/CardAuthorBox.tsx b/src/components/CardAuthorBox.tsx
new file mode 100644
index 0000000..fd7d4ee
--- /dev/null
+++ b/src/components/CardAuthorBox.tsx
@@ -0,0 +1,58 @@
+import React, { FC } from "react";
+import { AuthorType } from "@/data/types";
+import { StarIcon } from "@heroicons/react/24/solid";
+import Avatar from "@/shared/Avatar";
+import Badge from "@/shared/Badge";
+import Link from "next/link";
+
+export interface CardAuthorBoxProps {
+  className?: string;
+  author: AuthorType;
+  index?: number;
+}
+
+const CardAuthorBox: FC<CardAuthorBoxProps> = ({
+  className = "",
+  author,
+  index,
+}) => {
+  const { displayName, href = "/", avatar, starRating } = author;
+  return (
+    <Link
+      href={href}
+      className={`nc-CardAuthorBox relative flex flex-col items-center justify-center text-center px-3 py-5 sm:px-6 sm:py-7  [ nc-box-has-hover ] [ nc-dark-box-bg-has-hover ] ${className}`}
+    >
+      {index && (
+        <Badge
+          className="absolute left-3 top-3"
+          color={index === 1 ? "red" : index === 2 ? "blue" : "green"}
+          name={`#${index}`}
+        />
+      )}
+      <Avatar
+        sizeClass="w-20 h-20 text-2xl"
+        radius="rounded-full"
+        imgUrl={avatar}
+        userName={displayName}
+      />
+      <div className="mt-3">
+        <h2 className={`text-base font-medium`}>
+          <span className="line-clamp-1">{displayName}</span>
+        </h2>
+        <span
+          className={`block mt-1.5 text-sm text-neutral-500 dark:text-neutral-400`}
+        >
+          New York
+        </span>
+      </div>
+      <div className="py-2 px-5 mt-4 bg-neutral-100 dark:bg-neutral-800 rounded-full flex items-center justify-center ">
+        <span className="text-xs font-medium pt-[1px]">
+          {starRating || 4.9}
+        </span>
+        <StarIcon className="w-5 h-5 text-amber-500 ml-2 " />
+      </div>
+    </Link>
+  );
+};
+
+export default CardAuthorBox;