Scipaper/front-end
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Featured Authores section

Browse Source
This commit is contained in:
“Salar 2022-08-30 13:45:01 +03:00
parent e0ff8095d0
commit 321bb6cc9b
1 changed files with 0 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
src/components/Featuredauthors.tsx
View File

@ -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<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>
);
}