export default function Card({data}){
        return (
        <Link href={data.url} key={data.name}><a target='_blank'>
          <div className='relative flex items-center justify-center group'>
          <Image src={bgImagehere} alt="outer hexa"  />
          <div className='absolute top-0 bottom-0 left-0 right-0 flex items-center justify-center'><Image src={secondBgImageHere} alt="inner hexa" /> </div>
          <div className='absolute top-0 bottom-0 left-0 right-0 flex items-center justify-center group-hover:scale-110 transition-all duration-300'>
            <Image src={data.icon.src} alt={data.name} height={data.icon.height} width={data.icon.width}/> </div>
          </div>
        </a></Link>
        )
      }

      Javascript language logo
      your recipe card header background
      Nextjs card for project

      The code in this excerpt creates a simple card with two images and some text. First, it imports the necessary dependencies and creates a function named Card. This function takes an object with data properties, which holds the image URLs and the text content of the card.

      Next, the Card function creates two links: one to the first image's URL, and another to the second image's URL. The links have the appropriate target and class values set, and the Card function also creates a div element for the card's contents.

      The next section of the code contains the card's main activity. It first creates a link to the RelativeLayout where the card's contents will be displayed, and then it sets the card's content to the first image's URL and the second image's URL, respectively.

      Finally, the Card function creates a transition that will animated the card's content from one image to the next.

      Shortcut: next.card

      0 Comments

        Add Comment

        Log in to add a comment

        Codiga - All rights reserved 2022.