@smbcloud / smbcloud-web
Code Commits Issues Pulls Cloud Agent CI/CD
development
development feature/branding main
tsx 171 lines 6.75 KB
Raw
1 "use client";
2
3 import Link from "next/link";
4 import { ModeToggle } from "./mode-toggle";
5 import { useState } from "react";
6
7 export default function Header() {
8 const [menuOpen, setMenuOpen] = useState(false);
9
10 return (
11 <header className="sticky top-0 z-50 border-b border-slate-200/60 dark:border-white/[0.06] bg-white/80 dark:bg-[#0A0E14]/90 backdrop-blur-md">
12 {/* Announcement banner */}
13 <div className="border-b border-slate-200/60 bg-slate-900 text-white dark:border-white/[0.06] dark:bg-[#11162A]">
14 <div className="mx-auto flex max-w-5xl items-center justify-center px-6 py-2 text-center text-[11px] font-medium tracking-wide text-slate-200 lg:px-8">
15 <Link
16 href="https://console.smbcloud.xyz/signup-mailx"
17 target="_blank"
18 rel="noopener noreferrer"
19 className="transition-colors hover:text-white"
20 >
21 Get a free @smbcloud.xyz inbox with smbCloud MailX →
22 </Link>
23 </div>
24 </div>
25
26 {/* Main nav bar */}
27 <div className="mx-auto max-w-5xl px-6 lg:px-8">
28 <div className="flex h-14 items-center justify-between">
29 {/* Logo */}
30 <Link href="/" className="flex items-center gap-2.5">
31 <div className="flex h-7 w-[38px] items-center justify-center rounded-md bg-indigo-600 text-white">
32 <span className="text-[10px] font-bold tracking-tight leading-none">
33 smb
34 </span>
35 </div>
36 <span className="font-semibold text-slate-900 dark:text-white tracking-tight text-sm">
37 smbCloud
38 </span>
39 </Link>
40
41 {/* Desktop nav */}
42 <nav className="hidden sm:flex items-center gap-6 text-sm font-medium text-slate-500 dark:text-slate-400">
43 <Link
44 href="/auth"
45 className="hover:text-slate-900 dark:hover:text-white transition-colors"
46 >
47 Auth
48 </Link>
49 <Link
50 href="/mail"
51 className="hover:text-slate-900 dark:hover:text-white transition-colors"
52 >
53 Mail
54 </Link>
55 <Link
56 href="https://docs.smbcloud.xyz"
57 target="_blank"
58 rel="noopener noreferrer"
59 className="hover:text-slate-900 dark:hover:text-white transition-colors"
60 >
61 Docs
62 </Link>
63 </nav>
64
65 {/* Right side */}
66 <div className="flex items-center gap-3">
67 <ModeToggle />
68
69 {/* Desktop CTA */}
70 <Link
71 href="https://console.smbcloud.xyz"
72 target="_blank"
73 rel="noopener noreferrer"
74 className="hidden sm:inline-flex items-center rounded-md bg-slate-900 dark:bg-white px-3.5 py-1.5 text-xs font-semibold text-white dark:text-slate-900 hover:bg-slate-700 dark:hover:bg-slate-100 transition-colors"
75 >
76 Create account →
77 </Link>
78
79 {/* Mobile hamburger */}
80 <button
81 type="button"
82 aria-label={menuOpen ? "Close menu" : "Open menu"}
83 aria-expanded={menuOpen}
84 onClick={() => setMenuOpen((open) => !open)}
85 className="sm:hidden flex items-center justify-center rounded-md p-1.5 text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-white/10 transition-colors"
86 >
87 {menuOpen ? (
88 /* X icon */
89 <svg
90 xmlns="http://www.w3.org/2000/svg"
91 width="20"
92 height="20"
93 viewBox="0 0 24 24"
94 fill="none"
95 stroke="currentColor"
96 strokeWidth="2"
97 strokeLinecap="round"
98 strokeLinejoin="round"
99 aria-hidden="true"
100 >
101 <line x1="18" y1="6" x2="6" y2="18" />
102 <line x1="6" y1="6" x2="18" y2="18" />
103 </svg>
104 ) : (
105 /* Hamburger icon */
106 <svg
107 xmlns="http://www.w3.org/2000/svg"
108 width="20"
109 height="20"
110 viewBox="0 0 24 24"
111 fill="none"
112 stroke="currentColor"
113 strokeWidth="2"
114 strokeLinecap="round"
115 strokeLinejoin="round"
116 aria-hidden="true"
117 >
118 <line x1="3" y1="6" x2="21" y2="6" />
119 <line x1="3" y1="12" x2="21" y2="12" />
120 <line x1="3" y1="18" x2="21" y2="18" />
121 </svg>
122 )}
123 </button>
124 </div>
125 </div>
126 </div>
127
128 {/* Mobile dropdown menu */}
129 {menuOpen && (
130 <div className="sm:hidden border-t border-slate-200/60 dark:border-white/[0.06] bg-white dark:bg-[#0A0E14]">
131 <nav className="mx-auto max-w-5xl flex flex-col px-6 py-3 gap-0.5">
132 <Link
133 href="/auth"
134 onClick={() => setMenuOpen(false)}
135 className="flex items-center rounded-md px-3 py-2.5 text-sm font-medium text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-white/10 hover:text-slate-900 dark:hover:text-white transition-colors"
136 >
137 Auth
138 </Link>
139 <Link
140 href="/mail"
141 onClick={() => setMenuOpen(false)}
142 className="flex items-center rounded-md px-3 py-2.5 text-sm font-medium text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-white/10 hover:text-slate-900 dark:hover:text-white transition-colors"
143 >
144 Mail
145 </Link>
146 <Link
147 href="https://docs.smbcloud.xyz"
148 target="_blank"
149 rel="noopener noreferrer"
150 onClick={() => setMenuOpen(false)}
151 className="flex items-center rounded-md px-3 py-2.5 text-sm font-medium text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-white/10 hover:text-slate-900 dark:hover:text-white transition-colors"
152 >
153 Docs
154 </Link>
155 <div className="pt-2 pb-1">
156 <Link
157 href="https://console.smbcloud.xyz"
158 target="_blank"
159 rel="noopener noreferrer"
160 onClick={() => setMenuOpen(false)}
161 className="flex items-center justify-center rounded-md bg-slate-900 dark:bg-white px-4 py-2.5 text-sm font-semibold text-white dark:text-slate-900 hover:bg-slate-700 dark:hover:bg-slate-100 transition-colors"
162 >
163 Create account →
164 </Link>
165 </div>
166 </nav>
167 </div>
168 )}
169 </header>
170 );
171 }