react-icons/fa#FaGithub TypeScript Examples

C = () => {
  return (
    <div className={styles.container}>
      <Link href="/">
        <h1 className={styles.brand}>Terraform Visual</h1>
      </Link>

      <Link href="/">
        <div className={styles.nav}>Home</div>
      </Link>

      <Link href="/examples/aws-s3">
        <div className={styles.nav}>Example - AWS</div>
      </Link>

      <div className={styles.nav}>
        <a
          className={styles.githubLink}
          href="https://github.com/hieven/terraform-visual"
          target="_blank"
        >
          <FaGithub className={styles.githubIcon} size="2.5rem" />
          <p className={styles.github}>GitHub</p>
        </a>
      </div>

      <div className={styles.fileUploadContainer}>
        <FileUpload.C afterUploaded={afterFileUploaded} />
      </div>
    </div>
  )
}

Footer: FC = () => {
  return <Box as='footer' role='contentinfo' mx='auto' maxW='7xl' py='12' px={{ base: '4', md: '8' }}>
    <Stack>
      <Stack direction='row' spacing='4' align='center' justify='space-between'>
        <Box>
          <Link to='/'>
            <Heading>Phonepare</Heading>
          </Link>
          <Text>휴대폰을 비교하세요.</Text>
        </Box>
        <Box>
          <ButtonGroup variant='ghost' color='gray.600'>
            <IconButton as={Link} to='/' aria-label='Home' icon={<FaHome fontSize='20px' />} />
            <IconButton as='a' href='https://github.com/wonderlandpark/phonepare' aria-label='Github' icon={<FaGithub fontSize='20px' />} />
          </ButtonGroup>
        </Box>
      </Stack>
      <Text fontSize='sm' alignSelf={{ base: 'center', sm: 'start' }}>
        &copy; {new Date().getFullYear()} Junseo Park. All rights reserved.
      </Text>
    </Stack>
  </Box>
}

SocialLinks: FunctionComponent = () => {
    return (
        <Flex
            align="center"
            wrap="wrap"
            justify="center"
            mx={["auto", null, "initial"]}
            p={2}
        >
            <SocialLink icon={FaTwitter} href={twitterUrl} />
            <SocialLink icon={FaYoutube} href={youtubeUrl} />
            <SocialLink icon={FaFacebookF} href={facebookUrl} />
            <SocialLink icon={FaGithub} href={githubUrl} />
        </Flex>
    );
}

GitHubButton: React.FC<Props> = () => {
    const themeContext = useContext(ThemeContext);
    return (
        <IconContext.Provider value={{ color: themeContext.colors.buttonIcons }}>
            <Root>
                <Link href="https://github.com/nanreh/calendar-hack">
                    <FaGithub style={{ verticalAlign: 'middle' }} />
                </Link>
            </Root>
        </IconContext.Provider>
    )
}

SOCIAL_PLATFORM_ITEMS = [
  {
    link: INTERLAY_TWITTER,
    icon: <FaTwitter />
  },
  {
    link: INTERLAY_MEDIUM,
    icon: <FaMediumM />
  },
  {
    link: INTERLAY_GITHUB,
    icon: <FaGithub />
  },
  {
    link: INTERLAY_LINKEDIN,
    icon: <FaLinkedinIn />
  },
  {
    link: INTERLAY_DISCORD,
    icon: <FaDiscord />
  }
]

FEEDBACK_ITEMS = [
  {
    title: 'User Feedback Form',
    link: USER_FEEDBACK_FORM,
    icon: <FaExternalLinkAlt />
  },
  {
    title: 'Vault Feedback Form',
    link: VAULT_FEEDBACK_FORM,
    icon: <FaExternalLinkAlt />
  },
  {
    title: 'Relayer Feedback Form',
    link: RELAYER_FEEDBACK_FORM,
    icon: <FaExternalLinkAlt />
  },
  {
    title: 'Open an Issue on Github',
    link: POLKA_BTC_UI_GITHUB_ISSUES,
    icon: <FaGithub />
  },
  {
    title: 'Discuss on Discord',
    link: INTERLAY_DISCORD,
    icon: <FaDiscord />
  }
]

SOCIAL_MEDIA_ITEMS = [
  {
    link: INTERLAY_TWITTER_LINK,
    icon: <FaTwitter className={clsx('w-3', 'h-3')} />
  },
  {
    link: INTERLAY_DISCORD_LINK,
    icon: <FaDiscord className={clsx('w-3', 'h-3')} />
  },
  {
    link: INTERLAY_GITHUB_LINK,
    icon: <FaGithub className={clsx('w-3', 'h-3')} />
  },
  {
    link: INTERLAY_EMAIL_LINK,
    icon: <FaMailBulk className={clsx('w-3', 'h-3')} />
  }
]

export default function Tag() {
  return (
    <div className="copy">
      <span>
        <a target="_blank" rel="noreferrer" href="https://twitter.com/CantBeFaraz">
          <FaTwitter size={40} />
        </a>
      </span>

      <span>
        Made with ? by{' '}
        <a target="_blank" rel="noreferrer" href="https://twitter.com/CantBeFaraz">
          Faraz Shaikh
        </a>
      </span>

      <span>
        <a target="_blank" rel="noreferrer" href="https://github.com/FarazzShaikh">
          <FaGithub size={40} />
        </a>
      </span>
    </div>
  )
}

C = () => {
  return (
    <div className={styles.container}>
      <Link href="/">
        <h1 className={styles.brand}>Terraform Visual</h1>
      </Link>

      <div className={styles.githubContainer}>
        <a
          className={styles.githubLink}
          href="https://github.com/hieven/terraform-visual"
          target="_blank"
        >
          <FaGithub className={styles.githubIcon} size="2.5rem" />
          <p className={styles.github}>GitHub</p>
        </a>
      </div>
    </div>
  )
}

linktreeList = [
  { href: "https://twitter.com/DhafitF", text: "Twitter", icon: <FaTwitter /> },
  {
    href: "https://trakteer.id/dhafid",
    text: "Trakteer",
    icon: <Image src="/assets/icon/lines-trakteer-icon.png" alt="Trakteer logo" width="100%" height="100%" />,
  },
  { href: "https://www.instagram.com/dhafitf", text: "Instagram", icon: <FaInstagram /> },
  { href: "https://www.nogisub.com/", text: "Fansub", icon: <FaBloggerB /> },
  { href: "https://www.facebook.com/dhafid.farenza", text: "Facebook", icon: <FaFacebookF /> },
  { href: "https://github.com/dhafitf", text: "Github", icon: <FaGithub /> },
  { href: "https://www.youtube.com/c/dhafitfarenza", text: "Facebook", icon: <FaYoutube /> },
]

ICONS: IconTypeList = {
  homepage: TiHome,
  source: FaCode,
  source_github: FaGithub,
  source_gitlab: SiGitlab,
  source_gitea: SiGitea,
  source_bitbucket: SiBitbucket,
  support: BsFlagFill,
  default: FaLink,
}

QuickSocialLinksView = (props: { className?: string }): JSX.Element => {
  const { className } = props;
  const { siteConfig } = useDocusaurusContext();

  return (
    <div className={clsx(className, styles.IconContainer)}>
      <FaGithub
        className={styles.Icon}
        onClick={() => {
          if (!onServer())
            window.open(siteConfig.customFields.githubUrl, '_blank');
        }}
      />
      <FaDiscord
        className={styles.Icon}
        onClick={() => {
          if (!onServer())
            window.open(siteConfig.customFields.discordUrl, '_blank');
        }}
      />
    </div>
  );
}

GithubButton: React.FC<Props> = (props) => {
  const { to, className } = props;
  const history = useHistory();

  return (
    <button
      className={clsx(styles.ButtonContainer, className)}
      onClick={() => {
        if (to.startsWith('http') && !onServer()) {
          window.open(to, '_blank');
          return;
        }
        history.push(to);
      }}>
      <FaGithub className={styles.GithubIcon} />
      <div>GITHUB</div>
    </button>
  );
}

getIcon = icon => {
  switch (icon) {
    case 'Apple':
      return FaApple
    case 'facebook':
      return FaFacebookF
    case 'instagram':
      return FaInstagram
    case 'Soundcloud':
      return FaSoundcloud
    case 'Spotify':
      return FaSpotify
    case 'twitter':
      return FaTwitter
    case 'youtube':
      return FaYoutube
    case 'linkedin':
      return FaLinkedinIn
    case 'github':
      return FaGithub
    default:
      return false
  }
}

function Help() {
  const [showHelp, setShowHelp] = useState(false);

  return (
    <div className="dropdown">
      <button
        className="btn"
        onClick={() => setShowHelp(!showHelp)}
        onBlur={() => setTimeout(() => setShowHelp(false), 150)}
      >
        Help
      </button>
      <div
        className="dropdown-content"
        style={{ display: showHelp ? "block" : "none" }}
      >
        <button className="menu-btn btn">
          Send Feedback
          <p>
            <RiFeedbackLine />
          </p>
        </button>
        <button className="menu-btn btn">
          About Notepad
          <p>
            <AiOutlineInfo />
          </p>
        </button>
        <button
          className="menu-btn btn"
          onClick={() =>
            openLink(new URL("https://github.com/Muhammed-Rahif/Notepad"), {
              newTab: true,
            })
          }
        >
          GitHub
          <p>
            <FaGithub />
          </p>
        </button>
      </div>
    </div>
  );
}

iconMapping: Record<string, IconType> = {
  linkedin: FaLinkedinIn,
  github: FaGithub,
  website: FaGlobe,
}

socialLinks: [string, IconType][] = [
  ['https://fb.com/po8klasie', FaFacebookF],
  ['https://twitter.com/po8klasie', FaTwitter],
  ['https://github.com/po8klasie', FaGithub],
  ['https://linkedin.com/company/po8klasie', FaLinkedinIn],
]

socialLinks: [string, IconType][] = [
  ['https://fb.com/po8klasie', FaFacebookF],
  ['https://twitter.com/po8klasie', FaTwitter],
  ['https://github.com/po8klasie', FaGithub],
  ['https://linkedin.com/company/po8klasie', FaLinkedinIn],
]

maintainers: MaintainerInfo[] = [
  {
    name: 'Ivan Aksamentov',
    portraitUrl: 'https://avatars3.githubusercontent.com/u/9403403?s=400',
    title: 'Senior Software Engineer',
    affiliations: ['NeherLab, Biozentrum, University of Basel', 'Swiss Institute of Bioinformatics'],
    links: [
      {
        title: 'GitHub',
        url: 'https://github.com/ivan-aksamentov',
        alt: 'Link to Github page, with grey Github Octocat logo',
        icon: <FaGithub size={25} color="#24292E" />,
      },
    ],
  },
  {
    name: 'Richard Neher',
    portraitUrl: 'https://avatars3.githubusercontent.com/u/8379168?s=400',
    title: 'Principal Investigator',
    affiliations: ['NeherLab, Biozentrum, University of Basel', 'Swiss Institute of Bioinformatics'],
    links: [
      {
        title: 'Website',
        url: `https://neherlab.org`,
        alt: 'Link to website',
        icon: <GiEarthAfricaEurope size={25} color="#3267E9" />,
      },
      {
        title: 'Twitter',
        url: `https://twitter.com/richardneher`,
        alt: 'Link to Twitter, with blue Twitter bird logo',
        icon: <FaTwitter size={25} color="#08a0e9" />,
      },
      {
        title: 'GitHub',
        url: 'https://github.com/rneher',
        alt: 'Link to Github page, with grey Github Octocat logo',
        icon: <FaGithub size={25} color="#24292E" />,
      },
    ],
  },
  {
    name: 'Cornelius Roemer',
    portraitUrl: 'https://avatars1.githubusercontent.com/u/25161793?v=4',
    title: 'Staff Scientist',
    affiliations: ['NeherLab, Biozentrum, University of Basel', 'Swiss Institute of Bioinformatics'],
    links: [
      {
        title: 'Twitter',
        url: `https://twitter.com/corneliusroemer`,
        alt: 'Link to Twitter, with blue Twitter bird logo',
        icon: <FaTwitter size={25} color="#08a0e9" />,
      },
      {
        title: 'GitHub',
        url: 'https://github.com/corneliusroemer',
        alt: 'Link to Github page, with grey Github Octocat logo',
        icon: <FaGithub size={25} color="#24292E" />,
      },
    ],
  },
]

iconGithub = <FaGithub color="444" size={18} />

export function NavigationBar() {
  const { t } = useTranslation()

  const navLinksRight = useMemo(
    () => [
      {
        title: t('Twitter'),
        url: 'https://twitter.com/nextstrain',
        alt: t('Link to our Twitter'),
        icon: <FaTwitter size={28} color="#aaa" />,
      },
      {
        title: t('Our containers at Docker Hub'),
        url: 'https://hub.docker.com/r/nextstrain/nextclade',
        alt: t('Link to our Docker containers'),
        icon: <FaDocker size={28} color="#aaa" />,
      },
      {
        title: t('GitHub'),
        url: 'https://github.com/nextstrain/nextclade',
        alt: t('Link to our Github page'),
        icon: <FaGithub size={28} color="#aaa" />,
      },
    ],
    [t],
  )

  return (
    <nav
      className="navbar navbar-expand navbar-light navbar-scroll hide-native-scrollbar"
      role="navigation"
      data-testid="NavigationBar"
    >
      <Link className="navbar-brand d-flex" href="/" role="button">
        <BrandLogo className="navigation-bar-product-logo" />
        <NavigationLogo />
      </Link>

      <ul className="navbar-nav ml-auto d-flex">
        <li className="nav-item mx-2 my-auto">
          <CitationButton />
        </li>

        <li className="nav-item mx-2 my-auto">
          <DocsLink />
        </li>

        <li className="nav-item mx-2 my-auto">
          <SettingsButton />
        </li>

        <li className="nav-item mx-2 my-auto">
          <WhatsNewButton />
        </li>

        <li className="nav-item mx-2 my-auto">
          <LanguageSwitcher />
        </li>

        {navLinksRight.map(({ title, url, alt, icon }) => (
          <li key={title} className="nav-item mx-2 my-auto">
            <LinkExternal title={title} url={url} alt={alt}>
              {icon}
            </LinkExternal>
          </li>
        ))}
      </ul>
    </nav>
  )
}

ICON_MAP: Record<ILinkTypes, any> = {
  github: FaGithub,
  twitter: FaTwitter,
  instagram: FaInstagram,
  website: FaGlobe,
}

socmedList: any = [
  { text: "Facebook", icon: <FaFacebookF />, href: "https://www.facebook.com/dhafid.farenza", background: "#4267B2" },
  { text: "Instagram", icon: <FaInstagram />, href: "https://www.instagram.com/dhafitf", background: "#E1306C" },
  { text: "Twitter", icon: <FaTwitter />, href: "https://twitter.com/DhafitF", background: "#1DA1F2" },
  { text: "Github", icon: <FaGithub />, href: "https://github.com/dhafitf", background: "#333333" },
]

function Footer ({size}) {
  const [css, theme] = useStyletron()
  return (
    <div
      className={css({
        backgroundColor: theme.colors.primaryB,
        width: 100,
        paddingTop: theme.sizing.scale800,
        paddingBottom: theme.sizing.scale800,
        boxShadow: 'rgb(0 0 0 / 8%) 0px -1px 0px',
      })}
    >
      <Grid
        behavior={BEHAVIOR.fixed}
        gridGaps={20}
        gridColumns={[6, 6, 12, 12]}
      >
        <Cell
          span={6}
          overrides={{
            Cell: {
              style: {
                display: 'flex !important',
                flexDirection: 'column',
                alignItems: size.width <= 1136 ? 'center' : 'flex-start',
              },
            },
          }}
        >
          <LabelSmall className={css({color: theme.colors.contentPrimary})}>
            {process.env.NEXT_PUBLIC_COPYRIGHT_TEXT}
          </LabelSmall>
          <div style={{marginTop: 10}}>
            { process.env.NEXT_PUBLIC_TWITTER && process.env.NEXT_PUBLIC_TWITTER != "" &&
            <a href={`${process.env.NEXT_PUBLIC_TWITTER}`} target='_blank'>
              <FaTwitter
                style={{width: 30, height: 30}}
                color={theme.colors.contentPrimary}
              />
            </a>
            }
            { process.env.NEXT_PUBLIC_INSTAGRAM && process.env.NEXT_PUBLIC_INSTAGRAM != "" &&
            <a href={`${process.env.NEXT_PUBLIC_INSTAGRAM}`} target='_blank'>
              <FaInstagram
                href={process.env.NEXT_PUBLIC_INSTAGRAM}
                style={{width: 30, height: 30, marginLeft: 10}}
                color={theme.colors.contentPrimary}
              />
            </a>}
            { process.env.NEXT_PUBLIC_GITHUB && process.env.NEXT_PUBLIC_GITHUB != "" &&
              <a href={`${process.env.NEXT_PUBLIC_GITHUB}`} target='_blank'>
              <FaGithub
                style={{width: 30, height: 30, marginLeft: 10}}
                color={theme.colors.contentPrimary}
              />
            </a>}
          </div>
        </Cell>
        <Cell
          span={6}
          overrides={{
            Cell: {
              style: {
                display: 'flex !important',
                flexDirection: 'column',
                alignItems: size.width <= 1136 ? 'center' : 'flex-end',
              },
            },
          }}
        >
          <LabelSmall className={css({color: theme.colors.contentPrimary})}>
            Created with OpenSea whitelable template
          </LabelSmall>
          <div style={{marginTop: 10}} />
          <a
            href='https://github.com/nawangwe/opensea-whitelabel-website-template'
            target='_blank'
          >
            <FaGithub
              style={{width: 30, height: 30}}
              color={theme.colors.contentPrimary}
            />
          </a>
        </Cell>
      </Grid>
    </div>
  )
}

TeamMember = ({
  fullname,
  image,
  role,
  twitter,
  github,
  linkedin,
  medium,
  css = {},
  ...props
}) => {
  const builder = imageUrlBuilder(client as any);

  return (
    <Box
      css={{
        textAlign: "center",
        borderRadius: 24,
        border: "1px solid $colors$neutral5",
        p: 40,
        bc: "$neutral2",
        display: "flex",
        flexDirection: "column",
        justifyContent: "space-between",
        transition: "box-shadow .15s",
        "&:hover": {
          boxShadow:
            "0px 2px 1px rgba(0, 0, 0, 0.04), 0px 16px 40px rgba(0, 0, 0, 0.04)",
        },
        ...css,
      }}
      {...props}>
      <Box>
        <Box
          as={Image}
          css={{
            borderRadius: 1000,
            objectFit: "cover",
          }}
          width={130}
          height={130}
          src={builder.image(image).url()}
        />
        <Box css={{ mb: "$4" }}>
          <Heading
            as="h3"
            css={{
              mb: "$1",
              mt: "$3",
              fontWeight: 500,
              fontSize: "20px",
            }}>
            {fullname}
          </Heading>
          <Text size="3" variant="gray" css={{ color: "$primary9" }}>
            {role}
          </Text>
        </Box>
      </Box>
      <Flex
        css={{
          maxWidth: 120,
          mx: "auto",
          justifyContent: "center",
          alignItems: "center",
        }}>
        {twitter && (
          <A
            css={{
              "&:not(:last-of-type)": { mr: "$3" },
              color: "$hiContrast",
              fontSize: "$3",
              transition: "color .15s",
              "&:hover": { color: "$violet9" },
            }}
            href={twitter}
            target="_blank"
            rel="noopener noreferrer">
            <FaTwitter />
          </A>
        )}
        {linkedin && (
          <A
            css={{
              "&:not(:last-of-type)": { mr: "$3" },
              color: "$hiContrast",
              fontSize: "$3",
              transition: "color .15s",
              "&:hover": { color: "$violet9" },
            }}
            href={linkedin}
            target="_blank"
            rel="noopener noreferrer">
            <FaLinkedin />
          </A>
        )}
        {medium && (
          <A
            css={{
              "&:not(:last-of-type)": { mr: "$3" },
              color: "$hiContrast",
              fontSize: "$3",
              transition: "color .15s",
              "&:hover": { color: "$violet9" },
            }}
            href={medium}
            target="_blank"
            rel="noopener noreferrer">
            <FaMedium />
          </A>
        )}
        {github && (
          <A
            css={{
              "&:not(:last-of-type)": { mr: "$3" },
              color: "$hiContrast",
              fontSize: "$3",
              transition: "color .15s",
              "&:hover": { color: "$violet9" },
            }}
            href={github}
            target="_blank"
            rel="noopener noreferrer">
            <FaGithub />
          </A>
        )}
      </Flex>
    </Box>
  );
}

HomeView = (props: Props) => {
  const history = useHistory();
  const sampleQueries = getSampleQueries();
  const [isLoadingStats, setIsLoadingStats] = useState(false);
  const [stats, setStats] = useState<Stats | null>(null);
  const [openTips, setOpenTips] = useState<boolean>(false);

  const whiteLabel = isWhiteLabel();

  useEffect(() => {
    setIsLoadingStats(true);
    async function fetchStats() {
      try {
        setStats(await API.getStats());
      } catch {
        setStats(null);
      } finally {
        setIsLoadingStats(false);
      }
    }
    fetchStats();
  }, []);

  useEffect(() => {
    if (props.onOauthFailed) {
      history.replace({
        pathname: '/',
        search: '',
      });
      alertDispatcher.postAlert({
        type: 'danger',
        message: 'Authentication process failed. Please try again later.',
        autoClose: false,
      });
    }
  }, [props.onOauthFailed, history]);

  return (
    <div className="d-flex flex-column flex-grow-1 bg-white home">
      <div className={`jumbotron mb-0 text-center border-0 ${styles.jumbotron}`}>
        <div
          role="banner"
          aria-label="Find, install and publisher Kubernetes packages"
          className={`display-4 text-center fw-light d-block d-xxl-flex justify-content-center noFocus ${styles.mainTitle}`}
          id="content"
          tabIndex={-1}
        >
          Find, install and publish
          <br />
          <span className={styles.secondLine}>Kubernetes packages</span>
        </div>

        <div className="mt-5 text-center">
          <SearchBar
            formClassName={`m-auto w-50 ${styles.search}`}
            size="big"
            isSearching={props.isSearching}
            openTips={openTips}
            setOpenTips={setOpenTips}
          />
          <SearchTipsModal size="big" openTips={openTips} setOpenTips={setOpenTips} />
          <SearchTip />

          <div className="d-inline-block d-md-none text-center mt-3">
            - or -
            <Link
              className={`btn btn-link textLighter fw-bold py-0 pb-1 ps-1 ${styles.allPkgBtn}`}
              to={{
                pathname: '/packages/search',
              }}
              aria-label="Browse all packages"
            >
              browse all packages
            </Link>
          </div>

          <div className="d-none d-md-inline-block text-center mt-5">
            {sampleQueries.length > 0 ? <>You can also </> : <>Or you can also </>}
            <Link
              className="btn btn-link textLighter fw-bold py-0 pb-1 ps-1 pe-0"
              to={{
                pathname: '/packages/search',
              }}
              aria-label="Browse all packages"
            >
              browse all packages
            </Link>{' '}
            {sampleQueries.length > 0 ? (
              <span className="ms-3">
                - or - <span className="ms-3">try one of the sample queries:</span>
              </span>
            ) : (
              <>.</>
            )}
          </div>

          <div className="d-none d-md-flex flex-row align-items-end justify-content-center flex-wrap">
            <SampleQueries lineBreakIn={3} className="bg-secondary border-light" />
          </div>
        </div>

        <div className="d-flex align-items-center justify-content-center mt-4 mt-md-5">
          <Counter isLoading={isLoadingStats} value={isNull(stats) ? null : stats.packages} name="packages" />
          <div className={`mx-3 mx-md-5 separator ${styles.separator}`} />
          <Counter isLoading={isLoadingStats} value={isNull(stats) ? null : stats.releases} name="releases" />
        </div>

        {!whiteLabel && (
          <>
            <div className={`text-center h5 my-4 mt-md-5 ${styles.legend}`}>
              Artifact Hub is an <b>Open Source</b> project
            </div>

            <div className="d-flex flex-row align-items-center justify-content-center flex-wrap">
              <ExternalLink
                className={`btn btn-secondary mb-4 mb-md-2 ${styles.socialBtn}`}
                href="https://github.com/artifacthub/hub"
                label="Open GitHub link"
              >
                <div className="d-flex align-items-center justify-content-center">
                  <FaGithub className="me-2" />
                  GitHub
                </div>
              </ExternalLink>

              <ExternalLink
                className={`btn btn-secondary ms-2 ms-md-3 mb-4 mb-md-2 ${styles.socialBtn}`}
                href="https://cloud-native.slack.com/channels/artifact-hub"
                label="Open Slack channel"
              >
                <div className="d-flex align-items-center justify-content-center">
                  <FaSlack className="me-2" />
                  Slack
                </div>
              </ExternalLink>

              <ExternalLink
                className={`btn btn-secondary ms-2 ms-md-3 mb-4 mb-md-2 ${styles.socialBtn}`}
                href="https://twitter.com/cncfartifacthub"
                label="Open Twitter link"
              >
                <div className="d-flex align-items-center justify-content-center">
                  <FaTwitter className="me-2" />
                  Twitter
                </div>
              </ExternalLink>
            </div>

            <div className={`text-center mx-3 mt-md-4 mb-4 fw-light ${styles.repoGuideText}`}>
              Please see the{' '}
              <ExternalLink
                className={`btn btn-link text-light fw-bold textLight p-0 align-baseline ${styles.inlineLink}`}
                href="/docs/topics/repositories"
                label="Open documentation"
              >
                repositories guide
              </ExternalLink>{' '}
              for more information about how to list your content on Artifact Hub.
            </div>
          </>
        )}
      </div>

      <RandomPackages />

      {!whiteLabel && (
        <>
          <div className={`py-5 textLight fs-4 fw-light ${styles.about}`}>
            <div className="container-lg px-4 px-sm-0 py-0 py-md-5">
              <div className="text-center px-3 px-xs-0">
                Artifact Hub is a web-based application that enables finding, installing, and publishing packages and
                configurations for CNCF projects. For example, this could include Helm charts and plugins, Falco
                configurations, Open Policy Agent (OPA) policies, OLM operators, Tinkerbell actions, kubectl plugins,
                Tekton tasks and pipelines, KEDA scalers, CoreDNS plugins, Keptn integrations and container images.
                <div className="mx-0 mx-md-3 mx-lg-5 my-4 my-sm-5 d-flex flex-row align-items-stretch justify-content-around">
                  <ExternalLink href="https://helm.sh" className={`col ${styles.iconLink}`} label="Open Helm site">
                    <div className="d-flex flex-column justify-content-between align-items-center h-100">
                      <RepositoryIcon kind={RepositoryKind.Helm} type="white" className={styles.aboutIcon} />
                      <div className={`d-none d-sm-block text-light mt-2 ${styles.legendIcon}`}>
                        <small className="text-nowrap">Helm charts and plugins</small>
                      </div>
                    </div>
                  </ExternalLink>
                  <ExternalLink href="https://falco.org" className={`col ${styles.iconLink}`} label="Open Falco site">
                    <div className="d-flex flex-column justify-content-between align-items-center h-100">
                      <RepositoryIcon kind={RepositoryKind.Falco} type="white" className={styles.aboutIcon} />
                      <div className={`d-none d-sm-block text-light mt-2 ${styles.legendIcon}`}>
                        <small>Falco rules</small>
                      </div>
                    </div>
                  </ExternalLink>
                  <ExternalLink
                    href="https://www.openpolicyagent.org"
                    className={`col ${styles.iconLink}`}
                    label="Open Open Policy Agent site"
                  >
                    <div className="d-flex flex-column justify-content-between align-items-center h-100">
                      <RepositoryIcon kind={RepositoryKind.OPA} type="white" className={styles.aboutIcon} />
                      <div className={`d-none d-sm-block text-light mt-2 ${styles.legendIcon}`}>
                        <small>OPA policies</small>
                      </div>
                    </div>
                  </ExternalLink>
                  <ExternalLink
                    href="https://github.com/operator-framework"
                    className={`col ${styles.iconLink}`}
                    label="Open Operator framework site"
                  >
                    <div className="d-flex flex-column justify-content-between align-items-center h-100">
                      <RepositoryIcon kind={RepositoryKind.OLM} type="white" className={styles.aboutIcon} />
                      <div className={`d-none d-sm-block text-light mt-2 ${styles.legendIcon}`}>
                        <small>OLM operators</small>
                      </div>
                    </div>
                  </ExternalLink>
                  <ExternalLink
                    href="https://tinkerbell.org"
                    className={`col ${styles.iconLink}`}
                    label="Open Tinkerbell site"
                  >
                    <div className="d-flex flex-column justify-content-between align-items-center h-100">
                      <RepositoryIcon kind={RepositoryKind.TBAction} type="white" className={styles.aboutIcon} />
                      <div className={`d-none d-sm-block text-light mt-2 ${styles.legendIcon}`}>
                        <small>Tinkerbell actions</small>
                      </div>
                    </div>
                  </ExternalLink>
                  <ExternalLink
                    href="https://krew.sigs.k8s.io"
                    className={`col ${styles.iconLink}`}
                    label="Open Krew site"
                  >
                    <div className="d-flex flex-column justify-content-between align-items-center h-100">
                      <RepositoryIcon kind={RepositoryKind.Krew} type="white" className={styles.aboutIcon} />
                      <div className={`d-none d-sm-block text-light mt-2 ${styles.legendIcon}`}>
                        <small>Kubectl plugins</small>
                      </div>
                    </div>
                  </ExternalLink>
                </div>
                <div className="mx-0 mx-md-3 mx-lg-5 my-4 my-sm-5 d-flex flex-row align-items-stretch justify-content-around">
                  <ExternalLink href="https://tekton.dev" className={`col ${styles.iconLink}`} label="Open Tekton site">
                    <div className="d-flex flex-column justify-content-between align-items-center h-100">
                      <RepositoryIcon kind={RepositoryKind.TektonTask} type="white" className={styles.aboutIcon} />
                      <div className={`d-none d-sm-block text-light mt-2 ${styles.legendIcon}`}>
                        <small>Tekton tasks and pipelines</small>
                      </div>
                    </div>
                  </ExternalLink>
                  <ExternalLink href="https://keda.sh" className={`col ${styles.iconLink}`} label="Open KEDA site">
                    <div className="d-flex flex-column justify-content-between align-items-center h-100">
                      <RepositoryIcon kind={RepositoryKind.KedaScaler} type="white" className={styles.aboutIcon} />
                      <div className={`d-none d-sm-block text-light mt-2 ${styles.legendIcon}`}>
                        <small>KEDA scalers</small>
                      </div>
                    </div>
                  </ExternalLink>
                  <ExternalLink
                    href="https://coredns.io"
                    className={`col ${styles.iconLink}`}
                    label="Open CoreDNS site"
                  >
                    <div className="d-flex flex-column justify-content-between align-items-center h-100">
                      <RepositoryIcon kind={RepositoryKind.CoreDNS} type="white" className={styles.aboutIcon} />
                      <div className={`d-none d-sm-block text-light mt-2 ${styles.legendIcon}`}>
                        <small>CoreDNS plugins</small>
                      </div>
                    </div>
                  </ExternalLink>

                  <ExternalLink href="https://keptn.sh" className={`col ${styles.iconLink}`} label="Open Keptn site">
                    <div className="d-flex flex-column justify-content-between align-items-center h-100">
                      <RepositoryIcon kind={RepositoryKind.Keptn} type="white" className={styles.aboutIcon} />
                      <div className={`d-none d-sm-block text-light mt-2 ${styles.legendIcon}`}>
                        <small>Keptn integrations</small>
                      </div>
                    </div>
                  </ExternalLink>
                  <ExternalLink
                    href="https://opencontainers.org"
                    className={`col ${styles.iconLink}`}
                    label="Open Container Initiative site"
                  >
                    <div className="d-flex flex-column justify-content-between align-items-center h-100">
                      <RepositoryIcon kind={RepositoryKind.Container} type="white" className={styles.aboutIcon} />
                      <div className={`d-none d-sm-block text-light mt-2 ${styles.legendIcon}`}>
                        <small>Container images</small>
                      </div>
                    </div>
                  </ExternalLink>
                </div>
                Discovering artifacts to use with CNCF projects can be difficult. If every CNCF project that needs to
                share artifacts creates its own Hub this creates a fair amount of repeat work for each project and a
                fractured experience for those trying to find the artifacts to consume. The Artifact Hub attempts to
                solve that by providing a single experience for consumers that any CNCF project can leverage.
              </div>
            </div>
          </div>

          <div className="py-5 text-dark fs-4 fw-light">
            <div className="container-lg px-sm-4 px-lg-0 py-0 py-md-5">
              <div className="text-center px-4 px-xs-0">
                <img
                  className={`${styles.logo} homeLogo`}
                  src="/static/media/cncf-sandbox-horizontal-color.png"
                  alt="Logo CNCF sandbox project"
                />
                <div className="px-3 pt-4">
                  Artifact Hub is a{' '}
                  <ExternalLink
                    href="https://www.cncf.io/sandbox-projects/"
                    className="fw-bold text-dark"
                    label="Open CNCF sandbox projects site"
                  >
                    Cloud Native Computing Foundation
                  </ExternalLink>{' '}
                  sandbox project.
                </div>
              </div>
            </div>
          </div>
        </>
      )}

      <UserConfirmation emailCode={props.emailCode} />
      <AccountDeletion code={props.deleteCode} />
      <UserInvitation orgToConfirm={props.orgToConfirm} />
      <ResetPasswordModal code={props.resetPwdCode} />
    </div>
  );
}

Footer = (props: Props) => {
  const whiteLabel = isWhiteLabel();

  return (
    <footer
      role="contentinfo"
      className={classnames('position-relative text-white', styles.footer, {
        [styles.invisibleFooter]: props.isHidden,
      })}
    >
      <div className={styles.mainFooter}>
        <div className={classnames('container-lg px-4', { invisible: props.isHidden })}>
          {!whiteLabel ? (
            <>
              <div
                className={`d-flex flex-row flex-wrap align-items-stretch justify-content-between ${styles.footerContent}`}
              >
                <div>
                  <div className="h6 fw-bold text-uppercase">Project</div>
                  <div className="d-flex flex-column text-start">
                    <ExternalLink
                      className={`mb-1 ${styles.link}`}
                      href="/docs"
                      label="Open documentation"
                      target="_self"
                    >
                      Documentation
                    </ExternalLink>
                    <ExternalLink
                      className={`mb-1 ${styles.link}`}
                      href="https://blog.artifacthub.io/blog/"
                      label="Open blog"
                    >
                      Blog
                    </ExternalLink>
                    <Link
                      className={`mb-1 ${styles.link}`}
                      to={{
                        pathname: '/stats',
                      }}
                    >
                      Statistics
                    </Link>
                  </div>
                </div>

                <div>
                  <div className="h6 fw-bold text-uppercase">Community</div>
                  <div className="d-flex flex-column text-start">
                    <ExternalLink
                      className={`mb-1 ${styles.link}`}
                      href="https://github.com/artifacthub/hub"
                      label="Open GitHub"
                    >
                      <div className="d-flex align-items-center">
                        <FaGithub className="me-2" />
                        GitHub
                      </div>
                    </ExternalLink>
                    <ExternalLink
                      className={`mb-1 ${styles.link}`}
                      href="https://cloud-native.slack.com/channels/artifact-hub"
                      label="Open Slack channel"
                    >
                      <div className="d-flex align-items-center">
                        <FaSlack className="me-2" />
                        Slack
                      </div>
                    </ExternalLink>
                    <ExternalLink
                      className={`mb-1 ${styles.link}`}
                      href="https://twitter.com/cncfartifacthub"
                      label="Open Twitter"
                    >
                      <div className="d-flex align-items-center">
                        <FaTwitter className="me-2" />
                        Twitter
                      </div>
                    </ExternalLink>
                  </div>
                </div>

                <div className={styles.fullMobileSection}>
                  <div className="h6 fw-bold text-uppercase">About</div>
                  <div className={styles.copyrightContent}>
                    Artifact Hub is an <b className="d-inline-block">Open Source</b> project licensed under the{' '}
                    <ExternalLink
                      className={`d-inline-block mb-1 ${styles.linkInText}`}
                      href="https://www.apache.org/licenses/LICENSE-2.0"
                      label="Open Apache License 2.0 documentation"
                    >
                      <div className="d-flex align-items-center">
                        Apache License 2.0
                        <span className={styles.smallIcon}>
                          <FiExternalLink className="ms-1" />
                        </span>
                      </div>
                    </ExternalLink>
                  </div>
                </div>

                <div className={`ms-0 ms-lg-auto mt-3 mt-lg-0 text-center ${styles.fullMobileSection}`}>
                  <div className="d-flex flex-column align-items-center h-100">
                    <div className={styles.hexagon}>
                      <FiHexagon />
                    </div>
                    <div className="mt-2 mt-lg-4">
                      <small>
                        <span className="d-none d-sm-inline me-1">Copyright</span>© The Artifact Hub Authors
                      </small>
                    </div>
                  </div>
                </div>
              </div>
            </>
          ) : (
            <ExternalLink href="https://artifacthub.io" label="Artifact Hub site">
              <div className="d-flex flex-column align-items-center">
                <small className="mb-2 text-light">Powered by</small>
                <img
                  className={styles.AHlogo}
                  src="https://artifacthub.io/static/media/logo/artifacthub-brand-white.svg"
                  alt="Logo Artifact Hub"
                />
              </div>
            </ExternalLink>
          )}
        </div>
      </div>
      {!whiteLabel && (
        <div className={`text-center py-2 px-3 px-md-4 ${styles.trademark} trademark`}>
          <small className="opacity-75">
            © 2022{' '}
            <ExternalLink className="opacity-100 text-white" href="https://linuxfoundation.org/">
              The Linux Foundation
            </ExternalLink>
            . All rights reserved. The Linux Foundation has registered trademarks and uses trademarks. For a list of
            trademarks of The Linux Foundation, please see our{' '}
            <ExternalLink className="opacity-100 text-white" href="https://linuxfoundation.org/trademark-usage">
              Trademark Usage
            </ExternalLink>{' '}
            page.
          </small>
        </div>
      )}
    </footer>
  );
}

export default function TopNav() {
  const { isOpen, onOpen, onClose } = useDisclosure();

  const menuProps = {
    bg: useColorModeValue("gray.200", "gray.900"),
    color: useColorModeValue("blue.500", "blue.200")
  };

  return (
    <>
      <Box bg={useColorModeValue("white", "gray.700")} px={4} boxShadow={"lg"}>
        <Flex
          h={16}
          alignItems={"center"}
          justifyContent={"space-between"}
          w={["90%", "85%", "80%"]}
          maxW={800}
          mx="auto"
        >
          <IconButton
            size={"md"}
            icon={isOpen ? <AiOutlineClose /> : <GiHamburgerMenu />}
            aria-label={"Open Menu"}
            display={["inherit", "inherit", "none"]}
            onClick={isOpen ? onClose : onOpen}
          />
          <HStack spacing={8} alignItems={"center"}>
            <Box>
              <Avatar
                as={Link}
                size={"sm"}
                href={"/portfolio"}
                src={UserIcon}
                // src={"https://avatars2.githubusercontent.com/u/37842853?v=4"}
              />
            </Box>
            <HStack
              as={"nav"}
              spacing={4}
              display={{ base: "none", md: "flex" }}
            >
              {webLinks.map((link, index) => (
                <NavLink
                  key={index}
                  name={link.name}
                  path={link.path}
                  onClose={onClose}
                />
              ))}
              <Menu isLazy>
                <MenuButton
                  as={Button}
                  variant="ghost"
                  size="sm"
                  px={2}
                  py={1.5}
                  fontSize={"1em"}
                  rounded={"md"}
                  height={"auto "}
                  _hover={menuProps}
                  _expanded={menuProps}
                  _focus={{ boxShadow: "outline" }}
                  rightIcon={<BiChevronDown size={18} />}
                >
                  Links
                </MenuButton>
                <MenuList zIndex={5}>
                  <Link as={RouterNavLink} to="/tech-stack">
                    <MenuItem>
                      <HStack>
                        <Icon
                          as={AiTwotoneThunderbolt}
                          size={18}
                          color={useColorModeValue("blue.500", "blue.200")}
                        />
                        <Text>Tech Stack</Text>
                      </HStack>
                    </MenuItem>
                  </Link>
                  <Link as={RouterNavLink} to="/open-source">
                    <MenuItem>
                      <HStack>
                        <Icon
                          as={BsBook}
                          size={18}
                          color={useColorModeValue("blue.500", "blue.200")}
                        />
                        <Text>Open Source</Text>
                      </HStack>
                    </MenuItem>
                  </Link>
                  <Link as={RouterNavLink} to="/story-timeline">
                    <MenuItem>
                      <HStack>
                        <Icon
                          as={MdTimeline}
                          size={18}
                          color={useColorModeValue("blue.500", "blue.200")}
                        />
                        <Text>Developer Story</Text>
                      </HStack>
                    </MenuItem>
                  </Link>
                  <Link as={RouterNavLink} to="/achievements">
                    <MenuItem>
                      <HStack>
                        <Icon
                          as={BsCheckCircle}
                          size={18}
                          color={useColorModeValue("blue.500", "blue.200")}
                        />
                        <Text>Achievements</Text>
                      </HStack>
                    </MenuItem>
                  </Link>
                </MenuList>
              </Menu>
            </HStack>
          </HStack>
          <Flex alignItems={"center"}>
            <IconButton
              as={Link}
              href={"https://github.com/MA-Ahmad"}
              size={"md"}
              icon={<FaGithub />}
              aria-label={"Github account"}
              bg={useColorModeValue("white", "gray.700")}
              _hover={{
                textDecoration: "none",
                bg: useColorModeValue("gray.200", "gray.900")
              }}
            />
            <ColorModeSwitcher justifySelf="flex-end" />
          </Flex>
        </Flex>

        {isOpen ? (
          <Box
            pb={4}
            w={["100%", "100%", "80%"]}
            maxW={800}
            display={["inherit", "inherit", "none"]}
          >
            <Stack as={"nav"} spacing={4}>
              {mobileLinks.map((link, index) => (
                <NavLink
                  index={index}
                  name={link.name}
                  path={link.path}
                  onClose={onClose}
                />
              ))}
            </Stack>
          </Box>
        ) : null}
      </Box>
    </>
  );
}

export function PageFooter() {
  return (
    <SimpleGrid
      flexDirection="column-reverse"
      gridTemplateColumns={["1fr", "1fr", "1fr 1fr", "1fr 1fr"]}
      borderTopWidth={2}
      mt="30px"
      borderTopColor="gray.900"
      pt="20px"
    >
      <Box d={["block", "block", "none", "none"]} mb="30px">
        <FooterSignup />
      </Box>
      <Box>
        <SimpleGrid columns={[1, 1, 2, 2]}>
          <Stack mb={["10px", "10px", 0, 0]}>
            <Text as="span">
              <ExternalFooterLink
                href={`mailto:${siteConfig.author.email}`}
                text="Contact us"
              />
            </Text>
            <Text as="span">
              <ExternalFooterLink
                href={siteConfig.repo.url}
                text="Contribute"
              />
            </Text>
            <Text as="span">
              <InternalFooterLink
                href="/projects"
                text="Open source projects"
              />
            </Text>
          </Stack>
          <Stack>
            <Text as="span">
              <Popover placement="top">
                <PopoverTrigger>
                  <Text
                    as="span"
                    _focus={{ outline: "none", boxShadow: "none" }}
                    fontWeight={500}
                    color="gray.500"
                    cursor="pointer"
                    _hover={{ color: "gray.600", textDecoration: "none" }}
                  >
                    Social Accounts
                  </Text>
                </PopoverTrigger>
                <Portal>
                  <PopoverContent>
                    <PopoverArrow />
                    <PopoverCloseButton />
                    <PopoverBody>
                      <Stack
                        as="footer"
                        isInline
                        spacing={[1, 2]}
                        justifyContent="center"
                        alignItems="center"
                      >
                        <ExternalSocialLink
                          href={siteConfig.author.github}
                          icon={<FaGithub />}
                          type="gray"
                          label="Github Account"
                        />
                        <ExternalSocialLink
                          href={siteConfig.author.dev}
                          icon={<FaDev />}
                          type="gray"
                          label="Dev Account"
                        />
                        <ExternalSocialLink
                          href={siteConfig.author.linkedin}
                          icon={<FaLinkedin />}
                          type="linkedin"
                          label="LinkedIn Account"
                        />
                        <ExternalSocialLink
                          href={siteConfig.author.twitter}
                          icon={<FaTwitter />}
                          type="twitter"
                          label="Twitter Account"
                        />
                        <ExternalSocialLink
                          href={siteConfig.author.quora}
                          icon={<FaQuora />}
                          type="red"
                          label="Quora Account"
                        />
                      </Stack>
                    </PopoverBody>
                  </PopoverContent>
                </Portal>
              </Popover>
            </Text>

            <Text as="span">
              <ExternalFooterLink
                href={`mailto:${siteConfig.author.email}`}
                text="Sponsor"
              />
            </Text>
            <Text as="span">
              <ExternalFooterLink
                href={"/#faqs"}
                isExternal={false}
                text="FAQs"
              />
            </Text>
          </Stack>
        </SimpleGrid>
        <Text mt="20px" color="gray.500">
          Made with ? by{" "}
          <ChakraLink
            _focus={{ boxShadow: "none", outline: "none" }}
            target="_blank"
            href={siteConfig.author.github}
            fontWeight={600}
            color={"gray.400"}
            bgClip="text"
            bgGradient="linear(to-l, #7928CA,#FF0080)"
            _hover={{
              bgGradient: "linear(to-r, red.500, yellow.500)"
            }}
          >
            Muhammad Ahmad
          </ChakraLink>{" "}
        </Text>
      </Box>
      <Box d={["none", "none", "block", "block"]}>
        <FooterSignup />
      </Box>
    </SimpleGrid>
  );
}