# UI 元件

`@arcblock/did-connect-react` 函式庫包含一組預先設計樣式的輔助 UI 元件，旨在幫助您以一致且美觀的方式顯示 DID 相關資訊。這些元件與核心連接流程無縫協作，並建立在強大的 `@arcblock/ux` 和 `@mui/material` 函式庫之上，確保您的應用程式具有一致的外觀和風格。

本節提供這些元件的概述。點擊任何卡片以查看詳細文件，包括屬性和使用範例。

<x-cards data-columns="2">
  <x-card data-title="Avatar" data-href="/ui-components/avatar" data-icon="lucide:user-circle-2">
    一個用於顯示使用者頭像的元件，頭像會根據其 DID 自動產生。
  </x-card>
  <x-card data-title="Address" data-href="/ui-components/address" data-icon="lucide:key-round">
    用於以格式化且可選縮短的方式顯示使用者的 DID 位址，以提高可讀性。
  </x-card>
  <x-card data-title="Button" data-href="/ui-components/button" data-icon="lucide:mouse-pointer-click">
    一個預先設計樣式的按鈕，特別是 `ConnectButton`，用於以一致的設計啟動 DID Connect 流程。
  </x-card>
  <x-card data-title="Logo" data-href="/ui-components/logo" data-icon="lucide:hexagon">
    一個用於顯示官方 DID Connect 標誌的簡單元件，有助於品牌推廣和 UI 一致性。
  </x-card>
</x-cards>

## 組合使用範例

這些元件設計用於組合在一起以建構使用者介面。以下是如何使用 `Avatar`、`Address` 和 `ConnectButton` 建立簡單使用者個人資料顯示的範例。

```javascript 組合 UI 範例 icon=logos:react
import Avatar from '@arcblock/did-connect-react/lib/Avatar';
import Address from '@arcblock/did-connect-react/lib/Address';
import ConnectButton from '@arcblock/did-connect-react/lib/Button';
import { Box, Typography, Paper } from '@mui/material';

function UserDisplay({ userDid, userName }) {
  if (!userDid) {
    return <ConnectButton />;
  }

  return (
    <Paper elevation={2} sx={{ padding: '16px', display: 'flex', alignItems: 'center', gap: '16px' }}>
      <Avatar size={60} did={userDid} />
      <Box>
        <Typography variant="h6" component="div">{userName || 'Anonymous'}</Typography>
        <Address variant="body2" color="text.secondary">{userDid}</Address>
      </Box>
    </Paper>
  );
}

// Example usage:
// <UserDisplay userDid="z123..." userName="Alice" />
// <UserDisplay userDid={null} />
```

此範例展示了如何使用提供的元件輕鬆建構登入和登出狀態的常見 UI 模式。

### 後續步驟

熟悉 UI 元件後，您可能想探索該函式庫的 [Hooks](./hooks.md)，以對身份驗證流程和會話資料進行更多程式化控制。