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] 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 */} + +
+ ); +}