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>
+ );
+}