Integration Row

연결된 서비스의 상태와 연결 동작을 한 줄로 보여줍니다.

@horon-ai/react 표시 Storybook ↗

Preview

Gmail[email protected] · Read, draftConnected

Google CalendarAccess expired 2 days ago

SlackPost updates to a channel

Usage

tsx

import { IntegrationRow } from "@horon-ai/react";
import { CalendarBlank, ChatCircle, EnvelopeSimple } from "@phosphor-icons/react";

export default function IntegrationRowDemo() {
  return (
    <>
      <IntegrationRow
        className="max-w-110"
        icon={<EnvelopeSimple />}
        name="Gmail"
        detail="[email protected] · Read, draft"
        status="connected"
      />
      <IntegrationRow
        className="max-w-110"
        icon={<CalendarBlank />}
        name="Google Calendar"
        detail="Access expired 2 days ago"
        status="reconnect"
      />
      <IntegrationRow
        className="max-w-110"
        icon={<ChatCircle />}
        name="Slack"
        detail="Post updates to a channel"
        status="not-connected"
      />
    </>
  );
}