Merge pull request 'feature/featured-authors' (#111) from feature/featured-authors into develop
Reviewed-on: http://85.143.176.51:3000/free-land/front-end/pulls/111
This commit is contained in:
Denis Gorbunov
commit
56747b66a9
128
src/components/Card.tsx
Normal file
128
src/components/Card.tsx
Normal file
@ -0,0 +1,128 @@
|
|||||||
|
import classNames from "classnames";
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
/* -------------------------------------------------------------------------- */
|
||||||
|
/* Components */
|
||||||
|
/* -------------------------------------------------------------------------- */
|
||||||
|
import Typography from "./typography/Typography";
|
||||||
|
import Heading from "./typography/Heading";
|
||||||
|
import Link from "./Link";
|
||||||
|
|
||||||
|
/* -------------------------------------------------------------------------- */
|
||||||
|
/* Props */
|
||||||
|
/* -------------------------------------------------------------------------- */
|
||||||
|
type Props = {
|
||||||
|
/**
|
||||||
|
* Card component accept children
|
||||||
|
*/
|
||||||
|
children: React.ReactNode;
|
||||||
|
/**
|
||||||
|
* Styling the card component
|
||||||
|
*/
|
||||||
|
className?: string | undefined;
|
||||||
|
};
|
||||||
|
|
||||||
|
const Card = ({ children, className }: Props) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={classNames([
|
||||||
|
className,
|
||||||
|
"inline-flex flex-col justify-between p-4 items-start rounded border border-gray-75 gap-y-8 overflow-hidden",
|
||||||
|
])}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Avatar function
|
||||||
|
type AvatarProps = {
|
||||||
|
children?: React.ReactNode;
|
||||||
|
};
|
||||||
|
Card.Avatar = function CardAvatar({ children }: AvatarProps) {
|
||||||
|
return <div>{children}</div>;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Title function
|
||||||
|
Card.Title = function CardTitle({ children, className }: Props) {
|
||||||
|
return (
|
||||||
|
<Heading className={classNames([className, "select-none "])}>
|
||||||
|
{children}
|
||||||
|
</Heading>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// SubTitle function
|
||||||
|
Card.SubTitle = function CardSubTitle({ children, className }: Props) {
|
||||||
|
return (
|
||||||
|
<Typography className={classNames([className, ""])}>{children}</Typography>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Body function
|
||||||
|
Card.Body = function CardTitle({ children, className }: Props) {
|
||||||
|
return (
|
||||||
|
<Typography //
|
||||||
|
fontWeightVariant="normal"
|
||||||
|
className={classNames([className, "text-sm h-14 overflow-hidden "])}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</Typography>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Cardheader function
|
||||||
|
Card.CardHeader = function CardCardHeader({ children, className }: Props) {
|
||||||
|
return (
|
||||||
|
<div className={classNames([className, "flex items-start gap-4"])}>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Cardcontent function
|
||||||
|
Card.CardContent = function CardCardContent({ children, className }: Props) {
|
||||||
|
return (
|
||||||
|
<div className={classNames([className, "flex flex-col gap-y-4 "])}>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Cardaction function
|
||||||
|
type CardActionProps = {
|
||||||
|
children: React.ReactNode;
|
||||||
|
className?: string | undefined;
|
||||||
|
href?: string;
|
||||||
|
};
|
||||||
|
Card.CardAction = function CardCardAction({
|
||||||
|
children,
|
||||||
|
className,
|
||||||
|
href = "#",
|
||||||
|
}: CardActionProps) {
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
href={href}
|
||||||
|
className={classNames([className, "flex items-center gap-2"])}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// CardMedia function
|
||||||
|
type CardMediaProps = {
|
||||||
|
children?: React.ReactNode;
|
||||||
|
className?: string | undefined;
|
||||||
|
src?: string;
|
||||||
|
};
|
||||||
|
Card.CardMedia = function CardCardMedia({
|
||||||
|
className,
|
||||||
|
src = "#",
|
||||||
|
}: CardMediaProps) {
|
||||||
|
return (
|
||||||
|
<img src={src} className={classNames([className, "w-full h-32 rounded"])} />
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Card;
|
||||||
188
src/components/FeaturedArticales.tsx
Normal file
188
src/components/FeaturedArticales.tsx
Normal file
@ -0,0 +1,188 @@
|
|||||||
|
import { useRef } from "react";
|
||||||
|
|
||||||
|
/* -------------------------------------------------------------------------- */
|
||||||
|
/* Skeleton */
|
||||||
|
/* -------------------------------------------------------------------------- */
|
||||||
|
import "react-loading-skeleton/dist/skeleton.css";
|
||||||
|
|
||||||
|
/* -------------------------------------------------------------------------- */
|
||||||
|
/* Components */
|
||||||
|
/* -------------------------------------------------------------------------- */
|
||||||
|
import Typography from "./typography/Typography";
|
||||||
|
import SkeletonCard from "./SkeletonCard";
|
||||||
|
import AspectRatio from "./AspectRatio";
|
||||||
|
import Card from "./Card";
|
||||||
|
import Link from "./Link";
|
||||||
|
|
||||||
|
/* -------------------------------------------------------------------------- */
|
||||||
|
/* Data */
|
||||||
|
/* -------------------------------------------------------------------------- */
|
||||||
|
import Articales from "./Articales.json";
|
||||||
|
|
||||||
|
/* -------------------------------------------------------------------------- */
|
||||||
|
/* Icons */
|
||||||
|
/* -------------------------------------------------------------------------- */
|
||||||
|
import { ReactComponent as SVGArrowRight } from "assets/svg/arrow-right.svg";
|
||||||
|
import { ReactComponent as SVGCaretRight } from "assets/svg/caret-right.svg";
|
||||||
|
import { ReactComponent as SVGArrowLeft } from "assets/svg/arrow-left.svg";
|
||||||
|
|
||||||
|
/* -------------------------------------------------------------------------- */
|
||||||
|
/* Swiper */
|
||||||
|
/* -------------------------------------------------------------------------- */
|
||||||
|
import { Swiper, SwiperSlide } from "swiper/react";
|
||||||
|
import SwiperCore, { Navigation } from "swiper";
|
||||||
|
import { Pagination } from "swiper";
|
||||||
|
import "swiper/css/pagination";
|
||||||
|
import "swiper/css/navigation";
|
||||||
|
import "./styles.css";
|
||||||
|
import "swiper/css";
|
||||||
|
|
||||||
|
/* -------------------------------------------------------------------------- */
|
||||||
|
/* How many Skeleton cards should be added to the design */
|
||||||
|
/* -------------------------------------------------------------------------- */
|
||||||
|
let twoCards: boolean = false;
|
||||||
|
let threeCards: boolean = false;
|
||||||
|
console.log(`Number of cards ${Articales.length}`);
|
||||||
|
if (Articales.length == 2) {
|
||||||
|
twoCards = true;
|
||||||
|
} else if (Articales.length == 3) {
|
||||||
|
threeCards = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
SwiperCore.use([Navigation]);
|
||||||
|
|
||||||
|
const FeaturedArticales = () => {
|
||||||
|
const navigationPrevRef = useRef(null);
|
||||||
|
const navigationNextRef = useRef(null);
|
||||||
|
const paginationRef = useRef(null);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="slider-wrapper Articales">
|
||||||
|
<div className="flex justify-end gap-2 my-2">
|
||||||
|
<div
|
||||||
|
className="prev inline-flex justify-center items-center
|
||||||
|
w-9 h-9 bg-blue-600 rounded cursor-pointer
|
||||||
|
opacity-0 md:opacity-100"
|
||||||
|
ref={navigationPrevRef}
|
||||||
|
>
|
||||||
|
<SVGArrowLeft className="w-6 h-6 fill-white "></SVGArrowLeft>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="next inline-flex justify-center items-center
|
||||||
|
w-9 h-9 bg-blue-600 rounded cursor-pointer
|
||||||
|
opacity-0 md:opacity-100"
|
||||||
|
ref={navigationNextRef}
|
||||||
|
>
|
||||||
|
<SVGArrowRight className="w-6 h-6 fill-white "></SVGArrowRight>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Swiper
|
||||||
|
slidesPerView={1.25}
|
||||||
|
slidesPerGroup={1}
|
||||||
|
loop={Articales.length > 4 ? true : false}
|
||||||
|
pagination={{ el: ".pagination", clickable: true }}
|
||||||
|
navigation={{
|
||||||
|
prevEl: ".prev",
|
||||||
|
nextEl: ".next",
|
||||||
|
}}
|
||||||
|
breakpoints={{
|
||||||
|
768: {
|
||||||
|
slidesPerView: 2,
|
||||||
|
slidesPerGroup: 2,
|
||||||
|
},
|
||||||
|
1024: {
|
||||||
|
slidesPerView: 2,
|
||||||
|
slidesPerGroup: 2,
|
||||||
|
},
|
||||||
|
1280: {
|
||||||
|
slidesPerView: 4,
|
||||||
|
slidesPerGroup: 4,
|
||||||
|
},
|
||||||
|
1580: {
|
||||||
|
slidesPerView: 4,
|
||||||
|
slidesPerGroup: 4,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
spaceBetween={25}
|
||||||
|
loopFillGroupWithBlank={true}
|
||||||
|
modules={[Pagination, Navigation]}
|
||||||
|
>
|
||||||
|
{Articales.map((Articale) => (
|
||||||
|
<SwiperSlide>
|
||||||
|
<Card className="flex-1">
|
||||||
|
<Card.CardContent>
|
||||||
|
<AspectRatio>
|
||||||
|
<AspectRatio.Content>
|
||||||
|
<img src={Articale.CoverImg} />
|
||||||
|
</AspectRatio.Content>
|
||||||
|
</AspectRatio>
|
||||||
|
|
||||||
|
<Card.Body className="h-14 overflow-hidden">
|
||||||
|
{Articale.Body}
|
||||||
|
</Card.Body>
|
||||||
|
</Card.CardContent>
|
||||||
|
|
||||||
|
<Card.CardAction href={Articale.Link}>
|
||||||
|
<Link>
|
||||||
|
<Typography className="text-blue-500 font-bold">
|
||||||
|
Read More
|
||||||
|
</Typography>
|
||||||
|
</Link>
|
||||||
|
<SVGCaretRight className="fill-blue-500 w-4 h-4" />
|
||||||
|
</Card.CardAction>
|
||||||
|
</Card>
|
||||||
|
</SwiperSlide>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{twoCards && [
|
||||||
|
<SwiperSlide className="hidden xl:block">
|
||||||
|
<SwiperSlide>
|
||||||
|
<SkeletonCard className="flex-1">
|
||||||
|
<SkeletonCard.Content>
|
||||||
|
<SkeletonCard.Media />
|
||||||
|
<SkeletonCard.Body />
|
||||||
|
</SkeletonCard.Content>
|
||||||
|
<SkeletonCard.Action />
|
||||||
|
</SkeletonCard>
|
||||||
|
</SwiperSlide>
|
||||||
|
</SwiperSlide>,
|
||||||
|
|
||||||
|
<SwiperSlide className="hidden xl:block">
|
||||||
|
<SwiperSlide>
|
||||||
|
<SkeletonCard className="flex-1">
|
||||||
|
<SkeletonCard.Content>
|
||||||
|
<SkeletonCard.Media />
|
||||||
|
<SkeletonCard.Body />
|
||||||
|
</SkeletonCard.Content>
|
||||||
|
<SkeletonCard.Action />
|
||||||
|
</SkeletonCard>
|
||||||
|
</SwiperSlide>
|
||||||
|
</SwiperSlide>,
|
||||||
|
]}
|
||||||
|
|
||||||
|
{threeCards && [
|
||||||
|
<SwiperSlide className="hidden xl:block">
|
||||||
|
<SwiperSlide>
|
||||||
|
<SkeletonCard className="flex-1">
|
||||||
|
<SkeletonCard.Content>
|
||||||
|
<SkeletonCard.Media />
|
||||||
|
<SkeletonCard.Body />
|
||||||
|
</SkeletonCard.Content>
|
||||||
|
<SkeletonCard.Action />
|
||||||
|
</SkeletonCard>
|
||||||
|
</SwiperSlide>
|
||||||
|
</SwiperSlide>,
|
||||||
|
]}
|
||||||
|
</Swiper>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className="pagination my-6 w-full h-2 flex justify-center items-center
|
||||||
|
opacity-0 md:opacity-100"
|
||||||
|
ref={paginationRef}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default FeaturedArticales;
|
||||||
169
src/components/FeaturedAuthors.tsx
Normal file
169
src/components/FeaturedAuthors.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user