From e0ff8095d0fb77848d39b15183d67ca39d30a9ab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CSalar?= <“salar.sali97@gmail.com”> Date: Tue, 23 Aug 2022 12:56:59 +0300 Subject: [PATCH 1/4] Featured Authors section based on Card component --- src/components/Card.tsx | 112 +++++++++++++++++++++++++ src/components/Featuredauthors.tsx | 126 +++++++++++++++++++++++++++++ 2 files changed, 238 insertions(+) create mode 100644 src/components/Card.tsx create mode 100644 src/components/Featuredauthors.tsx diff --git a/src/components/Card.tsx b/src/components/Card.tsx new file mode 100644 index 0000000..11089f8 --- /dev/null +++ b/src/components/Card.tsx @@ -0,0 +1,112 @@ +import React, { Children } from "react"; +import classNames from "classnames"; + +/* -------------------------------------------------------------------------- */ +/* 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 props and function +type AvatarProps = { + children?: React.ReactNode; +}; +Card.Avatar = function CardAvatar({ children }: AvatarProps) { + return <>{children}; +}; +// The end of Body props and function + +// Title props and function +Card.Title = function CardTitle({ children, className }: Props) { + return ( + + {children} + + ); +}; +// The end Title props and function + +// Body props and function +Card.Body = function CardTitle({ children, className }: Props) { + return ( + + {children} + + ); +}; +// The end of Body props and function + +// Cardheader props and function +Card.Cardheader = function CardCardheader({ children, className }: Props) { + return ( +
+ {children} +
+ ); +}; +// The end of Cardheader props and function + +// Cardcontent props and function +Card.Cardcontent = function CardCardcontent({ children, className }: Props) { + return ( +
+ {children} +
+ ); +}; +// The end of Cardcontent props and function + +// Cardaction props and function +type CardactionProps = { + children: React.ReactNode; + className?: string | undefined; + href?: string; +}; +Card.Cardaction = function CardCardaction({ + children, + className, + href = "#", +}: CardactionProps) { + return ( + + {children} + + ); +}; +// The end of Cardaction props and function + +export default Card; diff --git a/src/components/Featuredauthors.tsx b/src/components/Featuredauthors.tsx new file mode 100644 index 0000000..39d12c1 --- /dev/null +++ b/src/components/Featuredauthors.tsx @@ -0,0 +1,126 @@ +import { useDraggable } from "react-use-draggable-scroll"; +import { useRef } from "react"; + +/* -------------------------------------------------------------------------- */ +/* Components */ +/* -------------------------------------------------------------------------- */ +import Heading from "./typography/Heading"; +import { Button } from "./Button/Button"; +import Card from "./Card"; +import Avatar from "./Avatar"; +import Link from "./Link"; + +import { ReactComponent as SVGCaretRight } from "assets/svg/caret-right.svg"; + +export default function Featuredauthors(): JSX.Element { + const ref = + useRef() as React.MutableRefObject; + const { events } = useDraggable(ref); + + return ( +
+ Featured Authors + {/* cards start */} +
+ {/* First Card */} + + + + + A + + Jhon Addams + + + Lorem ipsum dolor sit amet consectetur adipisicing elit. + Consequuntur maxime, libero est unde sapiente repellendus quam + Lorem ipsum dolor sit amet consectetur adipisicing elit. + Consequuntur maxime, libero est unde sapiente repellendus quam + Lorem ipsum dolor sit amet consectetur adipisicing elit. + Consequuntur maxime, libero est unde sapiente repellendus quam + salar + + + + + See More + + + + {/* Second Card */} + + + + + B + + Jhon Addams + + + Lorem ipsum dolor sit amet consectetur adipisicing elit. + Consequuntur maxime, libero est unde sapiente repellendus quam + + + + See More + + + + + {/* Third Card */} + + + + + K + + Jhon Addams + + + Lorem ipsum dolor sit amet consectetur adipisicing elit. + Consequuntur maxime, libero est unde sapiente repellendus quam + + + + See More + + + + + {/* Fourth Card */} + + + + + + C + + + Jhon Addams + + + Lorem ipsum dolor sit amet consectetur adipisicing elit. + Consequuntur maxime, libero est unde sapiente repellendus quam + Lorem ipsum dolor sit amet consectetur adipisicing elit. + Consequuntur maxime, libero est unde sapiente repellendus quam + + + + See More + + + +
+ {/* The End of cards */} + + {/* Show All button */} + +
+ ); +} From 321bb6cc9b3703571403ea09abdec682dd4ef715 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CSalar?= <“salar.sali97@gmail.com”> Date: Tue, 30 Aug 2022 13:45:01 +0300 Subject: [PATCH 2/4] Featured Authores section --- src/components/Featuredauthors.tsx | 126 ----------------------------- 1 file changed, 126 deletions(-) delete mode 100644 src/components/Featuredauthors.tsx diff --git a/src/components/Featuredauthors.tsx b/src/components/Featuredauthors.tsx deleted file mode 100644 index 39d12c1..0000000 --- a/src/components/Featuredauthors.tsx +++ /dev/null @@ -1,126 +0,0 @@ -import { useDraggable } from "react-use-draggable-scroll"; -import { useRef } from "react"; - -/* -------------------------------------------------------------------------- */ -/* Components */ -/* -------------------------------------------------------------------------- */ -import Heading from "./typography/Heading"; -import { Button } from "./Button/Button"; -import Card from "./Card"; -import Avatar from "./Avatar"; -import Link from "./Link"; - -import { ReactComponent as SVGCaretRight } from "assets/svg/caret-right.svg"; - -export default function Featuredauthors(): JSX.Element { - const ref = - useRef() as React.MutableRefObject; - const { events } = useDraggable(ref); - - return ( -
- Featured Authors - {/* cards start */} -
- {/* First Card */} - - - - - A - - Jhon Addams - - - Lorem ipsum dolor sit amet consectetur adipisicing elit. - Consequuntur maxime, libero est unde sapiente repellendus quam - Lorem ipsum dolor sit amet consectetur adipisicing elit. - Consequuntur maxime, libero est unde sapiente repellendus quam - Lorem ipsum dolor sit amet consectetur adipisicing elit. - Consequuntur maxime, libero est unde sapiente repellendus quam - salar - - - - - See More - - - - {/* Second Card */} - - - - - B - - Jhon Addams - - - Lorem ipsum dolor sit amet consectetur adipisicing elit. - Consequuntur maxime, libero est unde sapiente repellendus quam - - - - See More - - - - - {/* Third Card */} - - - - - K - - Jhon Addams - - - Lorem ipsum dolor sit amet consectetur adipisicing elit. - Consequuntur maxime, libero est unde sapiente repellendus quam - - - - See More - - - - - {/* Fourth Card */} - - - - - - C - - - Jhon Addams - - - Lorem ipsum dolor sit amet consectetur adipisicing elit. - Consequuntur maxime, libero est unde sapiente repellendus quam - Lorem ipsum dolor sit amet consectetur adipisicing elit. - Consequuntur maxime, libero est unde sapiente repellendus quam - - - - See More - - - -
- {/* The End of cards */} - - {/* Show All button */} - -
- ); -} From a2f80ad94f4919279aaab3b763229be8888e5789 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CSalar?= <“salar.sali97@gmail.com”> Date: Tue, 30 Aug 2022 13:50:20 +0300 Subject: [PATCH 3/4] Featured Authors section --- src/components/FeaturedAuthors.tsx | 169 +++++++++++++++++++++++++++++ 1 file changed, 169 insertions(+) create mode 100644 src/components/FeaturedAuthors.tsx 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 && [ + + + + + + + + + + + + , + ]} + +
+ + +
+ ); +} From a080bc4361f1de2a536c996316a5020c0114801b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CSalar?= <“salar.sali97@gmail.com”> Date: Tue, 30 Aug 2022 14:05:37 +0300 Subject: [PATCH 4/4] Featured articales section - Card component --- src/components/Card.tsx | 66 ++++++---- src/components/FeaturedArticales.tsx | 188 +++++++++++++++++++++++++++ 2 files changed, 229 insertions(+), 25 deletions(-) create mode 100644 src/components/FeaturedArticales.tsx diff --git a/src/components/Card.tsx b/src/components/Card.tsx index 11089f8..49818fc 100644 --- a/src/components/Card.tsx +++ b/src/components/Card.tsx @@ -1,5 +1,5 @@ -import React, { Children } from "react"; import classNames from "classnames"; +import React from "react"; /* -------------------------------------------------------------------------- */ /* Components */ @@ -27,7 +27,7 @@ const Card = ({ children, className }: Props) => {
{children} @@ -35,69 +35,71 @@ const Card = ({ children, className }: Props) => { ); }; -// Avatar props and function +// Avatar function type AvatarProps = { children?: React.ReactNode; }; Card.Avatar = function CardAvatar({ children }: AvatarProps) { - return <>{children}; + return
{children}
; }; -// The end of Body props and function -// Title props and function +// Title function Card.Title = function CardTitle({ children, className }: Props) { return ( - + {children} ); }; -// The end Title props and function -// Body props and function +// SubTitle function +Card.SubTitle = function CardSubTitle({ children, className }: Props) { + return ( + {children} + ); +}; + +// Body function Card.Body = function CardTitle({ children, className }: Props) { return ( - {children} ); }; -// The end of Body props and function -// Cardheader props and function -Card.Cardheader = function CardCardheader({ children, className }: Props) { +// Cardheader function +Card.CardHeader = function CardCardHeader({ children, className }: Props) { return ( -
+
{children}
); }; -// The end of Cardheader props and function -// Cardcontent props and function -Card.Cardcontent = function CardCardcontent({ children, className }: Props) { +// Cardcontent function +Card.CardContent = function CardCardContent({ children, className }: Props) { return ( -
+
{children}
); }; -// The end of Cardcontent props and function -// Cardaction props and function -type CardactionProps = { +// Cardaction function +type CardActionProps = { children: React.ReactNode; className?: string | undefined; href?: string; }; -Card.Cardaction = function CardCardaction({ +Card.CardAction = function CardCardAction({ children, className, href = "#", -}: CardactionProps) { +}: CardActionProps) { return ( ); }; -// The end of Cardaction props and function + +// 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;