整合連接網格

行銷頁與設定頁都用得上的整合服務網格。網格進入視窗時，卡片帶著一點旋轉依序落下、落地輕微回彈；接著可以自動播放——每隔一段時間把下一張卡切到「連接中」再到「已連接」，邊框漸變為強調色、勾號一筆描繪出來——也可以交給使用者點「連接」，由你提供的 onConnect 處理授權，回傳 Promise 時顯示 spinner，失敗則退回未連接並抖動。全部連完後底部出現「已連接 N 項服務」的摘要列，數字逐位滾動。已連接清單支援受控／非受控雙模式。

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<IntegrationConnectGrid/>

    </div>
  );
}

安裝

npx webberui@latest add https://webberui.com/r/integration-connect-grid.json

使用

import { Calendar, HardDrive, Mail } from "lucide-react";
import { IntegrationConnectGrid } from "@/components/ui/integration-connect-grid";

const items = [
  { id: "drive", name: "雲端硬碟", description: "同步共用資料夾與附件", icon: <HardDrive /> },
  { id: "calendar", name: "行事曆同步", description: "會議自動寫入團隊行事曆", icon: <Calendar /> },
  { id: "mail", name: "電子郵件", description: "收件匣轉成待辦項目", icon: <Mail /> },
];

// 行銷頁：自動播放
<IntegrationConnectGrid items={items} autoConnect />

// 設定頁：使用者點擊連接
<IntegrationConnectGrid
  items={items}
  onConnect={async (id) => {
    // 呼叫你的授權流程；拋出錯誤會退回未連接並抖動
    await connectIntegration(id);
  }}
  onConnectedChange={(ids) => console.log(ids)}
/>

Props

IntegrationConnectItem

細節

• 進場由 IntersectionObserver 觸發（只播一次）：每張卡從 y: -40、rotate: -4°、透明度 0 落下，spring（stiffness 420、damping 24、mass 0.8）帶一點落地回彈，卡片之間錯開 --wb-integration-connect-stagger（預設 90ms）。
• 自動連接在最後一張卡落地後才開始，每隔 interval 把下一張未連接的卡切到「連接中」，停留 400ms 後變成「已連接」。
• 切到已連接時，邊框在 --wb-integration-connect-duration（預設 300ms）內漸變為 --wb-integration-connect-accent，勾號以相同時長描繪，卡片輕微放大 1.02 後回彈。
• onConnect 回傳 Promise 時，等待期間按鈕停用並顯示 spinner；reject 或拋出錯誤會退回未連接並水平抖動，可直接再點一次。沒有提供 onConnect 或它同步回傳時，立即切到已連接。
• 欄數用 CSS grid 實作：寬螢幕 columns 欄，sm 斷點以下最多 2 欄。摘要列預留固定高度，出現時不推動下方版面。

可及性

• 網格為 role="list"，每張卡為 role="listitem"，並以服務名稱作為卡片的 aria-labelledby
• 「連接」按鈕為原生 button，等待授權期間設定 aria-busy 並停用；按鈕以 aria-describedby 關聯服務名稱
• 狀態變化以 aria-live="polite" 宣告，例如「行事曆同步已連接」、「發票系統連接失敗，請再試一次」
• 已連接狀態不只靠顏色：同時顯示勾號與「已連接」文字；從按鈕連接成功後，焦點移到該卡片，不會掉回頁面開頭
• 使用者系統開啟「減少動態效果」時，卡片直接出現、狀態直接切換，勾號不描繪，也不抖動或放大