# UIコンポーネント

`@arcblock/did-connect-react`ライブラリには、DID関連情報を一貫性があり、美しく表示するのに役立つように設計された、事前にスタイル設定された補助的なUIコンポーネントのセットが含まれています。これらのコンポーネントは、コア接続フローとシームレスに連携し、堅牢な`@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">
    一貫したデザインでDID Connectフローを開始するための、事前にスタイル設定されたボタン、具体的には`ConnectButton`。
  </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 Combined UI Example 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>
  );
}

// 使用例:
// <UserDisplay userDid="z123..." userName="Alice" />
// <UserDisplay userDid={null} />
```

この例は、提供されているコンポーネントを使用して、ログイン状態とログアウト状態の一般的なUIパターンをいかに簡単に構築できるかを示しています。

### 次のステップ

UIコンポーネントに慣れたら、認証フローとセッションデータをよりプログラム的に制御するために、ライブラリの[Hooks](./hooks.md)を調べてみるとよいでしょう。