docs/docs/70-common-ui/tabs.md

Вкладки

Допустим нам нужно разделить страницу users/page.tsx на 2 вкладки:

• Основные данные
• Организации

При открытии страницы по умолчанию должна открываться вкладка "Основные данные".

Организуем структуру следующим образом:

users / page.tsx; // корневая страница
general / page.tsx; // страница вкладки
organizators / page.tsx; // страница вкладки

Определение вкладок

Добавим файл с определением вкладок:

// users/tabs.ts

import { ITabs } from '@src/client/uikit/TabBar';

export enum UserTab {
    General = 'general',
    Organizators = 'organizators',
}

export const clientUserTabs: ITabs<UserTab> = [
    {
        label: 'Основные данные',
        slug: UserTab.General,
    },
    {
        label: 'Организации',
        slug: UserTab.Organizators,
    },
];

И сделать по странице для каждой вкладки, имя страницы должно совпадать с текстовым значением варианта enum.

Страницы вкладок

// users/general/page.tsx

import { clientUserTabs } from '../tabs';

export default async function UserViewPage({ params }: { id: string }) {
    return (
        <Card>
            <Card.Header />
            <TabBar items={clientUserTabs} />
            <Card.Body />
        </Card>
    );
}

Компонент TabBar предназначен для использования непосредственно внутри Card. Если поместить его в Card.Header, стили могут сломаться.

Корневая страница

Корневые страницы (users/page.tsx в нашем примере) не поддерживаются, поскольку имя страницы привязано к варианту enum, а корневая страница была бы пустой строкой.

Если она вам нужна, создайте страницу для редиректа:

// users/page.tsx
import { redirect } from 'next/navigation';
interface IProps {
    params: { id: string };
}
export default function UserViewPage({ params }: IProps) {
    redirect(`/admin/users/${params.id}/general`);
}