51 lines
2.1 KiB
TypeScript
51 lines
2.1 KiB
TypeScript
import { apiFetch } from '../../lib/api';
|
||
import { getDemoToken } from '../../lib/demo-auth';
|
||
import { OnboardingCarousel, OnboardingSlide } from '../../components/OnboardingCarousel';
|
||
|
||
interface OnboardingState {
|
||
last_completed_order: number;
|
||
is_completed: boolean;
|
||
}
|
||
|
||
interface OnboardingResponse {
|
||
slides: OnboardingSlide[];
|
||
state: OnboardingState;
|
||
next_order: number | null;
|
||
}
|
||
|
||
async function fetchOnboarding() {
|
||
const token = await getDemoToken();
|
||
const data = await apiFetch<OnboardingResponse>('/api/onboarding/', { authToken: token });
|
||
return { token, data };
|
||
}
|
||
|
||
export default async function OnboardingPage() {
|
||
const { token, data } = await fetchOnboarding();
|
||
|
||
return (
|
||
<section className="grid" style={{ gridTemplateColumns: '2fr 1fr', alignItems: 'start', gap: '2rem' }}>
|
||
<div>
|
||
<OnboardingCarousel
|
||
token={token}
|
||
slides={data.slides}
|
||
initialCompletedOrder={data.state.last_completed_order}
|
||
nextOrder={data.next_order}
|
||
/>
|
||
</div>
|
||
<aside className="card" style={{ position: 'sticky', top: '1.5rem' }}>
|
||
<h3>Бортовой навигатор</h3>
|
||
<p style={{ color: 'var(--text-muted)', lineHeight: 1.6 }}>
|
||
Онбординг знакомит вас с космической культурой «Алабуги» и объясняет, как миссии превращают карьерные шаги в
|
||
единый маршрут. Каждый шаг открывает новые подсказки и призы в магазине.
|
||
</p>
|
||
<ul style={{ listStyle: 'none', margin: '1rem 0 0', padding: 0, color: 'var(--text-muted)' }}>
|
||
<li>• Читайте лор и переходите к миссиям напрямую.</li>
|
||
<li>• Следите за прогрессом — статус сохраняется автоматически.</li>
|
||
<li>• Доступ к веткам миссий открывается по мере выполнения шагов.</li>
|
||
</ul>
|
||
</aside>
|
||
</section>
|
||
);
|
||
}
|
||
|