From a2f80ad94f4919279aaab3b763229be8888e5789 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CSalar?= <“salar.sali97@gmail.com”>
Date: Tue, 30 Aug 2022 13:50:20 +0300
Subject: [PATCH]  Featured Authors section

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

diff --git a/src/components/FeaturedAuthors.tsx b/src/components/FeaturedAuthors.tsx
new file mode 100644
index 0000000..a3efad3
--- /dev/null
+++ b/src/components/FeaturedAuthors.tsx
@@ -0,0 +1,169 @@
+/* -------------------------------------------------------------------------- */
+/*                                 Components                                 */
+/* -------------------------------------------------------------------------- */
+import Heading from "./typography/Heading";
+import SkeletonCard from "./SkeletonCard";
+import { Button } from "./Button/Button";
+import Avatar from "./Avatar";
+import Card from "./Card";
+import Link from "./Link";
+
+/* -------------------------------------------------------------------------- */
+/*                                   Swiper                                   */
+/* -------------------------------------------------------------------------- */
+import { Swiper, SwiperSlide } from "swiper/react";
+import SwiperCore, { Navigation } from "swiper";
+import "swiper/css/pagination";
+import "swiper/css/navigation";
+import "./styles.css";
+import "swiper/css";
+
+/* -------------------------------------------------------------------------- */
+/*                                    Authors                                 */
+/* -------------------------------------------------------------------------- */
+import Authors from "./Authors.json";
+
+/* -------------------------------------------------------------------------- */
+/*                                    Icons                                   */
+/* -------------------------------------------------------------------------- */
+import { ReactComponent as SVGCaretRight } from "assets/svg/caret-right.svg";
+
+/* -------------------------------------------------------------------------- */
+/*                                  Variables                                 */
+/* -------------------------------------------------------------------------- */
+SwiperCore.use([Navigation]);
+
+/* -------------------------------------------------------------------------- */
+/*                               Number of Cards                              */
+/* -------------------------------------------------------------------------- */
+let twoCards: boolean = false;
+let threeCards: boolean = false;
+console.log(`Number of cards ${Authors.length}`);
+if (Authors.length == 2) {
+  twoCards = true;
+} else if (Authors.length == 3) {
+  threeCards = true;
+}
+
+/**
+ * Featured authors component to display ...
+ */
+export default function FeaturedAuthors(): JSX.Element {
+  return (
+    <div>
+      {/* The Title of Featured Authors section */}
+      <Heading className="text-center my-8">Featured Authors</Heading>
+
+      {/* Featured Authors section */}
+      <div className="slider-wrapper Authors">
+        <Swiper
+          slidesPerView={1.25}
+          slidesPerGroup={1}
+          spaceBetween={25}
+          loop={Authors.length > 4 ? true : false}
+          loopFillGroupWithBlank={false}
+          breakpoints={{
+            768: {
+              slidesPerView: 2,
+              slidesPerGroup: 2,
+            },
+            1024: {
+              slidesPerView: 2,
+              slidesPerGroup: 2,
+            },
+            1280: {
+              slidesPerView: 4,
+              slidesPerGroup: 4,
+            },
+            1580: {
+              slidesPerView: 4,
+              slidesPerGroup: 4,
+            },
+          }}
+        >
+          {Authors.map((card) => (
+            <SwiperSlide>
+              <Card className="flex-1">
+                <Card.CardContent>
+                  <Card.CardHeader>
+                    <Card.Avatar>
+                      {card.img ? (
+                        <Avatar
+                          className="w-12 h-12"
+                          src={card.img}
+                          alt={card.Title}
+                        />
+                      ) : (
+                        <Avatar
+                          className="w-12 h-12"
+                          src={card.img}
+                          alt={card.Title}
+                        >
+                          {card.Title[0]}
+                        </Avatar>
+                      )}
+                    </Card.Avatar>
+                    <Card.Title>{card.Title}</Card.Title>
+                  </Card.CardHeader>
+                  <Card.Body>{card.Body}</Card.Body>
+                </Card.CardContent>
+
+                <Card.CardAction href={card.Link}>
+                  <Link className="text-blue-500 font-bold ">See More</Link>
+                  <SVGCaretRight className="fill-blue-500 w-4 h-4" />
+                </Card.CardAction>
+              </Card>
+            </SwiperSlide>
+          ))}
+
+          {twoCards && [
+            <SwiperSlide className="hidden xl:block">
+              <SkeletonCard className="flex-1">
+                <SkeletonCard.Content>
+                  <SkeletonCard.Header>
+                    <SkeletonCard.Avatar />
+                    <SkeletonCard.Title />
+                  </SkeletonCard.Header>
+                  <SkeletonCard.Body />
+                </SkeletonCard.Content>
+                <SkeletonCard.Action />
+              </SkeletonCard>
+            </SwiperSlide>,
+
+            <SwiperSlide className="hidden xl:block">
+              <SkeletonCard className="flex-1">
+                <SkeletonCard.Content>
+                  <SkeletonCard.Header>
+                    <SkeletonCard.Avatar />
+                    <SkeletonCard.Title />
+                  </SkeletonCard.Header>
+                  <SkeletonCard.Body />
+                </SkeletonCard.Content>
+                <SkeletonCard.Action />
+              </SkeletonCard>
+            </SwiperSlide>,
+          ]}
+
+          {threeCards && [
+            <SwiperSlide className="hidden xl:block">
+              <SkeletonCard className="flex-1">
+                <SkeletonCard.Content>
+                  <SkeletonCard.Header>
+                    <SkeletonCard.Avatar />
+                    <SkeletonCard.Title />
+                  </SkeletonCard.Header>
+                  <SkeletonCard.Body />
+                </SkeletonCard.Content>
+                <SkeletonCard.Action />
+              </SkeletonCard>
+            </SwiperSlide>,
+          ]}
+        </Swiper>
+      </div>
+
+      <Button emphasis="high" className="font-bold m-auto my-8">
+        Show All
+      </Button>
+    </div>
+  );
+}