@fortawesome/free-brands-svg-icons#faLinkedinIn TypeScript Examples

Footer: React.FC = () => {
  // Needed for the native window.scroll smooth behavior to work on all browsers
  smoothscroll.polyfill();

  const scrollTo = useCallback((element) => {
    window.scroll({
      behavior: 'smooth',
      left: 0,
      top: element.offsetTop,
    });
  }, []);

  return (
    <Container id="Footer">
      <br />
      <a
        href="#!"
        aria-label="Go Up"
        onClick={() => scrollTo(document.getElementById('main'))}
      >
        <FontAwesomeIcon id="up" icon={faChevronUp} size="1x" />
      </a>
      <div>
        <a
          href={FooterData.githubUrl}
          aria-label="GitHub Link"
          rel="noopener noreferrer"
          target="_blank"
        >
          <FontAwesomeIcon icon={faGithub} size="2x" />
        </a>
        <a
          href={FooterData.linkedinUrl}
          aria-label="LinkedIn Link"
          rel="noopener noreferrer"
          target="_blank"
        >
          <FontAwesomeIcon icon={faLinkedinIn} size="2x" />
        </a>
      </div>
      <hr />

      {/* If you enjoyed this template, please leave my credits here! :) */}

      <span className="copyright">
        © {new Date().getFullYear()} - Template developed by
        <a
          href="https://github.com/guvarallo"
          rel="noopener noreferrer"
          target="_blank"
        >
          {' '}
          Gus Varallo
        </a>
      </span>
    </Container>
  );
}

ProfileSocialMedia: React.FC<Props> = ({ socialMedia }) => {
  return (
    <div className="flex items-center space-x-2">
      {socialMedia.twitter && (
        <Link href={socialMedia.twitter}>
          <a
            target="_blank"
            className="flex items-center justify-center w-8 h-8 rounded-full text-primary bg-zinc-700"
          >
            <FontAwesomeIcon className="w-4 h-4" icon={faTwitter} />
          </a>
        </Link>
      )}
      {socialMedia.web && (
        <Link href={socialMedia.web}>
          <a
            target="_blank"
            className="flex items-center justify-center w-8 h-8 rounded-full text-primary bg-zinc-700"
          >
            <FontAwesomeIcon className="w-4 h-4 " icon={faGlobe} />
          </a>
        </Link>
      )}
      {socialMedia.linkedin && (
        <Link href={socialMedia.linkedin}>
          <a
            target="_blank"
            className="flex items-center justify-center w-8 h-8 rounded-full text-primary bg-zinc-700"
          >
            <FontAwesomeIcon className="w-4 h-4" icon={faLinkedinIn} />
          </a>
        </Link>
      )}
      {socialMedia.github && (
        <Link href={socialMedia.github}>
          <a
            target="_blank"
            className="flex items-center justify-center w-8 h-8 rounded-full text-primary bg-zinc-700"
          >
            <FontAwesomeIcon className="w-4 h-4" icon={faGithub} />
          </a>
        </Link>
      )}
    </div>
  );
}

MentorCard: React.FC<MentorCardProps> = ({
  mentor,
  topics,
  isLogged,
  openModal,
}) => {
  const isActive = mentor.status === 'ACTIVE';
  const isUnavailable = mentor.status === 'NOT_AVAILABLE';

  const findTopicsName = (id: string) => {
    const topic = topics.find((e) => e._id == id);
    return topic.title;
  };

  return (
    <motion.div
      initial={{ y: 100, opacity: 0 }}
      animate={{ y: 0, opacity: isActive ? 1 : 0.66 }}
      exit={{ y: -100, opacity: 0 }}
      className="flex flex-col w-full p-6 rounded-lg bg-zinc-800 space-between "
    >
      <div>
        <div className="flex justify-between w-full">
          <div>
            <Image
              className="object-cover w-24 h-24 mr-4 rounded-full bg-zinc-300"
              src={`${mentor.photo.src}?h=200`}
              alt={`Foto de ${mentor.name} `}
              height={96}
              width={96}
              placeholder="blur"
              blurDataURL={`${mentor.photo.src}?h=50`}
            />
          </div>

          <div>
            <div className="mb-4">
              {isUnavailable ? (
                <button
                  type="button"
                  className="capitalize cursor-not-allowed text-md btn btn-secondary"
                >
                  No disponible
                </button>
              ) : isActive && mentor.calendly && isLogged ? (
                <Link href={mentor.calendly}>
                  <a
                    target="_blank"
                    className="capitalize border text-md text-primary border-zinc-50 btn hover:text-zinc-800 hover:bg-zinc-50 hover:border-zinc-50"
                  >
                    <span>Solicitar mentoría</span>
                  </a>
                </Link>
              ) : (
                <button
                  type="button"
                  onClick={() => openModal()}
                  className=" border text-md text-primary border-zinc-50 btn hover:text-zinc-800 hover:bg-zinc-50 hover:border-zinc-50"
                >
                  Solicitar mentoría
                </button>
              )}
            </div>
            <div className="flex mt-2 place-content-end">
              {mentor.web && (
                <Link href={mentor.web}>
                  <a
                    target="_blank"
                    className="flex items-center justify-center w-8 h-8 ml-2 rounded-full text-primary bg-zinc-700"
                  >
                    <FontAwesomeIcon className="w-4 h-4 " icon={faGlobe} />
                  </a>
                </Link>
              )}
              {mentor.linkedin && (
                <Link href={mentor.linkedin}>
                  <a
                    target="_blank"
                    className="flex items-center justify-center w-8 h-8 ml-2 rounded-full text-primary bg-zinc-700"
                  >
                    <FontAwesomeIcon className="w-4 h-4" icon={faLinkedinIn} />
                  </a>
                </Link>
              )}
              {mentor.github && (
                <Link href={mentor.github}>
                  <a
                    target="_blank"
                    className="flex items-center justify-center w-8 h-8 ml-2 rounded-full text-primary bg-zinc-700"
                  >
                    <FontAwesomeIcon className="w-4 h-4" icon={faGithub} />
                  </a>
                </Link>
              )}
            </div>
          </div>
        </div>
      </div>
      <div>
        <h2 className="mb-2 text-xl font-bold text-primary">{mentor.name}</h2>
      </div>
      <div className="flex flex-col justify-between h-full">
        <div className="flex">
          <div>
            <p className="leading-relaxed text-md text-tertiary md:min-h-64">
              {mentor.description ? mentor.description : '---'}
            </p>
          </div>
        </div>
        <div className="flex flex-wrap mt-4 md:justify-start">
          {mentor.topics &&
            mentor.topics?.map((topic) => (
              <TopicBadge key={topic._key} topic={findTopicsName(topic._ref)} />
            ))}
        </div>
      </div>
    </motion.div>
  );
}