Skip to content

Commit 6632771

Browse files
JacobdeanrJacobdeanr
committed
Added download button
Changed formatting of the modal to include swatches
1 parent b6c7fae commit 6632771

File tree

10 files changed

+226
-103
lines changed

10 files changed

+226
-103
lines changed

‎app/ui/downloadbutton.tsx

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
'use client';
2+
3+
import type { ComponentPropsWithoutRef } from 'react';
4+
5+
interface DownloadButtonProps extends ComponentPropsWithoutRef<'a'> {
6+
label?: string;
7+
format?: string;
8+
size?: string;
9+
}
10+
11+
export default function DownloadButton({
12+
label = 'Download',
13+
format,
14+
size,
15+
className = '',
16+
...anchorProps
17+
}: DownloadButtonProps) {
18+
return (
19+
<a
20+
{...anchorProps}
21+
className={`
22+
inline-flex items-center gap-3
23+
rounded-lg
24+
bg-gradient-to-r from-yellow-400 to-amber-500
25+
px-5 py-2
26+
font-semibold text-neutral-900
27+
shadow-md shadow-black/40
28+
ring-1 ring-inset ring-yellow-500/40
29+
transition
30+
hover:brightness-110 hover:shadow-lg
31+
active:scale-95
32+
${className}
33+
`}
34+
>
35+
<svg
36+
viewBox="0 0 24 24"
37+
aria-hidden="true"
38+
className="w-5 h-5 fill-current shrink-0"
39+
>
40+
<path d="M12 3a1 1 0 0 1 1 1v9.59l2.3-2.3a1 1 0 1 1 1.4 1.42l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 1 1 1.4-1.42L11 13.59V4a1 1 0 0 1 1-1z" />
41+
<path d="M5 19a1 1 0 0 1 1-1h12a1 1 0 1 1 0 2H6a1 1 0 0 1-1-1z" />
42+
</svg>
43+
44+
<span className="whitespace-nowrap">
45+
{label}
46+
{(format || size) && (
47+
<span className="font-normal">
48+
{' '}
49+
( {format ?? ''}
50+
{format && size ? ' • ' : ''}
51+
{size ?? ''}
52+
)
53+
</span>
54+
)}
55+
</span>
56+
</a>
57+
);
58+
}

‎app/ui/fogparameters.tsx

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,22 @@
1+
import { Swatch } from "./swatch";
2+
import { ParamSection, ParamRow } from './parametersections';
3+
14
type Fog = { primaryFogColor?: number[]; secondaryFogColor?: number[] };
25

36
export default function FogParams(f: Fog) {
47
if (!f || (!f.primaryFogColor && !f.secondaryFogColor)) return null;
58
return (
6-
<div className="text-sm text-neutral-400">
7-
<h3 className="font-semibold mb-1 mt-2">Fog Parameters</h3>
8-
<ul className="list-inside space-y-0.5">
9-
{f.primaryFogColor?.length && (
10-
<li>
11-
<span className="font-semibold">Primary Fog Color:</span>{' '}
12-
{f.primaryFogColor.join(' ')}
13-
</li>
9+
<ParamSection title="Fog Parameters">
10+
{f.primaryFogColor?.length && (
11+
<ParamRow label="Primary Fog Color">
12+
<Swatch rgb={f.primaryFogColor!}/>
13+
</ParamRow>
1414
)}
15-
{f.secondaryFogColor?.length && (
16-
<li>
17-
<span className="font-semibold">Secondary Fog Color:</span>{' '}
18-
{f.secondaryFogColor.join(' ')}
19-
</li>
15+
{f.secondaryFogColor?.length && (
16+
<ParamRow label="Secondary Fog Color">
17+
<Swatch rgb={f.secondaryFogColor!}/>
18+
</ParamRow>
2019
)}
21-
</ul>
22-
</div>
20+
</ParamSection>
2321
);
2422
}

‎app/ui/meta.tsx

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { ParamSection, ParamRow } from './parametersections';
2+
13
type Props = {
24
author?: string;
35
publishDate?: string;
@@ -15,24 +17,23 @@ type Props = {
1517
<>
1618
{description && <p className="text-sm text-neutral-300">{description}</p>}
1719

18-
<ul className="text-sm text-neutral-400 space-y-0.5">
19-
{author && (
20-
<li>
21-
<span className="font-semibold">Author:</span> {author}
22-
</li>
23-
)}
20+
<ParamSection title="Metadata">
21+
{/* {author && (
22+
<ParamRow label="Author">
23+
{author}
24+
</ParamRow>
25+
)} */}
2426
{publishDate && (
25-
<li>
26-
<span className="font-semibold">Published:</span> {publishDate}
27-
</li>
27+
<ParamRow label="Published">
28+
{publishDate}
29+
</ParamRow>
2830
)}
29-
{categories?.length && (
30-
<li>
31-
<span className="font-semibold">Categories:</span>{' '}
31+
{/*categories?.length && (
32+
<ParamRow label="Categories">
3233
{categories.join(', ')}
33-
</li>
34-
)}
35-
</ul>
34+
</ParamRow>
35+
)*/}
36+
</ParamSection>
3637
</>
3738
);
3839
}

‎app/ui/modal.tsx

Lines changed: 32 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,16 @@ import { useEffect, useState } from 'react';
33
import Meta from './meta';
44
import SunParams from './sunparameters';
55
import FogParams from './fogparameters';
6-
import MapList from './maplist';
6+
import CommunityMaps from './maplist';
7+
import DownloadButton from './downloadbutton';
78

89
type MapLink = { name: string; url: string };
910
type Meta = {
1011
author?: string; publishDate?: string; categories?: string[]; description?: string;
1112
steamMaps?: MapLink[];
1213
sunParameters?: any;
1314
fogParameters?: any;
15+
fileSize?: string;
1416
};
1517

1618
export default function Modal({ slug, onClose }: { slug: string; onClose: () => void }) {
@@ -26,20 +28,39 @@ export default function Modal({ slug, onClose }: { slug: string; onClose: () =>
2628
<article onClick={e=>e.stopPropagation()} className="w-full max-w-[90vw] sm:max-w-xl md:max-w-2xl lg:max-w-3xl xl:max-w-4xl max-h-[70vh] overflow-y-auto overscroll-contain bg-neutral-900 rounded-lg shadow-xl ring-1 ring-neutral-700/60">
2729
<div className="relative w-full aspect-[16/9]">
2830
<img src={`${imgBase}/previews/1.webp`} alt="" className="absolute inset-0 w-full h-full object-cover" />
31+
<div className="absolute inset-x-0 bottom-0 bg-black/60 backdrop-blur-xs px-3 py-2">
32+
<h2 className="text-xl font-bold">{slug}</h2>
33+
</div>
2934
</div>
3035

31-
<div className="p-4 space-y-4">
32-
<h2 className="text-xl font-bold">{slug}</h2>
36+
{/* ⋯ modal body ⋯ */}
37+
<div
38+
className="
39+
p-6
40+
space-y-8
41+
lg:grid lg:grid-cols-[1fr_auto] lg:gap-12
42+
"
43+
>
3344

34-
<Meta {...meta} />
35-
<SunParams {...meta?.sunParameters} />
36-
<FogParams {...meta?.fogParameters} />
37-
<MapList maps={meta?.steamMaps} />
45+
<div className="space-y-6">
46+
{/* LEFT: all the numeric / textual data */}
47+
<SunParams {...meta?.sunParameters} />
48+
<FogParams {...meta?.fogParameters} />
49+
</div>
3850

39-
<a href={`/Source_Skyboxes_NextJS/skyboxes/${slug}/download/${slug}.7z`} className="underline text-blue-300" download>
40-
Download .7z
41-
</a>
42-
</div>
51+
{/* RIGHT: maps list + CTA — fixed-width column */}
52+
<div className="space-y-6 lg:min-w-[18rem] lg:self-start">
53+
<Meta {...meta} />
54+
<CommunityMaps maps={meta?.steamMaps} />
55+
<DownloadButton
56+
href={`/Source_Skyboxes_NextJS/skyboxes/${slug}/download/${slug}.7z`}
57+
download
58+
format=".7z"
59+
size={meta?.fileSize}
60+
/>
61+
62+
</div>
63+
</div>
4364
</article>
4465
</div>
4566
);

‎app/ui/parametersections.tsx

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { ReactNode } from 'react';
2+
3+
export function ParamSection({
4+
title,
5+
children,
6+
}: {
7+
title: string;
8+
children: ReactNode;
9+
}) {
10+
11+
return (
12+
<section className="mt-6 first:mt-0">
13+
<h4
14+
className="
15+
mb-2
16+
text-xs font-semibold uppercase tracking-wider
17+
text-neutral-400
18+
"
19+
>
20+
{title}
21+
</h4>
22+
23+
<dl
24+
className="
25+
grid grid-cols-[8rem_1fr] /* 8 rem label column */
26+
gap-y-2 gap-x-4
27+
text-[clamp(0.85rem,0.9vw,0.95rem)]
28+
"
29+
>
30+
{children}
31+
</dl>
32+
</section>
33+
34+
);
35+
}
36+
37+
export function ParamRow({
38+
label,
39+
children,
40+
}: {
41+
label: string;
42+
children: ReactNode;
43+
}) {
44+
return (
45+
<>
46+
<dt className="text-neutral-400 font-medium">{label}</dt>
47+
<dd className="text-neutral-100">{children}</dd>
48+
</>
49+
);
50+
}

‎app/ui/sunparameters.tsx

Lines changed: 25 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,37 @@
1+
import { Swatch } from "./swatch";
2+
import { ParamSection, ParamRow } from './parametersections';
3+
14
type Sun = {
25
sunAngle?: string;
36
pitch?: string | number;
47
brightness?: number[];
58
ambience?: number[];
69
};
710

8-
function Swatch({ rgb }: { rgb: number[] }) {
9-
const color = `rgb(${rgb.slice(0, 3).join(',')})`;
11+
export default function SunParams(s: Sun) {
12+
if (!s) return null;
13+
14+
const { sunAngle, pitch, brightness, ambience } = s;
15+
16+
if (!sunAngle && pitch === undefined && !brightness && !ambience) return null;
17+
1018
return (
11-
<span
12-
className="inline-block w-4 h-4 rounded-sm ring-1 ring-neutral-700/50 mr-1 align-middle"
13-
style={{ backgroundColor: color }}
14-
title={color}
15-
/>
16-
);
17-
}
19+
<ParamSection title="Sun Parameters">
20+
{sunAngle && <ParamRow label="Sun Angle">{sunAngle}</ParamRow>}
1821

22+
{pitch !== undefined && <ParamRow label="Pitch">{pitch}</ParamRow>}
1923

20-
export default function SunParams(s: Sun) {
21-
if (!s || (!s.sunAngle && !s.pitch && !s.brightness && !s.ambience)) return null;
22-
23-
return (
24-
<div className="text-sm text-neutral-400">
25-
<h3 className="font-semibold mb-1">Sun Parameters</h3>
26-
<ul className="list-inside space-y-0.5">
27-
{s.sunAngle && (
28-
<li>
29-
<span className="font-semibold">Sun Angle:</span> {s.sunAngle}
30-
</li>
24+
{brightness && (
25+
<ParamRow label="Brightness">
26+
<Swatch rgb={brightness} />
27+
</ParamRow>
3128
)}
32-
33-
{s.pitch !== undefined && (
34-
<li>
35-
<span className="font-semibold">Pitch:</span> {s.pitch}
36-
</li>
37-
)}
38-
39-
{s.brightness?.length && (
40-
<li className="flex items-center">
41-
<span className="font-semibold mr-1">Brightness:</span>
42-
<Swatch rgb={s.brightness} />
43-
{s.brightness.join(' ')}
44-
</li>
45-
)}
46-
47-
{s.ambience?.length && (
48-
<li className="flex items-center">
49-
<span className="font-semibold mr-1">Ambient:</span>
50-
<Swatch rgb={s.ambience} />
51-
{s.ambience.join(' ')}
52-
</li>
29+
30+
{ambience && (
31+
<ParamRow label="Ambient">
32+
<Swatch rgb={ambience} />
33+
</ParamRow>
5334
)}
54-
</ul>
55-
</div>
56-
);
57-
}
35+
</ParamSection>
36+
);
37+
}

‎app/ui/swatch.tsx

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
type SwatchProps = { rgb: number[] };
2+
3+
export function Swatch({ rgb }: SwatchProps) {
4+
const [r, g, b] = rgb;
5+
const color = `rgb(${r},${g},${b})`;
6+
const values = rgb.join(' ');
7+
8+
return (
9+
<span
10+
className="
11+
inline-flex overflow-hidden rounded-md ring-1 ring-neutral-700/40
12+
text-sm font-mono
13+
"
14+
title={color}
15+
>
16+
<span
17+
className="w-8 h-6 shrink-0"
18+
style={{ backgroundColor: color }}
19+
/>
20+
21+
<span
22+
className="
23+
px-2 flex items-center
24+
bg-neutral-800/60 backdrop-blur-[2px]
25+
text-neutral-100
26+
"
27+
>
28+
{values}
29+
</span>
30+
</span>
31+
);
32+
}

‎public/data/sky_overcast001_hdr.json

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,5 @@
2323
105,
2424
200
2525
]
26-
},
27-
"fogParameters": {
28-
"primaryFogColor": [
29-
0,
30-
0,
31-
0
32-
]
3326
}
3427
}

0 commit comments

Comments
 (0)