Skip to content

Commit 1946024

Browse files
ken-matsuiken-matsui
authored
chore: improve header UI again (#1041)
1 parent f8cba33 commit 1946024

File tree

3 files changed

+143
-67
lines changed

3 files changed

+143
-67
lines changed

‎app/_components/footer.tsx‎

Lines changed: 63 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,70 @@
1-
import { Link } from "@heroui/react";
1+
import { faGithub } from "@fortawesome/free-brands-svg-icons";
2+
import { faBookOpen, faHeart } from "@fortawesome/free-solid-svg-icons";
3+
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
4+
import { Button, Divider, Link } from "@heroui/react";
25

36
export function Footer() {
47
return (
58
<footer className="container mx-auto max-w-7xl pb-12 px-12">
6-
<div className="flex flex-col justify-center items-center gap-1">
7-
<p className="text-sm text-default-400">
9+
<div className="flex flex-col justify-center items-center gap-4">
10+
{/* Mobile navigation - only shown on small screens */}
11+
<div className="flex sm:hidden gap-4">
12+
<Button
13+
as={Link}
14+
href="https://docs.cabinpkg.com"
15+
isExternal
16+
variant="light"
17+
size="sm"
18+
className="text-default-600 hover:text-primary transition-colors"
19+
startContent={
20+
<FontAwesomeIcon
21+
icon={faBookOpen}
22+
className="text-sm"
23+
/>
24+
}
25+
>
26+
Docs
27+
</Button>
28+
<Button
29+
as={Link}
30+
href="https://github.com/cabinpkg"
31+
isExternal
32+
variant="light"
33+
size="sm"
34+
className="text-default-600 hover:text-primary transition-colors"
35+
startContent={
36+
<FontAwesomeIcon
37+
icon={faGithub}
38+
className="text-sm"
39+
/>
40+
}
41+
>
42+
GitHub
43+
</Button>
44+
<Button
45+
as={Link}
46+
href="https://github.com/sponsors/ken-matsui"
47+
isExternal
48+
color="danger"
49+
variant="flat"
50+
size="sm"
51+
className="font-medium shadow-sm hover:shadow-md transition-shadow"
52+
startContent={
53+
<FontAwesomeIcon
54+
icon={faHeart}
55+
className="text-sm animate-pulse"
56+
/>
57+
}
58+
>
59+
Sponsor
60+
</Button>
61+
</div>
62+
63+
{/* Divider for mobile */}
64+
<Divider className="sm:hidden" />
65+
66+
{/* Copyright */}
67+
<p className="text-sm text-default-400 text-center">
868
© 2018-{new Date().getFullYear()}{" "}
969
<Link
1070
isExternal

‎app/_components/header.tsx‎

Lines changed: 79 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -22,77 +22,93 @@ export function Header() {
2222
maxWidth="full"
2323
position="sticky"
2424
>
25-
<NavbarBrand className="flex-shrink-0">
26-
<NextLink href="/" className="flex items-center gap-2">
25+
{/* Mobile layout */}
26+
<div className="flex sm:hidden w-full items-center gap-4 px-4">
27+
<NextLink href="/" className="flex-shrink-0">
2728
<Logo />
2829
</NextLink>
29-
</NavbarBrand>
30-
31-
{/* Center search - always centered */}
32-
<NavbarContent className="flex-1" justify="center">
33-
<NavbarItem className="w-full max-w-2xl md:max-w-2xl max-w-xs">
30+
<div className="flex-1">
3431
<SearchButton />
35-
</NavbarItem>
36-
</NavbarContent>
32+
</div>
33+
</div>
3734

38-
{/* Right side navigation */}
39-
<NavbarContent className="gap-2 flex-shrink-0" justify="end">
40-
{/* Docs link */}
41-
<NavbarItem>
42-
<Button
43-
as={Link}
44-
href="https://docs.cabinpkg.com"
45-
isExternal
46-
variant="light"
47-
size="sm"
48-
className="text-default-600 hover:text-primary transition-colors min-w-unit-8 sm:min-w-unit-16"
49-
startContent={
50-
<FontAwesomeIcon
51-
icon={faBookOpen}
52-
className="text-sm"
53-
/>
54-
}
55-
>
56-
<span className="hidden sm:inline">Docs</span>
57-
</Button>
58-
</NavbarItem>
35+
{/* Desktop layout */}
36+
<div className="hidden sm:flex w-full items-center">
37+
<NavbarBrand className="flex-shrink-0">
38+
<NextLink href="/" className="flex items-center gap-2">
39+
<Logo />
40+
</NextLink>
41+
</NavbarBrand>
5942

60-
{/* GitHub link */}
61-
<NavbarItem>
62-
<Button
63-
as={Link}
64-
href="https://github.com/cabinpkg"
65-
isExternal
66-
variant="light"
67-
size="sm"
68-
className="text-default-600 hover:text-primary transition-colors"
69-
isIconOnly
70-
aria-label="GitHub Repository"
71-
>
72-
<FontAwesomeIcon icon={faGithub} className="text-lg" />
73-
</Button>
74-
</NavbarItem>
43+
<NavbarContent className="flex-1 justify-center px-4">
44+
<NavbarItem className="w-full max-w-2xl">
45+
<SearchButton />
46+
</NavbarItem>
47+
</NavbarContent>
7548

76-
<NavbarItem>
77-
<Button
78-
as={Link}
79-
href="https://github.com/sponsors/ken-matsui"
80-
isExternal
81-
color="danger"
82-
variant="flat"
83-
size="sm"
84-
className="font-medium shadow-sm hover:shadow-md transition-shadow min-w-unit-8 sm:min-w-unit-16"
85-
startContent={
49+
{/* Right side navigation */}
50+
<NavbarContent className="gap-2 flex-shrink-0" justify="end">
51+
{/* Docs link */}
52+
<NavbarItem>
53+
<Button
54+
as={Link}
55+
href="https://docs.cabinpkg.com"
56+
isExternal
57+
variant="light"
58+
size="sm"
59+
className="text-default-600 hover:text-primary transition-colors"
60+
startContent={
61+
<FontAwesomeIcon
62+
icon={faBookOpen}
63+
className="text-sm"
64+
/>
65+
}
66+
>
67+
Docs
68+
</Button>
69+
</NavbarItem>
70+
71+
{/* GitHub link */}
72+
<NavbarItem>
73+
<Button
74+
as={Link}
75+
href="https://github.com/cabinpkg"
76+
isExternal
77+
variant="light"
78+
size="sm"
79+
className="text-default-600 hover:text-primary transition-colors"
80+
isIconOnly
81+
aria-label="GitHub Repository"
82+
>
8683
<FontAwesomeIcon
87-
icon={faHeart}
88-
className="text-sm animate-pulse"
84+
icon={faGithub}
85+
className="text-lg"
8986
/>
90-
}
91-
>
92-
<span className="hidden sm:inline">Sponsor</span>
93-
</Button>
94-
</NavbarItem>
95-
</NavbarContent>
87+
</Button>
88+
</NavbarItem>
89+
90+
{/* Sponsor link */}
91+
<NavbarItem>
92+
<Button
93+
as={Link}
94+
href="https://github.com/sponsors/ken-matsui"
95+
isExternal
96+
color="danger"
97+
variant="flat"
98+
size="sm"
99+
className="font-medium shadow-sm hover:shadow-md transition-shadow"
100+
startContent={
101+
<FontAwesomeIcon
102+
icon={faHeart}
103+
className="text-sm animate-pulse"
104+
/>
105+
}
106+
>
107+
Sponsor
108+
</Button>
109+
</NavbarItem>
110+
</NavbarContent>
111+
</div>
96112
</Navbar>
97113
);
98114
}

‎biome.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"$schema": "https://biomejs.dev/schemas/2.1.1/schema.json",
2+
"$schema": "https://biomejs.dev/schemas/2.1.3/schema.json",
33
"files": {
44
"includes": ["**", "!.next/**/*", "!graphql/**/*"]
55
},

0 commit comments

Comments
 (0)