Render Mobile Controllers

Below is an example that allows you to render your custom mobile controllers component using Planby's style components.

// Import interfaces
import { MobileControllers } from "@nessprim/planby-pro";

// Import styles
import {
  MobileControllerWrapper,
  MobileControllerContent,
  MobileControllerButton,
  MobileControllerIconBack,
  MobileControllerText,
} from "@nessprim/planby-pro";

export function MobileHeader({
  isRTL,
  isMobileListOpened,
  mobile,
  channelName,
  openMobileList,
  onCloseMobileList,
}: MobileControllers) {
  const { controllers } = mobile;
  const { height, showAllText, closeText, showCloseIcon } = controllers;

  const renderButtonBackText = () =>
    showCloseIcon ? <MobileControllerIconBack /> : closeText;

  const renderTitle = () => {
    if (isMobileListOpened) {
      return (
        <MobileControllerText isRTL={isRTL}>{channelName}</MobileControllerText>
      );
    }
    return (
      <MobileControllerButton isRTL={isRTL} onClick={openMobileList}>
        {showAllText}
      </MobileControllerButton>
    );
  };
  return (
    <MobileControllerWrapper isOpen={isMobileListOpened} height={height}>
      <MobileControllerContent>
        {isMobileListOpened && (
          <MobileControllerButton onClick={onCloseMobileList}>
            {renderButtonBackText()}
          </MobileControllerButton>
        )}
        {renderTitle()}
      </MobileControllerContent>
    </MobileControllerWrapper>
  );
}


function App() {

  ...

 const {
  getEpgProps,
  getLayoutProps,
} = useEpg({
  epg,
  channels,
  startDate: '2024/02/02', // or 2024-02-02T00:00:00
});

return (
  <div>
    <div style={{ height: '600px', width: '1200px' }}>
      <Epg {...getEpgProps()}>
        <Layout
            {...getLayoutProps()}
            renderMobileControllers={(props) => <MobileHeader {...props} />}
          />
      </Epg>
    </div>
  </div>
);
}

export default App;