Skip to content

Commit ba02830

Browse files
JacobdeanrJacobdeanr
committed
move detail out of page to its own client
1 parent fd437ab commit ba02830

File tree

2 files changed

+114
-97
lines changed

2 files changed

+114
-97
lines changed

‎app/skybox/[slug]/page.tsx

Lines changed: 19 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -1,111 +1,33 @@
11
import fs from 'fs';
22
import path from 'path';
3-
import SunParams from '@/app/ui/sunparameters';
4-
import FogParams from '@/app/ui/fogparameters';
5-
import MapList from '@/app/ui/maplist';
6-
import DownloadButton from '@/app/ui/downloadbutton';
7-
import TechnicalDetails from '@/app/ui/technical-details';
3+
import SkyboxClient from './skybox-client';
84

5+
// This function runs at build time to generate all possible paths
96
export async function generateStaticParams() {
107
const allPath = path.join(process.cwd(), 'public', 'data', 'index.json');
118
const allData = JSON.parse(fs.readFileSync(allPath, 'utf8'));
12-
return Object.keys(allData).map((slug) => ({ slug }));
9+
return Object.keys(allData).map((slug) => ({
10+
slug: slug.toString()
11+
}));
1312
}
1413

15-
export default function SkyboxPage({
14+
async function getSkyboxData(slug: string) {
15+
const dataPath = path.join(process.cwd(), 'public', 'data', `${slug}.json`);
16+
const fileContents = await fs.promises.readFile(dataPath, 'utf8');
17+
return JSON.parse(fileContents);
18+
}
19+
20+
export default async function Page({
1621
params,
17-
searchParams,
1822
}: {
1923
params: { slug: string };
20-
searchParams?: Record<string, string | string[] | undefined>;
2124
}) {
22-
const dataPath = path.join(process.cwd(), 'public', 'data', `${params.slug}.json`);
23-
const skyboxData = JSON.parse(fs.readFileSync(dataPath, 'utf8'));
25+
const { slug } = params;
26+
const skyboxData = await getSkyboxData(slug);
2427

25-
26-
const imgBase = `/Source_Skyboxes_NextJS/skyboxes/${params.slug}/images`;
27-
28-
return (
29-
<article className="max-w-4xl mx-auto">
30-
<div className="bg-neutral-900 rounded-lg shadow-xl ring-1 ring-neutral-700/60 overflow-hidden">
31-
{/* Header */}
32-
<div className="p-4">
33-
<div className="flex flex-wrap sm:flex-nowrap items-start sm:items-center justify-between gap-4">
34-
<div className="flex flex-col">
35-
<h1 className="text-2xl font-bold leading-tight">{params.slug}</h1>
36-
{skyboxData.author && (
37-
<span className="text-sm text-neutral-400">By {skyboxData.author}</span>
38-
)}
39-
</div>
40-
<DownloadButton
41-
href={`/Source_Skyboxes_NextJS/skyboxes/${params.slug}/downloads/${params.slug}.7z`}
42-
download
43-
size={skyboxData.fileSize}
44-
className="flex-shrink-0"
45-
/>
46-
</div>
47-
</div>
48-
49-
{/* Preview */}
50-
<div className="p-4 relative w-full aspect-[16/9]">
51-
<img
52-
src={`${imgBase}/previews/1.webp`}
53-
alt={`${params.slug} preview`}
54-
className="w-full h-full object-cover rounded-md"
55-
/>
56-
</div>
57-
58-
{/* Content Grid */}
59-
<div className="p-4 space-y-8">
60-
{/* Description */}
61-
<div className="bg-neutral-800/50 p-4 rounded-md">
62-
<h3 className="text-lg font-medium mb-3">Description</h3>
63-
<p className="text-neutral-300">{skyboxData.description || 'A high-quality HDR skybox for Source Engine games.'}</p>
64-
</div>
65-
66-
{/* Environment Parameters */}
67-
<div>
68-
<h3 className="text-lg font-medium mb-4">Environment Parameters</h3>
69-
<div className="grid md:grid-cols-2 gap-6">
70-
<div className="bg-neutral-800/50 p-4 rounded-md">
71-
<h4 className="text-sm font-medium text-neutral-400 mb-3">Sun Parameters</h4>
72-
<SunParams {...skyboxData.sunParameters} />
73-
</div>
74-
<div className="bg-neutral-800/50 p-4 rounded-md">
75-
<h4 className="text-sm font-medium text-neutral-400 mb-3">Fog Parameters</h4>
76-
<FogParams {...skyboxData.fogParameters} />
77-
</div>
78-
</div>
79-
</div>
80-
81-
{/* Community Maps */}
82-
<div>
83-
<h3 className="text-lg font-medium mb-4">Community Maps</h3>
84-
<div className="bg-neutral-800/50 p-4 rounded-md">
85-
<MapList maps={skyboxData.steamMaps} />
86-
</div>
87-
</div>
88-
89-
{/* Technical Details */}
90-
<TechnicalDetails
91-
resolution={skyboxData.resolution}
92-
fileSize={skyboxData.fileSize}
93-
compatibility={skyboxData.compatibility}
94-
/>
95-
</div>
96-
</div>
97-
98-
{/* Categories Section */}
99-
<div className="p-6 border-t border-neutral-800 mt-8">
100-
<h3 className="text-lg font-medium text-neutral-100 mb-4">Categories</h3>
101-
<div className="flex flex-wrap gap-2">
102-
{skyboxData.categories?.map((category: string) => (
103-
<span key={category} className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-neutral-800 text-neutral-300">
104-
{category}
105-
</span>
106-
))}
107-
</div>
108-
</div>
109-
</article>
110-
);
28+
if (!skyboxData) {
29+
return <div>Skybox not found</div>;
30+
}
31+
32+
return <SkyboxClient slug={slug} skyboxData={skyboxData} />;
11133
}

‎app/skybox/[slug]/skybox-client.tsx

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
'use client';
2+
3+
import SunParams from '@/app/ui/sunparameters';
4+
import FogParams from '@/app/ui/fogparameters';
5+
import MapList from '@/app/ui/maplist';
6+
import DownloadButton from '@/app/ui/downloadbutton';
7+
import TechnicalDetails from '@/app/ui/technical-details';
8+
9+
interface SkyboxClientProps {
10+
slug: string;
11+
skyboxData: any;
12+
}
13+
14+
export default function SkyboxClient({ slug, skyboxData }: SkyboxClientProps) {
15+
const imgBase = `/Source_Skyboxes_NextJS/skyboxes/${slug}/images`;
16+
17+
return (
18+
<article className="max-w-4xl mx-auto">
19+
<div className="bg-neutral-900 rounded-lg shadow-xl ring-1 ring-neutral-700/60 overflow-hidden">
20+
{/* Header */}
21+
<div className="p-4">
22+
<div className="flex flex-wrap sm:flex-nowrap items-start sm:items-center justify-between gap-4">
23+
<div className="flex flex-col">
24+
<h1 className="text-2xl font-bold leading-tight">{slug}</h1>
25+
{skyboxData.author && (
26+
<span className="text-sm text-neutral-400">By {skyboxData.author}</span>
27+
)}
28+
</div>
29+
<DownloadButton
30+
href={`/Source_Skyboxes_NextJS/skyboxes/${slug}/downloads/${slug}.7z`}
31+
download
32+
size={skyboxData.fileSize}
33+
className="flex-shrink-0"
34+
/>
35+
</div>
36+
</div>
37+
38+
{/* Preview Image */}
39+
<div className="relative w-full aspect-video bg-black">
40+
<img
41+
src={`${imgBase}/previews/1.webp`}
42+
alt={`${slug} skybox preview`}
43+
className="w-full h-full object-cover"
44+
/>
45+
</div>
46+
47+
{/* Content */}
48+
<div className="p-6 space-y-6">
49+
{/* Description */}
50+
{skyboxData.description && (
51+
<p className="text-neutral-300">{skyboxData.description}</p>
52+
)}
53+
54+
{/* Technical Details
55+
<TechnicalDetails
56+
resolution={skyboxData.resolution}
57+
fileSize={skyboxData.fileSize}
58+
compatibility={skyboxData.compatibility}
59+
/>
60+
*/}
61+
62+
{/* Sun Parameters */}
63+
{skyboxData.sunParameters && (
64+
<SunParams {...skyboxData.sunParameters} />
65+
)}
66+
67+
{/* Fog Parameters */}
68+
{skyboxData.fogParameters && (
69+
<FogParams {...skyboxData.fogParameters} />
70+
)}
71+
72+
{/* Map List */}
73+
{skyboxData.steamMaps && skyboxData.steamMaps.length > 0 && (
74+
<div>
75+
<h3 className="text-lg font-medium text-neutral-100 mb-4">Featured in</h3>
76+
<MapList maps={skyboxData.steamMaps} />
77+
</div>
78+
)}
79+
</div>
80+
</div>
81+
82+
{/* Categories Section */}
83+
<div className="p-6 border-t border-neutral-800 mt-8">
84+
<h3 className="text-lg font-medium text-neutral-100 mb-4">Categories</h3>
85+
<div className="flex flex-wrap gap-2">
86+
{skyboxData.categories?.map((category: string) => (
87+
<span key={category} className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-neutral-800 text-neutral-300">
88+
{category}
89+
</span>
90+
))}
91+
</div>
92+
</div>
93+
</article>
94+
);
95+
}

0 commit comments

Comments
 (0)