import Image from "next/image"
      import Link from 'next/link'
      
      import twitterIcon from "../../../public/images/socials/twitter.svg"
      import linkedinIcon from "../../../public/images/socials/linkedin.svg"
      import githubIcon from "../../../public/images/socials/github.svg"
      
      export default function ProfileCard({profile}){
        return (
            <div className="flex flex-col relative items-center justify-center">
              <div className="relative group rounded-full border-8 sm:border-4 border-primary flex justify-center z-10">
                {/* Speaker image */}
                <Image src={profile.picture[0].url} alt={profile.name} height={150} width={150} className="border-primary_dark border-4 rounded-full z-10 " />
              </div>
      
              {/* Speaker's name and designation */}
              <div className={`bg-white px-6 flex flex-col items-center justify-center border-grey border-2 rounded-lg absolute top-20  h-14rem w-15rem `}>
                <h4 className={`text-center font-primary font-extrabold mt-20`}>{profile.name}</h4>
                <h5 className="text-center font-primary ">{profile.desc}</h5>
      
              {/* Speakers social handles to be dispalyed on hover */}
                <div className="flex items-center justify-around gap-4 mt-4 sm:mt-0">
                  {profile.github &&  <Link href={profile.github}><a target="_blank"><i><Image src={githubIcon} alt="github" /></i></a></Link>}
                  {profile.linkedin && <Link href={profile.linkedin}><a target="_blank"><i><Image src={linkedinIcon} alt="linkedin" /></i></a></Link>}
                  {profile.twitter && <Link href={profile.twitter}><a target="_blank"><i><Image src={twitterIcon} alt="twitter" /></i></a></Link>}
                </div>
              </div>
            </div>
      
        )
      }

      Javascript language logo
      your recipe card header background
      Nextjs profile card component

      Nextjs with tailwind

      Shortcut: nextjs.component.profileCard

      0 Comments

        Add Comment

        Log in to add a comment

        Codiga - All rights reserved 2022.