npm install tuikit-atomicx-react @tencentcloud/uikit-base-component-react --save
npm install sass --save-dev

import React, { useEffect, useCallback } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { LiveList, useLoginState } from 'tuikit-atomicx-react';
import type { LiveInfo } from 'tuikit-atomicx-react';
import { UIKitProvider, MessageBox } from '@tencentcloud/uikit-base-component-react';
import styles from './LiveListView.module.scss';

const LiveListView: React.FC = () => {
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  const { loginUserInfo, login, setSelfInfo } = useLoginState();

  const handleLiveRoomClick = (liveInfo: LiveInfo) => {
    if (loginUserInfo?.userId === liveInfo.liveOwner?.userId) {
      MessageBox.alert({
        title: 'Warning',
        content: 'Cannot view your own live room',
      });
      return;
    }

    if (liveInfo?.liveId) {
      // You can add business logic here to navigate to the viewing page
      // // Example of navigating from [Live List Page] to [Audience Viewing Page]
      // const newParams = new URLSearchParams(searchParams);
      // newParams.set('liveId', liveInfo.liveId);
      // // Put the live room ID in URL parameters, so the audience viewing page can enter the corresponding live room based on URL parameters
      // navigate(`/live-player?${newParams.toString()}`); 
    }
  };

  const initLogin = useCallback(async () => {
    try {
      await login({
        SDKAppID: 0,    // Please replace with your SDKAppID (obtained when activating service)
        userID: '',     // Please replace with your user ID
        userSig: '',    // Please replace with your user signature (see [Step 1: Environment Configuration and Service Activation] document for detailed instructions)
      });
      await setSelfInfo({
        userName: '',   // User nickname, displayed in member list and chat messages. If not set, user ID will be displayed
        avatarUrl: '',  // User avatar, must be a complete URL image address, e.g.: https://your.domain.com/avatar-default.png
      });
    } catch (error) {
      console.error('Login failed:', error);
    }
  }, [login, setSelfInfo]);

  useEffect(() => {
    async function init() {
      await initLogin();
    }

    if (!loginUserInfo?.userId) {
      init();
    } else {
      console.log('[LiveList]User already logged in:', loginUserInfo.userId);
    }
  }, [initLogin, loginUserInfo?.userId]);

  return (
    <UIKitProvider theme="dark">
      <div className={styles.liveList}>
        {/* Live list component: set to display 5 columns, register live room click event handler */}
        <LiveList columnCount={5} onLiveRoomClick={handleLiveRoomClick} />
      </div>
    </UIKitProvider>
  );
};

export default LiveListView;