# UserCenter

The `UserCenter` component is a comprehensive, pre-built interface that provides a complete user profile and settings management page. It integrates various functionalities, including user information display, passport management, privacy controls, notification settings, and DID storage management, offering a centralized hub for users.

This component is designed to be highly extensible, allowing developers to add custom tabs and content through the blocklet's metadata, ensuring a consistent user experience across different applications.

<!-- DIAGRAM_IMAGE_START:architecture:4:3:1765962229 -->
![UserCenter](assets/diagram/user-center-diagram-0.jpg)
<!-- DIAGRAM_IMAGE_END -->

## Basic Usage

To use the `UserCenter`, you need to provide the `currentTab` prop, which determines which section is active. This is typically derived from the application's router.

```javascript UserCenter Example icon=logos:react
import React from 'react';
import { UserCenter } from '@blocklet/ui-react';

export default function ProfilePage() {
  // In a real application, you would get this value from your router.
  // For example, if the URL is /profile/settings, currentTab would be '/profile/settings'.
  const currentTab = '/profile/nfts';

  return <UserCenter currentTab={currentTab} />;
}
```

## Props

The `UserCenter` component accepts several props to customize its behavior and appearance.

<x-field-group>
  <x-field data-name="children" data-type="React.ReactNode" data-required="false">
    <x-field-desc markdown>Used to render content for custom tabs defined in the blocklet's navigation settings. The `UserCenter` will display the children when `currentTab` matches a custom tab's URL.</x-field-desc>
  </x-field>
  <x-field data-name="currentTab" data-type="string" data-required="true">
    <x-field-desc markdown>The value of the currently active tab. This should match the `value` property of one of the available tabs (either default or custom). It is used to highlight the correct tab and display its corresponding content.</x-field-desc>
  </x-field>
  <x-field data-name="userDid" data-type="string" data-required="false">
    <x-field-desc markdown>The DID of the user whose profile is to be displayed. If omitted, the component will attempt to get the DID from the URL query parameter (`?did=...`) or default to the currently logged-in user.</x-field-desc>
  </x-field>
  <x-field data-name="embed" data-type="boolean" data-default="false" data-required="false">
    <x-field-desc markdown>If set to `true`, the component renders in an embedded mode without the main `Header` and `Footer`, making it suitable for integration within other layouts or pages.</x-field-desc>
  </x-field>
  <x-field data-name="onlyProfile" data-type="boolean" data-default="false" data-required="false">
    <x-field-desc markdown>If set to `true`, only the `UserBasicInfo` profile card is displayed, without any tabs or content sections. This is useful for contexts where only a compact user profile is needed.</x-field-desc>
  </x-field>
  <x-field data-name="hideFooter" data-type="boolean" data-default="false" data-required="false">
    <x-field-desc markdown>If set to `true`, the `Footer` component will not be rendered.</x-field-desc>
  </x-field>
  <x-field data-name="headerProps" data-type="object" data-required="false">
    <x-field-desc markdown>Props to be passed down to the underlying `Header` component for customization.</x-field-desc>
  </x-field>
  <x-field data-name="footerProps" data-type="object" data-required="false">
    <x-field-desc markdown>Props to be passed down to the underlying `Footer` component for customization.</x-field-desc>
  </x-field>
  <x-field data-name="onDestroySelf" data-type="() => void" data-required="false">
    <x-field-desc markdown>A callback function that is triggered when a non-owner user initiates the account deletion process from the "Danger Zone" in the settings.</x-field-desc>
  </x-field>
  <x-field data-name="notLoginContent" data-type="React.ReactNode" data-required="false">
    <x-field-desc markdown>Custom content to display when no user is logged in and no `userDid` is provided. If not set, a default login prompt is shown.</x-field-desc>
  </x-field>
</x-field-group>

## Core Features

The `UserCenter` is composed of several key sections and components that provide a rich user experience out of the box.

### Default Tabs

By default, the `UserCenter` includes the following tabs for every user:

| Tab                 | Description                                                                    | Visibility |
| ------------------- | ------------------------------------------------------------------------------ | ---------- |
| **NFTs**            | Displays the user's NFT collections.                                           | Public     |
| **Social Activity** | Shows the user's followers and following lists if social features are enabled. | Public     |
| **Settings**        | Access to profile, privacy, notification, and session management.              | Owner Only |
| **Storage**         | Interface for managing connections to DID Spaces for decentralized storage.    | Owner Only |

### User Profile (`UserBasicInfo`)

The `UserBasicInfo` component is a dedicated section (typically a sidebar on desktop) that displays essential user details:

- **Avatar and Name**: Shows the user's profile picture and full name. The owner can click the avatar to open the profile switcher.
- **DID**: Displays the user's Decentralized Identifier, with options to copy it or view its QR code.
- **Social Actions**: For public profiles, it shows "Follow" or "Unfollow" buttons.
- **Metadata**: Displays user-provided information such as bio, location, and social links.
- **Private Information**: For the owner, it shows private details like email and phone number.

### Passport Management

On the main profile tab (NFTs), the currently logged-in user will see a section dedicated to their DID Passports. This area lists all associated passports, indicating their status (e.g., active, revoked) and highlighting the one currently in use.

### Settings

The "Settings" tab is a comprehensive panel available only to the user who owns the profile. It is organized into several sub-sections:

- **Common Settings**: Allows users to update their public profile information like name, bio, and social links.
- **Notification Management**: Configure how to receive notifications (Wallet, Email, Push) and manage webhooks.
- **Third-Party Login**: Manage connections to other identity providers like Google, GitHub, or Passkeys.
- **Privacy Management**: Control the visibility of different tabs on the user profile, making them public or private.
- **Session Management**: View and revoke active login sessions across different devices.
- **Danger Zone**: For non-owner roles, provides an option to delete their own account.

## Customization

You can extend the `UserCenter` by adding new tabs through your blocklet's configuration.

1.  **Define Custom Tabs in `blocklet.yml`**

    Add entries to the `navigation.userCenter` array in your `blocklet.yml` file. Each entry represents a new tab.

    ```yaml blocklet.yml icon=mdi:code-block-tags
    navigation:
      - title: User Center
        role: guest
        userCenter:
          - title: My Activity
            link: /profile/activity
            icon: 'material-symbols:history'
            # Set to true if this tab should only be visible to the profile owner
            private: false
    ```

2.  **Render Content for the Custom Tab**

    In your component, pass a child element that will be rendered when the `currentTab` prop matches the `link` you defined.

    ```javascript MyActivity.js icon=logos:react
    import React from 'react';
    import { UserCenter } from '@blocklet/ui-react';

    function MyActivityComponent() {
      return <div>This is the custom activity content.</div>;
    }

    export default function ProfilePageWithActivity() {
      // This value would come from your router, e.g., '/profile/activity'
      const currentTab = '/profile/activity';

      return (
        <UserCenter currentTab={currentTab}>{currentTab === '/profile/activity' && <MyActivityComponent />}</UserCenter>
      );
    }
    ```

This approach allows you to seamlessly integrate application-specific pages into the standard `UserCenter` layout.
