170 lines
6.1 KiB
TypeScript
170 lines
6.1 KiB
TypeScript
/* -------------------------------------------------------------------------- */
|
|
/* 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";
|
|
|
|
/* -------------------------------------------------------------------------- */
|
|
/* Authors */
|
|
/* -------------------------------------------------------------------------- */
|
|
import Authors from "./Authors.json";
|
|
|
|
/* -------------------------------------------------------------------------- */
|
|
/* Icons */
|
|
/* -------------------------------------------------------------------------- */
|
|
import { ReactComponent as SVGCaretRight } from "assets/svg/caret-right.svg";
|
|
import Link from "./typography/Link";
|
|
|
|
/* -------------------------------------------------------------------------- */
|
|
/* 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>
|
|
);
|
|
}
|