60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
import { Suspense } from 'react';
|
|
import { useParams } from 'react-router-dom';
|
|
import { useSeoMeta } from '@unhead/react';
|
|
import { CraftProfileForm } from '@/components/CraftProfileForm';
|
|
import { getBecomeRole } from '@/lib/becomeRoles';
|
|
import { useTranslation } from '@/contexts/language';
|
|
import NotFound from '@/pages/NotFound';
|
|
|
|
/**
|
|
* Single entry point for every "become a <role>" flow (/become/:role).
|
|
*
|
|
* - Craft roles render the shared <CraftProfileForm> from their data config.
|
|
* - Bespoke roles render their own lazy page component.
|
|
* - Unknown roles fall through to the 404 page.
|
|
*
|
|
* This replaces 12 hardcoded routes + 12 component imports in the router.
|
|
*/
|
|
|
|
function PageLoader() {
|
|
return (
|
|
<div className="min-h-screen bg-black flex items-center justify-center">
|
|
<div className="w-8 h-8 border-2 border-[#ff0040] border-t-transparent rounded-full animate-spin" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function BecomeRolePage() {
|
|
const { role: slug } = useParams<{ role: string }>();
|
|
const role = getBecomeRole(slug);
|
|
|
|
if (!role) {
|
|
return <NotFound />;
|
|
}
|
|
|
|
if (role.kind === 'craft') {
|
|
return <CraftRole role={role} />;
|
|
}
|
|
|
|
const Component = role.component;
|
|
return (
|
|
<Suspense fallback={<PageLoader />}>
|
|
<Component />
|
|
</Suspense>
|
|
);
|
|
}
|
|
|
|
function CraftRole({
|
|
role,
|
|
}: {
|
|
role: Extract<ReturnType<typeof getBecomeRole>, { kind: 'craft' }>;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
|
|
useSeoMeta({
|
|
title: role.seoTitleKey ? t(role.seoTitleKey) : role.seoTitle,
|
|
description: role.seoDescriptionKey ? t(role.seoDescriptionKey) : role.seoDescription,
|
|
});
|
|
|
|
return <CraftProfileForm config={role.config} />;
|
|
}
|