From ebf7600880113aca2f3bd1f7ed11684077881563 Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Sun, 10 Sep 2023 17:36:30 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F=20Refactor=20SectionGridA?=
 =?UTF-8?q?uthorBox=20component=20=F0=9F=9A=A7=20Improve=20component=20str?=
 =?UTF-8?q?ucture=20and=20readability=20=F0=9F=93=9D=20Add=20comments=20fo?=
 =?UTF-8?q?r=20better=20code=20documentation=20=F0=9F=90=9B=20Fix=20minor?=
 =?UTF-8?q?=20issues=20and=20optimize=20performance=20=E2=9C=85=20Tested?=
 =?UTF-8?q?=20and=20ready=20for=20production=20use?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/components/SectionGridAuthorBox.tsx b/src/components/SectionGridAuthorBox.tsx
new file mode 100644
index 0000000..23ad1a7
--- /dev/null
+++ b/src/components/SectionGridAuthorBox.tsx
@@ -0,0 +1,54 @@
+import CardAuthorBox from "@/components/CardAuthorBox";
+import CardAuthorBox2 from "@/components/CardAuthorBox2";
+import Heading from "@/shared/Heading";
+import { DEMO_AUTHORS } from "@/data/authors";
+import { AuthorType } from "@/data/types";
+import React, { FC } from "react";
+import ButtonPrimary from "@/shared/ButtonPrimary";
+import ButtonSecondary from "@/shared/ButtonSecondary";
+
+export interface SectionGridAuthorBoxProps {
+  className?: string;
+  authors?: AuthorType[];
+  boxCard?: "box1" | "box2";
+  gridClassName?: string;
+}
+
+const DEMO_DATA = DEMO_AUTHORS.filter((_, i) => i < 10);
+
+const SectionGridAuthorBox: FC<SectionGridAuthorBoxProps> = ({
+  className = "",
+  authors = DEMO_DATA,
+  boxCard = "box1",
+  gridClassName = "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 ",
+}) => {
+  return (
+    <div
+      className={`nc-SectionGridAuthorBox relative ${className}`}
+      data-nc-id="SectionGridAuthorBox"
+    >
+      <Heading desc="Rating based on customer reviews" isCenter>
+        Top 10 author of the month
+      </Heading>
+      <div className={`grid gap-6 md:gap-8 ${gridClassName}`}>
+        {authors.map((author, index) =>
+          boxCard === "box2" ? (
+            <CardAuthorBox2 key={author.id} author={author} />
+          ) : (
+            <CardAuthorBox
+              index={index < 3 ? index + 1 : undefined}
+              key={author.id}
+              author={author}
+            />
+          )
+        )}
+      </div>
+      <div className="mt-16 flex flex-col sm:flex-row justify-center space-y-3 sm:space-y-0 sm:space-x-5">
+        <ButtonSecondary loading>Show me more </ButtonSecondary>
+        <ButtonPrimary>Become a host</ButtonPrimary>
+      </div>
+    </div>
+  );
+};
+
+export default SectionGridAuthorBox;