import Link from "next/link"
export default function SeeMoreButton({ url, align }){
return (
<Link href={url}><a className={`ml-auto mr-10 text-xl text-black underline font-extrabold md:m-auto font-primary ${align === 'bottom'? 'relative top-10 mr-24 my-6 md:my-6': null} ${align === 'extraBottom'? 'relative top-40 mb-6 md:mx-auto md:mb-14 mr-32': null}`}>See More</a></Link>
)
}
Link imports from next/link . The SeeMoreButton function takes in two arguments, url and align . align is an optional string that defaults to bottom if not provided. If provided, align will determine the position of the SeeMoreButton within the containing DOM.
The SeeMoreButton function returns a <Link> element with the href attribute set to the provided url and the a className attribute set to the provided align value. The align value can be one of bottom , top-10 , top-40 , or relativeTop-10 , relativeTop-40 , depending on what the value of align is. The font-extrabold and font-primary classes are also provided, depending on the value of align . Finally, the md:my-6 , md:mx-auto , and mr-32 classes are provided, depending on the font-size of the <Link> element.
Shortcut: nextjs.component.seeMoreButton
0 Comments
Log in to add a comment