Socialify

Folder ..

Viewing header.tsx 
54 lines (46 loc) • 1.1 KB

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
import Link from 'next/link'
import { SiGithub } from 'react-icons/si'

const Header = () => {
  return (
    <header>
      <div className="navbar">
        <div className="flex-1">
          <Link
            className="btn btn-ghost text-primary-content normal-case text-xl"
            href="/">
            <SiGithub className="w-8 h-8" />
            &nbsp; Socialify
          </Link>
        </div>
      </div>

      <style jsx>{`
        .github-svg:hover .octo-arm {
          animation: octocat-wave 560ms ease-in-out;
        }

        @keyframes octocat-wave {
          0%,
          100% {
            transform: rotate(0);
          }

          20%,
          60% {
            transform: rotate(-25deg);
          }

          40%,
          80% {
            transform: rotate(10deg);
          }
        }

        @media (max-width: 500px) {
          .github-svg:hover .octo-arm {
            animation: none;
          }

          .github-svg .octo-arm {
            animation: octocat-wave 560ms ease-in-out;
          }
        }
      `}</style>
    </header>
  )
}

export default Header