Savitha Gollamudi
94 lines
2.8 KiB
JavaScript
94 lines
2.8 KiB
JavaScript
import React, { useEffect, useState } from "react"
|
|
import { StarIcon, RepoForkedIcon } from "@primer/octicons-react"
|
|
import logo from "../images/mdg.png"
|
|
import links from "../constants/page-links"
|
|
import gsap from "gsap"
|
|
import axios from "axios"
|
|
import { Link } from "gatsby"
|
|
|
|
const Header = props => {
|
|
const fetchData = async () => {
|
|
var response = await axios.get(
|
|
"https://api.github.com/repos/rahuldkjain/github-profile-readme-generator"
|
|
)
|
|
|
|
const { stargazers_count, forks_count } = response.data
|
|
|
|
setstats({
|
|
starsCount: stargazers_count,
|
|
forksCount: forks_count,
|
|
})
|
|
}
|
|
|
|
const [stats, setstats] = useState({
|
|
starsCount: 0,
|
|
forksCount: 0,
|
|
})
|
|
|
|
useEffect(() => {
|
|
fetchData()
|
|
setInterval(fetchData, 60000)
|
|
|
|
gsap.set(".star, .fork", {
|
|
transformOrigin: "center",
|
|
})
|
|
gsap.to(".star, .fork", {
|
|
rotateZ: "360",
|
|
duration: 2,
|
|
ease: "elastic.inOut",
|
|
repeat: -1,
|
|
yoyo: true,
|
|
})
|
|
}, [])
|
|
|
|
return (
|
|
<div className="shadow flex items-center justify-center flex-col mb-2 py-2">
|
|
<Link to={links.home}>
|
|
<h1 className="text-base font-bold font-title sm:text-2xl font-medium text-blue-800 flex justify-center items-center flex-col">
|
|
<img
|
|
src={logo}
|
|
className="w-12 h-12"
|
|
alt="github profile markdown generator logo"
|
|
/>
|
|
<div>{props.heading}</div>
|
|
</h1>
|
|
</Link>
|
|
<div className="flex justify-center items-center">
|
|
<a
|
|
href="https://github.com/rahuldkjain/github-profile-readme-generator"
|
|
aria-label="Star rahuldkjain/github-profile-readme-generator on GitHub"
|
|
target="blank"
|
|
className="mr-2"
|
|
>
|
|
<div className="text-xxs sm:text-sm border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center py-1 px-2">
|
|
<StarIcon size={16} id="star-icon" className="px-1 w-6 star" />
|
|
Star this repo
|
|
<span className="github-count px-1 sm:px-2">
|
|
{stats.starsCount}
|
|
</span>
|
|
</div>
|
|
</a>
|
|
<a
|
|
href="https://github.com/rahuldkjain/github-profile-readme-generator/fork"
|
|
aria-label="Fork rahuldkjain/github-profile-readme-generator on GitHub"
|
|
target="blank"
|
|
>
|
|
<div className="text-xxs sm:text-sm border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center py-1 px-2">
|
|
<RepoForkedIcon
|
|
size={16}
|
|
id="fork-icon"
|
|
className="px-1 w-6 fork"
|
|
/>
|
|
Fork on GitHub
|
|
<span className="github-count px-1 sm:px-2">
|
|
{stats.forksCount}
|
|
</span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Header
|