Scipaper/front-end
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Featured Authors section

Browse Source
This commit is contained in:
“Salar 2022-08-30 13:50:20 +03:00
parent 321bb6cc9b
commit a2f80ad94f
1 changed files with 169 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

169
src/components/FeaturedAuthors.tsx Normal file
View File

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