37 lines
1.5 KiB
TypeScript
37 lines
1.5 KiB
TypeScript
'use client';
|
||
|
||
import { useMemo } from 'react';
|
||
import { buildOneTapExamples } from '@/lib/one-tap-examples';
|
||
import { useOneTapUrls } from '@/lib/use-one-tap-urls';
|
||
import { CodeExampleTabs } from '@/components/code-example-tabs';
|
||
|
||
export function OneTapCodeTabs() {
|
||
const { urls, loading, error, apiBase, frontendBase } = useOneTapUrls();
|
||
const examples = useMemo(() => (urls ? buildOneTapExamples(urls) : []), [urls]);
|
||
|
||
if (loading) {
|
||
return <p className="text-sm text-zinc-500 dark:text-zinc-400">Загрузка актуальных URL из настроек IdP…</p>;
|
||
}
|
||
|
||
if (error || !urls) {
|
||
return (
|
||
<p className="rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800 dark:border-amber-900 dark:bg-amber-950/40 dark:text-amber-200">
|
||
{error ?? 'Не удалось построить примеры интеграции.'}
|
||
</p>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-3">
|
||
<p className="text-sm text-zinc-500 dark:text-zinc-400">
|
||
API (issuer): <code className="rounded bg-zinc-100 px-1.5 py-0.5 dark:bg-zinc-800">{apiBase}</code>
|
||
{' · '}
|
||
Frontend / виджет: <code className="rounded bg-zinc-100 px-1.5 py-0.5 dark:bg-zinc-800">{frontendBase}</code>
|
||
{' — '}
|
||
из настроек <strong>PUBLIC_API_URL</strong>, <strong>PUBLIC_FRONTEND_URL</strong> и <strong>PROJECT_NAME</strong>.
|
||
</p>
|
||
<CodeExampleTabs examples={examples} />
|
||
</div>
|
||
);
|
||
}
|