Frontend/src/components/MainPage/sections/FeaturedAuthorsCards.tsx

/* -------------------------------------------------------------------------- */
/*                                 Components                                 */
/* -------------------------------------------------------------------------- */
import Heading from "../../typography/Heading";
import SkeletonCard from "../../SkeletonCard";
import { Button } from "../../Button/Button";
import Avatar from "../../Avatar";
import Card from "../../Card";

/* -------------------------------------------------------------------------- */
/*                                   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";

/* -------------------------------------------------------------------------- */
/*                                    Icons                                   */
/* -------------------------------------------------------------------------- */
import { ReactComponent as SVGCaretRight } from "assets/svg/caret-right.svg";
import Link from "../../typography/Link";

/* -------------------------------------------------------------------------- */
/*                                  Variables                                 */
/* -------------------------------------------------------------------------- */
SwiperCore.use([Navigation]);

/* -------------------------------------------------------------------------- */
/*                                    Authors data mock                                */
/* -------------------------------------------------------------------------- */
const authors = [
  {
    Title: "JSON Three",
    Body: "Lorem ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.am elit.Consequuntur maxime, adipisicing elit.",
    Link: "http://pinterest.com",
  },
  {
    Title: "JSON Two",
    Body: "Lorem ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.am elit.Consequuntur maxime, libero est unde sapiente repellendus quam",
    Link: "http://pinterest.com",
    img: "https://i.kinja-img.com/gawker-media/image/upload/t_original/ijsi5fzb1nbkbhxa2gc1.png",
  },
  {
    Title: "JSON Two",
    Body: "Lorem ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.am elit.Consequuntur maxime, libero est unde sapiente repellendus quam",
    Link: "http://pinterest.com",
    img: "https://i.kinja-img.com/gawker-media/image/upload/t_original/ijsi5fzb1nbkbhxa2gc1.png",
  },
  {
    Title: "JSON Two",
    Body: "Lorem ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.am elit.Consequuntur maxime, libero est unde sapiente repellendus quam",
    Link: "http://pinterest.com",
    img: "https://i.kinja-img.com/gawker-media/image/upload/t_original/ijsi5fzb1nbkbhxa2gc1.png",
  },
];

/* -------------------------------------------------------------------------- */
/*                               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 FeaturedAuthorsCards(): 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" to="*">
                    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>
  );
}