Settings Page

Страница настроек — «Назад», табы Общие / Правовые документы, профиль с темой и список правовых документов.

Настройки

Профиль

Аватар

Как к вам обращаться?

Инструкции для Oracul

Oracul будет учитывать их во всех чатах в рамках правил использования.

ID аккаунта

9m3gAd9iITNVcur8jmRQwWhB7PYDG0BR

Предпочтения

Внешний вид

"use client";

import { useState } from "react";
import { SettingsPage } from "@/components/ui/settings-page";

export default function Particle() {
  const [name, setName] = useState("Nike");
  const [instructions, setInstructions] = useState("");

  return (
    <SettingsPage
      accountId="9m3gAd9iITNVcur8jmRQwWhB7PYDG0BR"
      instructions={instructions}
      name={name}
      onBack={() => {}}
      onInstructionsChange={setInstructions}
      onNameChange={setName}
    />
  );
}

Установка


pnpm dlx shadcn@latest add @oracul/settings-page

Использование

import { SettingsPage } from "@/components/ui/settings-page";
 
<SettingsPage
  name={name}
  onNameChange={setName}
  instructions={instructions}
  onInstructionsChange={setInstructions}
  accountId={user.id}
  theme={theme}
  onThemeChange={setTheme}
  onBack={() => router.push("/")}
/>

Презентационный (plain-props): приложение владеет профилем (/api/personalization) и применением темы; компонент управляет только активным табом и локальным состоянием темы, если theme не передан. Кнопка «Назад» — общий back-button слева над заголовком (на фронте была справа — поправлено).

Prop	Тип	Описание
`name` / `onNameChange`	`string` / `(v) => void`	Имя обращения.
`instructions` / `onInstructionsChange`	`string` / `(v) => void`	Инструкции для Oracul.
`avatarUrl` / `initials`	`string`	Аватар и фолбэк-инициалы.
`accountId`	`ReactNode`	ID аккаунта (mono).
`theme` / `onThemeChange`	`"system" \| "light" \| "dark"`	Тема (опц. — иначе локальное состояние).
`legalDocs`	`SettingsLegalDoc[]`	Список правовых документов (по умолчанию — набор Oracul).
`onBack`	`() => void`	Кнопка «Назад».
`className`	`string`	Доп. классы.

На этой странице

Установка Использование API