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