Personalization Landing

Экран входа в персонализацию — «Персонализация Oracul» и карточки входа в коннекторы и навыки.

Персонализация Oracul

Навыки, коннекторы и плагины определяют, как Oracul работает с вами.

"use client";

import { PersonalizationLanding } from "@/components/ui/personalization-landing";

// flex wrapper so the landing's flex-1 fills + vertically centers; no own border
// (the preview card supplies the frame — meta zeroes the viewport padding).
export default function Particle() {
  return (
    <div className="flex h-112.5 w-full overflow-hidden rounded-xl">
      <PersonalizationLanding
        onClose={() => {}}
        onSelectConnectors={() => {}}
        onSelectSkills={() => {}}
      />
    </div>
  );
}

Установка


pnpm dlx shadcn@latest add @oracul/personalization-landing

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

import { PersonalizationLanding } from "@/components/ui/personalization-landing";
 
<PersonalizationLanding
  onSelectConnectors={() => router.push("/customize/connectors")}
  onSelectSkills={() => router.push("/customize/skills")}
  onClose={() => router.push("/")}
/>

API

Презентационный (plain-props): приложение владеет навигацией. По умолчанию — две карточки (коннекторы / навыки); передайте entries, чтобы заменить набор.

Prop	Тип	Описание
`title` / `description`	`ReactNode`	Заголовок и подзаголовок героя.
`entries`	`PersonalizationEntry[]`	Полностью заменить карточки входа.
`onSelectConnectors` / `onSelectSkills`	`() => void`	Клик по карточкам по умолчанию.
`onClose`	`() => void`	Кнопка закрытия (×) в углу.
`className`	`string`	Доп. классы.

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

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