Обзор
Компоненты
- Accordion
- Alert
- Alert Dialog
- Autocomplete
- Auth Surface
- Avatar
- Badge
- Browse Catalog Dialog
- Button
- Card
- Checkbox
- Checkbox Group
- Collapsible
- Combobox
- Command
- Connector Setup Dialog
- Cookie Banner
- Dialog
- Directory Card
- Directory Detail
- Directory Skeleton
- DrawerНовое
- Token Parts Input
- Empty
- Field
- Fieldset
- File Preview Modal
- File Preview Skeleton
- Form
- Frame
- Group
- Icon
- Input
- Input Group
- Kbd
- Label
- Legal Shell
- Menu
- Mermaid Diagram
- Mind Map Diagram
- Not Found Screen
- Onboarding Frame
- Popover
- PDF Thumbnail
- Personalization Landing
- Preview Card
- Pricing Page
- Progress
- Radio Group
- Ring Spinner
- Scroll Area
- Select
- Separator
- Settings Page
- Settings Skills
- Settings Connectors
- Settings Capabilities
- Settings Usage
- Settings Account
- Settings Billing
- Sheet
- Sidebar
- Skeleton
- Skill Create Dialog
- Slider
- Spinner
- Stat
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Tooltip
AI-компоненты
- Компоненты AI
- Chat Conversation
- Chat Message
- Chat Response
- Chat Suggestion
- Chat Prompt Input
- Slash Highlighted Textarea
- Chat Search Dialog
- Chat Skill Doc
- Chat Connector Detail
- Chat Attachments
- Chat File Card
- Chat Token Chip
- Chat Code Block
- Chat Image
- Chat Inline Citation
- Chat Sources
- Chat Web Search
- Chat Research
- Chat Source
- Chat Actions
- Chat Context
- Chat Loader
- Chat Compaction
- Chat Timeline
- Chat Snippet
- Chat Terminal
- Chat Stack Trace
- Chat Test Results
- Chat File Tree
- Chat Environment Variables
- Chat Audio Player
- Chat Transcription
- Chat Speech Input
- Chat Mic Selector
- Chat Voice Selector
- Chat Agent
- Chat Persona
- Chat Connection
- Chat Connector Suggestion
- Chat Queue
- Chat Checkpoint
- Chat Confirmation
- Chat Artifact
- Chat JSX Preview
- Chat Schema Display
- Chat Package Info
- Chat Commit
- Chat Plan
- Chat Open In Chat
- Chat Sandbox
- Chat Model Selector
- Chat Canvas
- Chat Node
- Chat Edge
Ресурсы
Settings Page
Страница настроек — «Назад», табы Общие / Правовые документы, профиль с темой и список правовых документов.
Настройки
Профиль
Аватар
NI
Как к вам обращаться?
Инструкции для 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("/")}
/>API
Презентационный (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 | Доп. классы. |
На этой странице