-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathProjectRouteHandler.jsx
More file actions
128 lines (111 loc) · 3.2 KB
/
ProjectRouteHandler.jsx
File metadata and controls
128 lines (111 loc) · 3.2 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
123
124
125
126
127
128
import React, { lazy, Suspense } from 'react';
import { useParams } from 'react-router-dom';
import { useProjects } from '../utils/projectParser';
import { useVisualSettings } from '../context/VisualSettingsContext';
import Loading from './Loading';
const ProjectPage = lazy(() => import('../pages/ProjectPage'));
const StylishProjectDetailsPage = lazy(
() => import('../pages/project-pages/StylishProjectDetailsPage'),
);
const EditorialProjectDetailsPage = lazy(
() => import('../pages/project-pages/EditorialProjectDetailsPage'),
);
const MinimalModernProjectPage = lazy(
() => import('../pages/project-pages/MinimalModernProjectPage'),
);
const MuseumProjectPage = lazy(() => import('../pages/project-pages/MuseumProjectPage'));
const LuxeProjectDetailPage = lazy(
() => import('../pages/luxe-views/LuxeProjectDetailPage'),
);
const BentoProjectPage = lazy(() => import('../pages/project-pages/BentoProjectPage'));
const LandscapeProjectPage = lazy(
() => import('../pages/project-pages/LandscapeProjectPage'),
);
const RubyProjectPage = lazy(() => import('../pages/project-pages/RubyProjectPage'));
const NeonSlideshowProjectPage = lazy(() => import('../pages/project-pages/NeonSlideshowProjectPage'));
const ProjectRouteHandler = () => {
const { slug } = useParams();
const { projects, loading } = useProjects();
const { fezcodexTheme } = useVisualSettings();
if (loading) return <Loading />;
const project = projects.find((p) => p.slug === slug);
if (!project) {
return (
<Suspense fallback={<Loading />}>
<ProjectPage />
</Suspense>
);
}
// Handle different project styles first
const projectStyle = project.style || 'default';
if (projectStyle === 'stylish') {
return (
<Suspense fallback={<Loading />}>
<StylishProjectDetailsPage />
</Suspense>
);
}
if (projectStyle === 'editorial') {
return (
<Suspense fallback={<Loading />}>
<EditorialProjectDetailsPage />
</Suspense>
);
}
if (projectStyle === 'minimal-modern') {
return (
<Suspense fallback={<Loading />}>
<MinimalModernProjectPage />
</Suspense>
);
}
if (projectStyle === 'museum') {
return (
<Suspense fallback={<Loading />}>
<MuseumProjectPage />
</Suspense>
);
}
if (projectStyle === 'bento') {
return (
<Suspense fallback={<Loading />}>
<BentoProjectPage />
</Suspense>
);
}
if (projectStyle === 'landscape') {
return (
<Suspense fallback={<Loading />}>
<LandscapeProjectPage />
</Suspense>
);
}
if (projectStyle === 'ruby') {
return (
<Suspense fallback={<Loading />}>
<RubyProjectPage />
</Suspense>
);
}
if (projectStyle === 'neon-slideshow') {
return (
<Suspense fallback={<Loading />}>
<NeonSlideshowProjectPage />
</Suspense>
);
}
// Fallback to theme based routing if style is default
if (fezcodexTheme === 'luxe') {
return (
<Suspense fallback={<Loading />}>
<LuxeProjectDetailPage />
</Suspense>
);
}
return (
<Suspense fallback={<Loading />}>
<ProjectPage />
</Suspense>
);
};
export default ProjectRouteHandler;