Featured Authors section based on Card component
This commit is contained in:
“Salar
parent
eb7205025c
commit
e0ff8095d0
112
src/components/Card.tsx
Normal file
112
src/components/Card.tsx
Normal file
@ -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 (
|
||||||
|
<div
|
||||||
|
className={classNames([
|
||||||
|
className,
|
||||||
|
"inline-flex flex-col justify-between p-4 max-w-xs lg:max-w-sm h-52 items-start rounded border border-[#F0F0F0] gap-y-8 overflow-hidden",
|
||||||
|
])}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 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 (
|
||||||
|
<Heading className={classNames([className, "select-none leading-7"])}>
|
||||||
|
{children}
|
||||||
|
</Heading>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
// The end Title props and function
|
||||||
|
|
||||||
|
// Body props and function
|
||||||
|
Card.Body = function CardTitle({ children, className }: Props) {
|
||||||
|
return (
|
||||||
|
<Typography
|
||||||
|
fontWeightVariant="normal"
|
||||||
|
className={classNames([className, "text-sm"])}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</Typography>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
// The end of Body props and function
|
||||||
|
|
||||||
|
// Cardheader props and function
|
||||||
|
Card.Cardheader = function CardCardheader({ children, className }: Props) {
|
||||||
|
return (
|
||||||
|
<div className={classNames([className, "first flex items-start gap-4"])}>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
// The end of Cardheader props and function
|
||||||
|
|
||||||
|
// Cardcontent props and function
|
||||||
|
Card.Cardcontent = function CardCardcontent({ children, className }: Props) {
|
||||||
|
return (
|
||||||
|
<div className={classNames([className, "flex flex-col gap-y-4"])}>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
// 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 (
|
||||||
|
<Link
|
||||||
|
href={href}
|
||||||
|
className={classNames([className, "flex items-center gap-2"])}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
// The end of Cardaction props and function
|
||||||
|
|
||||||
|
export default Card;
|
||||||
126
src/components/Featuredauthors.tsx
Normal file
126
src/components/Featuredauthors.tsx
Normal file
@ -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<HTMLDivElement>() as React.MutableRefObject<HTMLInputElement>;
|
||||||
|
const { events } = useDraggable(ref);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Heading className="text-center">Featured Authors</Heading>
|
||||||
|
{/* cards start */}
|
||||||
|
<div
|
||||||
|
className="flex w-full space-x-3 overflow-x-scroll scrollbar-hide justify-start 2xl:justify-center py-10 px-5 gap-2"
|
||||||
|
{...events}
|
||||||
|
ref={ref}
|
||||||
|
>
|
||||||
|
{/* First Card */}
|
||||||
|
<Card className="flex-none">
|
||||||
|
<Card.Cardcontent>
|
||||||
|
<Card.Cardheader>
|
||||||
|
<Card.Avatar>
|
||||||
|
<Avatar className="bg-sky-800 text-white w-12 h-12">A</Avatar>
|
||||||
|
</Card.Avatar>
|
||||||
|
<Card.Title>Jhon Addams</Card.Title>
|
||||||
|
</Card.Cardheader>
|
||||||
|
<Card.Body className="h-14 overflow-hidden">
|
||||||
|
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
|
||||||
|
</Card.Body>
|
||||||
|
</Card.Cardcontent>
|
||||||
|
|
||||||
|
<Card.Cardaction href="https://www.google.ru/">
|
||||||
|
<Link className="text-blue-500 font-bold ">See More</Link>
|
||||||
|
<SVGCaretRight className="fill-blue-500 w-4 h-4" />
|
||||||
|
</Card.Cardaction>
|
||||||
|
</Card>
|
||||||
|
{/* Second Card */}
|
||||||
|
<Card className="flex-none">
|
||||||
|
<Card.Cardcontent>
|
||||||
|
<Card.Cardheader>
|
||||||
|
<Card.Avatar>
|
||||||
|
<Avatar className="bg-green-800 text-white w-12 h-12">B</Avatar>
|
||||||
|
</Card.Avatar>
|
||||||
|
<Card.Title>Jhon Addams</Card.Title>
|
||||||
|
</Card.Cardheader>
|
||||||
|
<Card.Body className="h-14 overflow-hidden">
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
||||||
|
Consequuntur maxime, libero est unde sapiente repellendus quam
|
||||||
|
</Card.Body>
|
||||||
|
</Card.Cardcontent>
|
||||||
|
<Card.Cardaction href="https://www.google.ru/">
|
||||||
|
<Link className="text-blue-500 font-bold ">See More</Link>
|
||||||
|
<SVGCaretRight className="fill-blue-500 w-4 h-4" />
|
||||||
|
</Card.Cardaction>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Third Card */}
|
||||||
|
<Card className="flex-none">
|
||||||
|
<Card.Cardcontent>
|
||||||
|
<Card.Cardheader>
|
||||||
|
<Card.Avatar>
|
||||||
|
<Avatar className="bg-red-800 text-white w-12 h-12">K</Avatar>
|
||||||
|
</Card.Avatar>
|
||||||
|
<Card.Title>Jhon Addams</Card.Title>
|
||||||
|
</Card.Cardheader>
|
||||||
|
<Card.Body className="h-14 overflow-hidden">
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
||||||
|
Consequuntur maxime, libero est unde sapiente repellendus quam
|
||||||
|
</Card.Body>
|
||||||
|
</Card.Cardcontent>
|
||||||
|
<Card.Cardaction href="https://www.google.ru/">
|
||||||
|
<Link className="text-blue-500 font-bold ">See More</Link>
|
||||||
|
<SVGCaretRight className="fill-blue-500 w-4 h-4" />
|
||||||
|
</Card.Cardaction>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Fourth Card */}
|
||||||
|
<Card className="flex-none">
|
||||||
|
<Card.Cardcontent>
|
||||||
|
<Card.Cardheader>
|
||||||
|
<Card.Avatar>
|
||||||
|
<Avatar className="bg-yellow-800 text-white w-12 h-12">
|
||||||
|
C
|
||||||
|
</Avatar>
|
||||||
|
</Card.Avatar>
|
||||||
|
<Card.Title>Jhon Addams</Card.Title>
|
||||||
|
</Card.Cardheader>
|
||||||
|
<Card.Body className="h-14 overflow-hidden">
|
||||||
|
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
|
||||||
|
</Card.Body>
|
||||||
|
</Card.Cardcontent>
|
||||||
|
<Card.Cardaction href="https://www.google.ru/">
|
||||||
|
<Link className="text-blue-500 font-bold ">See More</Link>
|
||||||
|
<SVGCaretRight className="fill-blue-500 w-4 h-4" />
|
||||||
|
</Card.Cardaction>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
{/* The End of cards */}
|
||||||
|
|
||||||
|
{/* Show All button */}
|
||||||
|
<Button emphasis="high" className="font-bold m-auto">
|
||||||
|
Show All
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user