-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathHeader.tsx
More file actions
122 lines (116 loc) · 3.65 KB
/
Copy pathHeader.tsx
File metadata and controls
122 lines (116 loc) · 3.65 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
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
"use client";
import Link from "next/link";
import Image from "next/image";
import { useConfig } from "@/components/ConfigProvider";
const DefaultLogoIcon = () => (
<svg
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.75"
strokeLinecap="round"
strokeLinejoin="round"
style={{ color: "var(--accent-brand)" }}
>
<path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20" />
</svg>
);
export function Header() {
const config = useConfig();
const { navbar, search } = config;
const homeHref = navbar.homeHref || "/";
return (
<header className="layout-header">
<div className="flex items-center gap-5">
<Link
href={homeHref}
className="flex items-center gap-2.5 font-semibold text-sm tracking-tight no-underline"
style={{ color: "var(--text-000)" }}
>
{navbar.logo ? (
<Image
src={navbar.logo}
alt=""
width={navbar.logoWidth || 20}
height={navbar.logoHeight || 20}
/>
) : (
<DefaultLogoIcon />
)}
{navbar.title}
</Link>
{navbar.links.length > 0 && (
<nav className="hidden md:flex items-center gap-0.5">
{navbar.links.map((link) => (
<Link
key={link.href}
href={link.href}
className="px-2.5 py-1.5 text-xs font-medium rounded-md no-underline transition-colors hover:bg-[rgba(215,211,200,0.06)]"
style={{ color: "var(--text-400)" }}
{...(link.external
? { target: "_blank", rel: "noopener noreferrer" }
: {})}
>
{link.title}
{link.external && (
<svg
className="inline-block ml-1 -mt-px"
width="10"
height="10"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
>
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14L21 3" />
</svg>
)}
</Link>
))}
</nav>
)}
</div>
{search.enabled && (
<button
onClick={() =>
document.dispatchEvent(new CustomEvent("runir:open-search"))
}
className="flex items-center gap-2.5 h-[30px] px-3 text-xs rounded-lg cursor-pointer transition-colors"
style={{
color: "var(--text-400)",
background: "var(--bg-000)",
border: "1px solid var(--border-300)",
}}
>
<svg
width="13"
height="13"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2.5"
strokeLinecap="round"
strokeLinejoin="round"
>
<circle cx="11" cy="11" r="8" />
<path d="m21 21-4.3-4.3" />
</svg>
<span className="hidden sm:inline">Search</span>
<kbd
className="hidden sm:inline-flex items-center gap-px px-1.5 py-px rounded font-mono"
style={{
fontSize: "0.5625rem",
background: "var(--bg-300)",
border: "1px solid var(--border-300)",
color: "var(--text-500)",
}}
>
<span style={{ fontSize: "0.5rem" }}>⌘</span>K
</kbd>
</button>
)}
</header>
);
}