diff --git a/src/components/Card.tsx b/src/components/Card.tsx new file mode 100644 index 0000000..49818fc --- /dev/null +++ b/src/components/Card.tsx @@ -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 ( +
+ {children} +
+ ); +}; + +// Avatar function +type AvatarProps = { + children?: React.ReactNode; +}; +Card.Avatar = function CardAvatar({ children }: AvatarProps) { + return
{children}
; +}; + +// Title function +Card.Title = function CardTitle({ children, className }: Props) { + return ( + + {children} + + ); +}; + +// SubTitle function +Card.SubTitle = function CardSubTitle({ children, className }: Props) { + return ( + {children} + ); +}; + +// Body function +Card.Body = function CardTitle({ children, className }: Props) { + return ( + + {children} + + ); +}; + +// Cardheader function +Card.CardHeader = function CardCardHeader({ children, className }: Props) { + return ( +
+ {children} +
+ ); +}; + +// Cardcontent function +Card.CardContent = function CardCardContent({ children, className }: Props) { + return ( +
+ {children} +
+ ); +}; + +// Cardaction function +type CardActionProps = { + children: React.ReactNode; + className?: string | undefined; + href?: string; +}; +Card.CardAction = function CardCardAction({ + children, + className, + href = "#", +}: CardActionProps) { + return ( + + {children} + + ); +}; + +// CardMedia function +type CardMediaProps = { + children?: React.ReactNode; + className?: string | undefined; + src?: string; +}; +Card.CardMedia = function CardCardMedia({ + className, + src = "#", +}: CardMediaProps) { + return ( + + ); +}; + +export default Card; diff --git a/src/components/FeaturedArticales.tsx b/src/components/FeaturedArticales.tsx new file mode 100644 index 0000000..37eaef6 --- /dev/null +++ b/src/components/FeaturedArticales.tsx @@ -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 ( +
+
+
+ +
+
+ +
+
+ + 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) => ( + + + + + + + + + + + {Articale.Body} + + + + + + + Read More + + + + + + + ))} + + {twoCards && [ + + + + + + + + + + + , + + + + + + + + + + + + , + ]} + + {threeCards && [ + + + + + + + + + + + , + ]} + + +
+
+ ); +}; + +export default FeaturedArticales; 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 ( +
+ {/* The Title of Featured Authors section */} + Featured Authors + + {/* Featured Authors section */} +
+ 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) => ( + + + + + + {card.img ? ( + + ) : ( + + {card.Title[0]} + + )} + + {card.Title} + + {card.Body} + + + + See More + + + + + ))} + + {twoCards && [ + + + + + + + + + + + + , + + + + + + + + + + + + + , + ]} + + {threeCards && [ + + + + + + + + + + + + , + ]} + +
+ + +
+ ); +}