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

      Javascript language logo
      your recipe card header background
      See more button component

      Nextjs with tailwind

      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

        Add Comment

        Log in to add a comment

        Codiga - All rights reserved 2022.