4byte.sourcify.dev/src/components/Header.tsx at fc137fe2e26c0f84fb388cd34f82c56eb33feb3f · sourcifyeth/4byte.sourcify.dev · GitHub

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
"use client";

import Image from "next/image";
import Link from "next/link";
import { FaGithub } from "react-icons/fa";
import { FiExternalLink, FiMenu, FiX } from "react-icons/fi";
import { useState } from "react";

function MobileMenu() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="md:hidden text-gray-600 hover:text-cerulean-blue-400 transition-colors"
      >
        {isOpen ? <FiX className="w-6 h-6" /> : <FiMenu className="w-6 h-6" />}
      </button>

      {isOpen && (
        <div className="absolute top-full left-0 right-0 bg-white shadow-lg border-t border-gray-200 md:hidden z-50">
          <div className="flex flex-col p-4 gap-4">
            <Link
              href="/import"
              className="text-gray-600 hover:text-cerulean-blue-400 transition-colors font-medium"
              onClick={() => setIsOpen(false)}
            >
              Import/Submit Signatures
            </Link>
            <Link
              href="https://api.openchain.xyz"
              target="_blank"
              rel="noopener noreferrer"
              className="text-gray-600 hover:text-cerulean-blue-400 transition-colors font-medium flex items-center gap-2"
              onClick={() => setIsOpen(false)}
            >
              API
              <FiExternalLink className="w-3 h-3" />
            </Link>
            <Link
              href="https://docs.sourcify.dev/docs/api/"
              target="_blank"
              rel="noopener noreferrer"
              className="text-gray-600 hover:text-cerulean-blue-400 transition-colors font-medium flex items-center gap-2"
              onClick={() => setIsOpen(false)}
            >
              Docs
              <FiExternalLink className="w-3 h-3" />
            </Link>
            <Link
              href="https://github.com/sourcifyeth/4byte.sourcify.dev"
              target="_blank"
              rel="noopener noreferrer"
              className="text-gray-600 hover:text-cerulean-blue-400 transition-colors flex items-center gap-2"
              onClick={() => setIsOpen(false)}
            >
              <FaGithub className="w-5 h-5" />
              GitHub
            </Link>
          </div>
        </div>
      )}
    </>
  );
}

export default function Header() {
  return (
    <>
      {/* Migration Banner */}
      <div className="bg-cerulean-blue-600 text-white py-3 px-4 text-center">
        <div className="max-w-[100rem] mx-auto">
          <p className="text-sm md:text-base">
            📢 <strong>Migration Notice:</strong> Sourcify is taking over{" "}
            <a
              href="https://openchain.xyz"
              target="_blank"
              rel="noopener noreferrer"
              className="text-white hover:text-cerulean-blue-200 underline"
            >
              openchain.xyz
            </a>{" "}
            API . Please switch to <strong>api.4byte.sourcify.dev</strong> (same API).
          </p>
        </div>
      </div>

      <header className="shadow-sm relative">
        <div className="mx-auto py-4 flex items-center justify-between w-full max-w-[100rem] px-6 md:px-12 lg:px-12 xl:px-24">
          <Link href="https://sourcify.dev" target="_blank" rel="noopener" className="flex items-center">
            <Image src="/sourcify.png" alt="Sourcify Logo" className="h-10 w-auto mr-3" width={32} height={32} />
            <span className="text-gray-700 font-vt323 text-2xl">sourcify.eth</span>
          </Link>

          {/* Desktop Menu */}
          <div className="hidden md:flex items-center gap-8">
            <Link href="/import" className="text-gray-600 hover:text-cerulean-blue-400 transition-colors font-medium">
              Import/Submit Signatures
            </Link>
            <Link
              href="https://sourcify.dev"
              target="_blank"
              rel="noopener noreferrer"
              className="text-gray-600 hover:text-cerulean-blue-400 transition-colors font-medium flex items-center gap-1"
            >
              sourcify.dev
              <FiExternalLink className="w-3 h-3" />
            </Link>
            <Link
              href="https://docs.sourcify.dev/docs/api/"
              target="_blank"
              rel="noopener noreferrer"
              className="text-gray-600 hover:text-cerulean-blue-400 transition-colors font-medium flex items-center gap-1"
            >
              API
              <FiExternalLink className="w-3 h-3" />
            </Link>
            <Link
              href="https://docs.sourcify.dev/docs/repository/signature-database"
              target="_blank"
              rel="noopener noreferrer"
              className="text-gray-600 hover:text-cerulean-blue-400 transition-colors font-medium flex items-center gap-1"
            >
              Docs
              <FiExternalLink className="w-3 h-3" />
            </Link>
            <Link
              href="https://github.com/sourcifyeth/4byte.sourcify.dev"
              target="_blank"
              rel="noopener noreferrer"
              className="text-gray-600 hover:text-cerulean-blue-400 transition-colors"
            >
              <FaGithub className="w-6 h-6" />
            </Link>
          </div>

          {/* Mobile Menu */}
          <MobileMenu />
        </div>
      </header>
    </>
  );
}