Skip to content

Commit 0414f26

Browse files
JacobdeanrJacobdeanr
committed
Update formatting on the header
1 parent 49ef72c commit 0414f26

File tree

4 files changed

+85
-48
lines changed

4 files changed

+85
-48
lines changed

‎app/ui/header.tsx

Lines changed: 40 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -22,31 +22,49 @@ interface HeaderProps {
2222
export default function Header({ sort, setSort, query, setQuery }: HeaderProps) {
2323

2424
return (
25-
<header className="sticky top-0 z-40 backdrop-blur-md bg-neutral-900/70 border-b border-neutral-800/60">
26-
<div className="mx-auto max-w-6xl flex items-center justify-between gap-4 px-4 sm:px-6 h-16">
27-
28-
{/* title */}
29-
<h1 className="text-lg md:text-xl xl:text-2xl font-bold tracking-wide whitespace-nowrap select-none min-w-0">
30-
Jacob Robbins&rsquo; <span className="font-light">Skybox&nbsp;Library</span>
25+
<header className="sticky top-0 z-40 bg-gradient-to-r from-neutral-900/95 via-neutral-900/90 to-neutral-900/95 border-b border-neutral-800/50 backdrop-blur-sm">
26+
<div className="mx-auto max-w-[1800px] flex items-center justify-between gap-4 px-4 sm:px-6 h-16">
27+
{/* Clean title with gradient */}
28+
<div className="group">
29+
<h1 className="text-xl md:text-2xl font-bold tracking-tight whitespace-nowrap">
30+
<span className="bg-gradient-to-r from-blue-400 via-purple-400 to-purple-500 bg-clip-text text-transparent">
31+
Jacob Robbins' Skybox Library</span>
3132
</h1>
33+
</div>
3234

33-
{/* right-side cluster */}
34-
<div className="flex justify-end items-center gap-2 sm:gap-3">
35-
{/* Search + Sort: Desktop (>= sm) */}
36-
<div className="hidden sm:flex items-center gap-3">
37-
<input
38-
value={query}
39-
onChange={(e) => setQuery(e.target.value)}
40-
placeholder="Search…"
41-
className="
42-
flex-auto min-w-0 max-w-xs
43-
rounded-md bg-neutral-800/70
44-
px-3 py-1.5 text-sm placeholder:text-neutral-500
45-
focus:outline-none focus:ring-2 focus:ring-amber-500
46-
"
47-
/>
35+
{/* Right-side cluster with enhanced search */}
36+
<div className="flex justify-end items-center gap-2 sm:gap-4">
37+
{/* Enhanced Search + Sort */}
38+
<div className="hidden sm:flex items-center gap-3 bg-neutral-800/30 backdrop-blur-sm rounded-xl p-1 border border-neutral-800/50">
39+
<div className="relative flex-1 max-w-md">
40+
<div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
41+
<svg className="h-4 w-4 text-neutral-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
42+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
43+
</svg>
44+
</div>
45+
<input
46+
value={query}
47+
onChange={(e) => setQuery(e.target.value)}
48+
placeholder="Search skyboxes…"
49+
className="block w-full rounded-lg border-0 bg-neutral-800/20 py-2.5 pl-10 pr-4 text-sm text-neutral-200 placeholder-neutral-500 ring-1 ring-inset ring-transparent focus:ring-2 focus:ring-blue-500/50 focus:outline-none transition-all duration-200 hover:bg-neutral-800/40"
50+
/>
51+
{query && (
52+
<button
53+
onClick={() => setQuery('')}
54+
className="absolute inset-y-0 right-0 flex items-center pr-3 text-neutral-500 hover:text-neutral-300 transition-colors"
55+
>
56+
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
57+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
58+
</svg>
59+
</button>
60+
)}
61+
</div>
62+
63+
<div className="h-6 w-px bg-neutral-700/50" />
64+
65+
{/* Sort */}
4866
{/* SortSelect visible md and up */}
49-
<div className="hidden md:block">
67+
<div className="hidden md:block w-48">
5068
<SortSelect value={sort} onChange={setSort} />
5169
</div>
5270
</div>

‎app/ui/iconlink.tsx

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,22 +19,27 @@ export default function IconLink({ href, label, svg, menuMode = false }: IconLin
1919
className={`
2020
${menuMode
2121
? 'flex items-center gap-3 w-full px-3 py-2 text-sm text-neutral-200 hover:bg-neutral-800'
22-
: 'flex-none w-8 h-8 flex items-center justify-center p-2 rounded-md bg-neutral-800/70 hover:bg-neutral-800'
22+
: 'inline-flex items-center justify-center w-10 h-10 p-2 rounded-lg bg-neutral-800/50 hover:bg-neutral-800/70 border border-neutral-700/50 transition-colors'
2323
}
24-
focus:outline-none focus:ring-2 focus:ring-amber-500 transition-colors
24+
focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-transparent
2525
`}
2626
>
27-
<div className="flex items-center justify-center">
27+
<div className="relative w-full h-full flex items-center justify-center">
2828
<Image
2929
src={svg}
3030
alt=""
31-
width={24}
32-
height={24}
33-
className="object-contain max-w-full max-h-full"
31+
width={20}
32+
height={20}
33+
className="object-contain w-full h-full"
34+
style={{
35+
maxWidth: '100%',
36+
maxHeight: '100%',
37+
aspectRatio: '1/1'
38+
}}
3439
/>
3540
</div>
3641
{/* Show label only in menu mode */}
37-
{menuMode && <span className="flex-grow">{label}</span>}
42+
{menuMode && <span className="flex-grow ml-2">{label}</span>}
3843
</a>
3944
);
4045
}

‎app/ui/meta.tsx

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { ParamSection, ParamRow } from './parametersections';
33
type Props = {
44
author?: string;
55
publishDate?: string;
6-
categories?: string[];
76
timeOfDay?: string;
87
weatherCondition?: string;
98
description?: string;
@@ -12,7 +11,6 @@ type Props = {
1211
export default function Meta({
1312
author,
1413
publishDate,
15-
categories,
1614
timeOfDay,
1715
weatherCondition,
1816
description,
@@ -32,11 +30,6 @@ type Props = {
3230
{publishDate}
3331
</ParamRow>
3432
)}
35-
{/*categories?.length && (
36-
<ParamRow label="Categories">
37-
{categories.join(', ')}
38-
</ParamRow>
39-
)*/}
4033
</ParamSection>
4134
</>
4235
);

‎app/ui/sort-select.tsx

Lines changed: 33 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,38 @@ interface SortSelectProps {
99

1010
export default function SortSelect({ value, onChange }: SortSelectProps) {
1111
return (
12-
<select
13-
value={value}
14-
onChange={(e) => onChange(e.target.value as SortOption)}
15-
className="
16-
h-8 rounded-md bg-neutral-800/70
17-
px-2 py-1 text-xs
18-
focus:outline-none focus:ring-2 focus:ring-amber-500
19-
"
20-
>
21-
<option value="time-of-day">Time of Day</option>
22-
<option value="weather-conditions">Weather Conditions</option>
23-
</select>
12+
<div className="relative w-full">
13+
<select
14+
value={value}
15+
onChange={(e) => onChange(e.target.value as SortOption)}
16+
className="
17+
w-full h-10 pl-4 pr-10 appearance-none
18+
rounded-lg bg-neutral-800/50 border border-neutral-700/50
19+
text-sm text-neutral-200
20+
focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-transparent
21+
transition-all duration-200 hover:bg-neutral-800/70
22+
cursor-pointer
23+
"
24+
>
25+
<option value="time-of-day">Sort: Time of Day</option>
26+
<option value="weather-conditions">Sort: Weather Conditions</option>
27+
</select>
28+
<div className="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none">
29+
<svg
30+
className="w-4 h-4 text-neutral-400"
31+
fill="none"
32+
stroke="currentColor"
33+
viewBox="0 0 24 24"
34+
xmlns="http://www.w3.org/2000/svg"
35+
>
36+
<path
37+
strokeLinecap="round"
38+
strokeLinejoin="round"
39+
strokeWidth={2}
40+
d="M19 9l-7 7-7-7"
41+
/>
42+
</svg>
43+
</div>
44+
</div>
2445
);
2546
}

0 commit comments

Comments
 (0)