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