AI 통합 가이드

import type {
  StatCardType,
  TabDef,
  FaqItem,
  FormFieldDef,
  Command,
  SelectOption,
  // ... 등
} from "@reopt-ai/opt-ui";

"use client";

import { DashboardGrid } from "@reopt-ai/opt-ui";
import type { StatCardType } from "@reopt-ai/opt-ui";

const stats: StatCardType[] = [
  { id: "1", title: "활성 사용자", value: "1,234", trend: "+12%" },
  { id: "2", title: "총 배포", value: "567", trend: "+5%" },
  // ...
];

export default function DashboardPage() {
  return (
    <DashboardGrid
      stats={stats}
      onStatClick={(stat) => console.log(stat)}
    />
  );
}

"use client";

import { ContentTabs } from "@reopt-ai/opt-ui";
import type { TabDef } from "@reopt-ai/opt-ui";

const tabs: TabDef[] = [
  { id: "overview", label: "개요", content: <OverviewPanel /> },
  { id: "settings", label: "설정", content: <SettingsPanel /> },
  { id: "logs", label: "로그", content: <LogsPanel /> },
];

export default function TabbedPage() {
  return <ContentTabs tabs={tabs} defaultTab="overview" />;
}

"use client";

import { useState } from "react";
import { StatusSelect } from "@reopt-ai/opt-ui";
import type { SelectOption } from "@reopt-ai/opt-ui";

const options: SelectOption[] = [
  { id: "active", label: "활성", color: "green" },
  { id: "pending", label: "대기중", color: "yellow" },
  { id: "inactive", label: "비활성", color: "gray" },
];

export default function StatusPage() {
  const [status, setStatus] = useState("active");

  return (
    <StatusSelect
      options={options}
      value={status}
      onChange={setStatus}
    />
  );
}

// Block 사용 (간단)
<FaqAccordion items={faqItems} />

// Primitive 조합 (세밀한 제어)
import {
  DisclosureRoot,
  DisclosureTrigger,
  DisclosureContent,
  CompositeZone,
  CompositeItem,
} from "@reopt-ai/opt-ui";

<CompositeZone orientation="vertical" focusLoop>
  {items.map((item) => (
    <CompositeItem key={item.id} render={<DisclosureRoot />}>
      <DisclosureTrigger className="custom-trigger">
        {item.question}
      </DisclosureTrigger>
      <DisclosureContent className="custom-content">
        {item.answer}
      </DisclosureContent>
    </CompositeItem>
  ))}
</CompositeZone>