@100mslive/roomkit-react 0.3.10-alpha.17 → 0.3.10-alpha.18

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.3.10-alpha.17",
+  "version": "0.3.10-alpha.18",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -74,12 +74,12 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.3.10-alpha.17",
+    "@100mslive/hls-player": "0.3.10-alpha.18",
     "@100mslive/hms-noise-cancellation": "0.0.1",
-    "@100mslive/hms-virtual-background": "1.13.10-alpha.17",
-    "@100mslive/hms-whiteboard": "0.0.0-alpha.11",
-    "@100mslive/react-icons": "0.10.10-alpha.17",
-    "@100mslive/react-sdk": "0.10.10-alpha.17",
+    "@100mslive/hms-virtual-background": "1.13.10-alpha.18",
+    "@100mslive/hms-whiteboard": "0.0.0-alpha.12",
+    "@100mslive/react-icons": "0.10.10-alpha.18",
+    "@100mslive/react-sdk": "0.10.10-alpha.18",
     "@100mslive/types-prebuilt": "0.12.8",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -115,5 +115,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "dc34271348a9b6b064f488af4679f2118a91587d"
+  "gitHead": "9443f8d47837b1c8412b40c4e7569f13311ae46c"
 }

package/src/Prebuilt/common/constants.ts

@@ -1,6 +1,5 @@
 import { parsedUserAgent } from '@100mslive/react-sdk';
 
-export const DEFAULT_WAITING_VIEWER_ROLE = 'waiting-room';
 export const QUERY_PARAM_SKIP_PREVIEW = 'skip_preview';
 export const QUERY_PARAM_SKIP_PREVIEW_HEADFUL = 'skip_preview_headful';
 export const QUERY_PARAM_NAME = 'name';
@@ -30,7 +29,6 @@ export const APP_DATA = {
   appConfig: 'appConfig',
   sidePane: 'sidePane',
   hlsStats: 'hlsStats',
-  waitingViewerRole: 'waitingViewerRole',
   subscribedNotifications: 'subscribedNotifications',
   logo: 'logo',
   hlsStarted: 'hlsStarted',

package/src/Prebuilt/common/hooks.ts

@@ -1,17 +1,22 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useMedia } from 'react-use';
 import { HMSHLSPlayer } from '@100mslive/hls-player';
 import { JoinForm_JoinBtnType } from '@100mslive/types-prebuilt/elements/join_form';
 import {
+  HMSPeer,
   HMSRecording,
   parsedUserAgent,
   selectAvailableRoleNames,
+  selectIsAllowedToPublish,
   selectIsConnectedToRoom,
+  selectLocalPeerRole,
   selectPeerCount,
   selectPeerMetadata,
   selectPeers,
+  selectPeersByRoles,
   selectRecordingState,
   selectRemotePeers,
+  selectRolesMap,
   useHMSActions,
   useHMSStore,
   useHMSVanillaStore,
@@ -218,3 +223,31 @@ export function getResolution(
   }
   return resolution;
 }
+
+export interface WaitingRoomInfo {
+  isNotAllowedToPublish: boolean;
+  isScreenOnlyPublishParams: boolean;
+  hasSubscribedRolePublishing: boolean;
+}
+export function useWaitingRoomInfo(): WaitingRoomInfo {
+  const localPeerRole = useHMSStore(selectLocalPeerRole);
+  const { video, audio, screen } = useHMSStore(selectIsAllowedToPublish);
+  const roles = useHMSStore(selectRolesMap);
+  const peersByRoles = useHMSStore(selectPeersByRoles(localPeerRole?.subscribeParams.subscribeToRoles || []));
+  const isNotAllowedToPublish = video && audio && screen;
+  const isScreenOnlyPublishParams: boolean = screen;
+  const hasSubscribedRolePublishing: boolean = useMemo(() => {
+    return peersByRoles.some((peer: HMSPeer) => {
+      if (peer.roleName && roles[peer.roleName] && !peer.isLocal) {
+        return !!roles[peer.roleName].publishParams?.allowed.length;
+      }
+      return false;
+    });
+  }, [peersByRoles, roles]);
+
+  return {
+    isNotAllowedToPublish,
+    isScreenOnlyPublishParams,
+    hasSubscribedRolePublishing,
+  };
+}

package/src/Prebuilt/common/utils.js

@@ -142,22 +142,22 @@ export const getPeerResponses = (questions, peerid, userid) => {
   return questions.map(question =>
     question.responses?.filter(
       response =>
-        ((response && response.peer?.peerid === peerid) || response.peer?.userid === userid) && !response.skipped,
+        response && (response.peer?.peerid === peerid || response.peer?.userid === userid) && !response.skipped,
     ),
   );
 };
 
-export const getLastAttemptedIndex = (questions, peerid, userid = '') => {
-  const peerResponses = getPeerResponses(questions, peerid, userid) || [];
-  for (let i = 0; i < peerResponses.length; i++) {
-    // If another peer has attempted, undefined changes to an empty array
-    if (peerResponses[i] === undefined || peerResponses[i].length === 0) {
-      // Backend question index starts at 1
-      return i + 1;
+export const getIndexToShow = responses => {
+  let lastAttemptedIndex = 0;
+
+  Object.keys(responses).forEach(key => {
+    const keyNum = parseInt(key);
+    if (keyNum > lastAttemptedIndex && responses[key]) {
+      lastAttemptedIndex = keyNum;
     }
-  }
-  // To indicate all have been attempted
-  return questions.length + 1;
+  });
+
+  return lastAttemptedIndex + 1;
 };
 
 export const getPeerParticipationSummary = (poll, localPeerID, localCustomerUserID) => {

package/src/Prebuilt/components/AppData/AppData.tsx

@@ -21,7 +21,6 @@ import { useSetAppDataByKey } from './useUISettings';
 import {
   APP_DATA,
   CHAT_SELECTOR,
-  DEFAULT_WAITING_VIEWER_ROLE,
   POLL_STATE,
   SIDE_PANE_OPTIONS,
   UI_MODE_GRID,
@@ -56,7 +55,6 @@ const initialAppData = {
   [APP_DATA.hlsStarted]: false,
   [APP_DATA.rtmpStarted]: false,
   [APP_DATA.recordingStarted]: false,
-  [APP_DATA.waitingViewerRole]: DEFAULT_WAITING_VIEWER_ROLE,
   [APP_DATA.dropdownList]: [],
   [APP_DATA.authToken]: '',
   [APP_DATA.minimiseInset]: false,

package/src/Prebuilt/components/AppData/useUISettings.js

@@ -48,9 +48,6 @@ export const useSetUiSettings = uiSettingKey => {
   return [value, setValue];
 };
 
-export const useWaitingViewerRole = () => {
-  return useHMSStore(selectAppData(APP_DATA.waitingViewerRole));
-};
 export const useIsHLSStartedFromUI = () => {
   return useHMSStore(selectAppData(APP_DATA.hlsStarted));
 };

package/src/Prebuilt/components/Chat/Chat.tsx

@@ -10,17 +10,20 @@ import { Box, Flex } from '../../../Layout';
 import { config as cssConfig } from '../../../Theme';
 // @ts-ignore: No implicit any
 import { EmojiReaction } from '../EmojiReaction';
+import { MoreSettings } from '../MoreSettings/MoreSettings';
+import { RaiseHand } from '../RaiseHand';
 import { ChatBody } from './ChatBody';
 import { ChatFooter } from './ChatFooter';
 import { ChatBlocked, ChatPaused } from './ChatStates';
 import { PinnedMessage } from './PinnedMessage';
 import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 import { useSidepaneResetOnLayoutUpdate } from '../AppData/useSidepaneResetOnLayoutUpdate';
+import { useIsPeerBlacklisted } from '../hooks/useChatBlacklist';
 import { useLandscapeHLSStream, useMobileHLSStream } from '../../common/hooks';
 import { SESSION_STORE_KEY, SIDE_PANE_OPTIONS } from '../../common/constants';
 
 export const Chat = () => {
-  const { elements } = useRoomLayoutConferencingScreen();
+  const { elements, screenType } = useRoomLayoutConferencingScreen();
   const listRef = useRef<VariableSizeList | null>(null);
   const hmsActions = useHMSActions();
   const vanillaStore = useHMSVanillaStore();
@@ -29,6 +32,7 @@ export const Chat = () => {
   const isMobileHLSStream = useMobileHLSStream();
   const isLandscapeStream = useLandscapeHLSStream();
   useSidepaneResetOnLayoutUpdate('chat', SIDE_PANE_OPTIONS.CHAT);
+  const isLocalPeerBlacklisted = useIsPeerBlacklisted({ local: true });
 
   const scrollToBottom = useCallback(
     (unreadCount = 0) => {
@@ -57,20 +61,27 @@ export const Chat = () => {
     >
       {isMobile && elements?.chat?.is_overlay && !streaming ? null : <PinnedMessage />}
       <ChatBody ref={listRef} scrollToBottom={scrollToBottom} />
-
-      <ChatPaused />
-      <ChatBlocked />
+      <Flex align="center" css={{ w: '100%', gap: '$2' }}>
+        <ChatPaused />
+        <ChatBlocked />
+        {streaming && (!isChatEnabled || isLocalPeerBlacklisted) && (
+          <>
+            <RaiseHand css={{ bg: '$surface_default' }} />
+            <MoreSettings elements={elements} screenType={screenType} />
+          </>
+        )}
+      </Flex>
       {isMobile && elements?.chat?.is_overlay && !streaming ? <PinnedMessage /> : null}
       {isChatEnabled ? (
         <ChatFooter onSend={scrollToBottom}>
           <NewMessageIndicator scrollToBottom={scrollToBottom} listRef={listRef} />
         </ChatFooter>
       ) : null}
-      {(isMobileHLSStream || isLandscapeStream) && (
+      {streaming && (
         <Box
           css={{
             position: 'absolute',
-            ...match({ isLandscapeStream, isMobileHLSStream, isChatEnabled })
+            ...match({ isLandscapeStream, isMobileHLSStream, isChatEnabled, isLocalPeerBlacklisted })
               .with(
                 {
                   isLandscapeStream: true,
@@ -96,6 +107,7 @@ export const Chat = () => {
                 {
                   isMobileHLSStream: true,
                   isChatEnabled: true,
+                  isLocalPeerBlacklisted: false,
                 },
                 () => ({ bottom: '$17', right: '$8' }),
               )
@@ -103,6 +115,14 @@ export const Chat = () => {
                 {
                   isLandscapeStream: false,
                   isChatEnabled: true,
+                  isLocalPeerBlacklisted: true,
+                },
+                () => ({ bottom: '$18', right: '$8' }),
+              )
+              .with(
+                {
+                  isMobileHLSStream: true,
+                  isLocalPeerBlacklisted: true,
                 },
                 () => ({ bottom: '$20', right: '$8' }),
               )

package/src/Prebuilt/components/Chat/ChatFooter.tsx

@@ -102,6 +102,19 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
       }
     }
   }, [defaultSelection, selectedPeer, selectedRole, setRoleSelector, isMobile, isLandscapeHLSStream, elements?.chat]);
+
+  const resetInputHeight = useCallback(() => {
+    if (inputRef.current) {
+      inputRef.current.style.height = `${Math.max(32, inputRef.current.value ? inputRef.current.scrollHeight : 0)}px`;
+    }
+  }, []);
+
+  const updateInputHeight = useCallback(() => {
+    if (inputRef.current) {
+      inputRef.current.style.height = `${Math.max(32, Math.min(inputRef.current.scrollHeight, 24 * 4))}px`;
+    }
+  }, []);
+
   const sendMessage = useCallback(async () => {
     const message = inputRef?.current?.value;
     if (!message || !message.trim().length) {
@@ -116,6 +129,7 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
         await hmsActions.sendBroadcastMessage(message);
       }
       inputRef.current.value = '';
+      resetInputHeight();
       setTimeout(() => {
         onSend(1);
       }, 0);
@@ -131,6 +145,7 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
     const messageElement = inputRef.current;
     if (messageElement) {
       messageElement.value = draftMessage;
+      updateInputHeight();
     }
   }, [draftMessage]);
 
@@ -197,11 +212,10 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
       {selection && (
         <Flex align="center" css={{ gap: '$4', w: '100%' }}>
           <Flex
-            align="center"
+            align="end"
             css={{
               bg: isOverlayChat && isMobile ? '$surface_dim' : '$surface_default',
               minHeight: '$16',
-              maxHeight: '$24',
               position: 'relative',
               py: '$6',
               pl: '$8',
@@ -238,6 +252,8 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
               }}
               autoComplete="off"
               aria-autocomplete="none"
+              onChange={updateInputHeight}
+              onBlur={resetInputHeight}
               onPaste={e => e.stopPropagation()}
               onCut={e => e.stopPropagation()}
               onCopy={e => e.stopPropagation()}

package/src/Prebuilt/components/Chat/ChatStates.tsx

@@ -30,7 +30,7 @@ export const ChatPaused = () => {
     <Flex
       align="center"
       justify="between"
-      css={{ borderRadius: '$1', bg: '$surface_default', p: '$4 $4 $4 $8', w: '100%' }}
+      css={{ borderRadius: '$1', bg: '$surface_default', p: '$2 $4 $2 $8', w: '100%' }}
     >
       <Box>
         <Text variant="sm" css={{ fontWeight: '$semiBold', color: '$on_surface_high' }}>

package/src/Prebuilt/components/Footer/ChatToggle.tsx

@@ -21,7 +21,11 @@ export const ChatToggle = ({ onClick }: { onClick?: () => void }) => {
       }}
     >
       <Tooltip key="chat" title={`${isChatOpen ? 'Close' : 'Open'} chat`}>
-        <IconButton onClick={() => (onClick ? onClick() : toggleChat())} active={!isChatOpen} data-testid="chat_btn">
+        <IconButton
+          onClick={() => (onClick ? onClick() : toggleChat())}
+          css={{ bg: isChatOpen ? '$surface_brighter' : '' }}
+          data-testid="chat_btn"
+        >
           <ChatIcon />
         </IconButton>
       </Tooltip>

package/src/Prebuilt/components/Footer/ParticipantList.tsx

@@ -86,6 +86,7 @@ export const ParticipantList = ({
       return { ...filterValue };
     });
   }, []);
+
   if (peerCount === 0) {
     return null;
   }
@@ -128,7 +129,7 @@ export const ParticipantList = ({
 export const ParticipantCount = () => {
   const peerCount = useHMSStore(selectPeerCount);
   const toggleSidepane = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
-  const isParticipantsOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.PARTICIPANTS);
+  const isPeerListOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.PARTICIPANTS);
 
   if (peerCount === 0) {
     return null;
@@ -139,13 +140,13 @@ export const ParticipantCount = () => {
         w: 'auto',
         p: '$4',
         h: 'auto',
+        bg: isPeerListOpen ? '$surface_brighter' : '',
       }}
       onClick={() => {
         if (peerCount > 0) {
           toggleSidepane();
         }
       }}
-      active={!isParticipantsOpen}
       data-testid="participant_list"
     >
       <PeopleIcon />
@@ -447,6 +448,7 @@ export const ParticipantSearch = ({
     300,
     [value, onSearch],
   );
+
   return (
     <Flex
       align="center"

package/src/Prebuilt/components/Footer/PollsToggle.tsx

@@ -27,7 +27,7 @@ export const PollsToggle = () => {
           togglePollView();
           setUnreadPollQuiz(false);
         }}
-        active={!isPollsOpen}
+        css={{ bg: isPollsOpen ? '$surface_brighter' : '' }}
         data-testid="polls_btn"
       >
         {unreadPollQuiz ? <QuizActiveIcon /> : <QuizIcon />}

package/src/Prebuilt/components/Polls/CreatePollQuiz/PollsQuizMenu.tsx

@@ -152,18 +152,6 @@ const AddMenu = () => {
             Hide Vote Count
           </Text>
         </Flex>
-        {/* <Flex align="center" css={{ mt: '$10' }}>
-          <Switch onCheckedChange={value => setAnonymous(value)} css={{ mr: '$6' }} />
-          <Text variant="body2" css={{ c: '$on_surface_medium' }}>
-            Make Results Anonymous
-          </Text>
-        </Flex> */}
-        {/* <Timer
-        timer={timer}
-        setTimer={setTimer}
-        showTimerDropDown={showTimerDropDown}
-        setShowTimerDropDown={setShowTimerDropDown}
-      /> */}
 
         <Button
           variant="primary"
@@ -198,8 +186,8 @@ const PrevMenu = () => {
   const sortedPolls = useMemo(
     () =>
       polls
-        ?.sort((a, b) => (b.createdAt?.getTime() || 0) - (a.createdAt?.getTime() || 0))
-        ?.sort((a, b) => (b.state === 'started' ? 1 : 0) - (a.state === 'started' ? 1 : 0)),
+        ?.sort((a, b) => (b?.createdAt?.getTime?.() || 0) - (a?.createdAt?.getTime?.() || 0))
+        ?.sort((a, b) => (b?.state === 'started' ? 1 : 0) - (a?.state === 'started' ? 1 : 0)),
     [polls],
   );
   const permissions = useHMSStore(selectPermissions);
@@ -208,7 +196,6 @@ const PrevMenu = () => {
     const updatePolls = async () => {
       await hmsActions.interactivityCenter.getPolls();
     };
-
     updatePolls();
   }, [hmsActions.interactivityCenter]);
 

package/src/Prebuilt/components/Polls/Voting/LeaderboardSummary.tsx

@@ -4,6 +4,8 @@ import { ChevronLeftIcon, ChevronRightIcon, CrossIcon } from '@100mslive/react-i
 import { Box, Flex } from '../../../../Layout';
 import { Loading } from '../../../../Loading';
 import { Text } from '../../../../Text';
+// @ts-ignore
+import { Container } from '../../Streaming/Common';
 import { LeaderboardEntry } from './LeaderboardEntry';
 import { PeerParticipationSummary } from './PeerParticipationSummary';
 // @ts-ignore
@@ -32,80 +34,83 @@ export const LeaderboardSummary = ({ pollID }: { pollID: string }) => {
   const questionCount = quiz.questions?.length || 0;
 
   return (
-    <Flex direction="column" css={{ size: '100%' }}>
-      <Flex justify="between" align="center" css={{ pb: '$6', borderBottom: '1px solid $border_bright', mb: '$8' }}>
-        <Flex align="center" css={{ gap: '$4' }}>
+    <Container rounded>
+      <Flex direction="column" css={{ size: '100%', p: '$8' }}>
+        <Flex justify="between" align="center" css={{ pb: '$6', borderBottom: '1px solid $border_bright', mb: '$8' }}>
+          <Flex align="center" css={{ gap: '$4' }}>
+            <Flex
+              css={{ color: '$on_surface_medium', '&:hover': { color: '$on_surface_high', cursor: 'pointer' } }}
+              onClick={() => setPollView(POLL_VIEWS.VOTE)}
+            >
+              <ChevronLeftIcon />
+            </Flex>
+            <Text variant="lg" css={{ fontWeight: '$semiBold' }}>
+              {quiz.title}
+            </Text>
+            <StatusIndicator status={quiz.state} />
+          </Flex>
           <Flex
             css={{ color: '$on_surface_medium', '&:hover': { color: '$on_surface_high', cursor: 'pointer' } }}
-            onClick={() => setPollView(POLL_VIEWS.VOTE)}
+            onClick={toggleSidepane}
           >
-            <ChevronLeftIcon />
+            <CrossIcon />
           </Flex>
-          <Text variant="lg" css={{ fontWeight: '$semiBold' }}>
-            {quiz.title}
-          </Text>
-          <StatusIndicator status={quiz.state} />
         </Flex>
-        <Flex
-          css={{ color: '$on_surface_medium', '&:hover': { color: '$on_surface_high', cursor: 'pointer' } }}
-          onClick={toggleSidepane}
-        >
-          <CrossIcon />
-        </Flex>
-      </Flex>
-
-      {!viewAllEntries ? <PeerParticipationSummary quiz={quiz} /> : null}
+        <Box css={{ overflowY: 'auto', mr: '-$4', pr: '$4' }}>
+          {!viewAllEntries ? <PeerParticipationSummary quiz={quiz} /> : null}
 
-      <Text variant="sm" css={{ fontWeight: '$semiBold', mt: '$4' }}>
-        Leaderboard
-      </Text>
-      <Text variant="xs" css={{ color: '$on_surface_medium' }}>
-        Based on score and time taken to cast the correct answer
-      </Text>
-      <Box
-        css={{
-          mt: '$8',
-          overflowY: 'auto',
-          flex: viewAllEntries ? '1 1 0' : 'unset',
-          mr: viewAllEntries ? '-$6' : 'unset',
-          px: viewAllEntries ? '0' : '$4',
-          pr: viewAllEntries ? '$6' : '$4',
-          backgroundColor: viewAllEntries ? '' : '$surface_default',
-          borderRadius: '$1',
-        }}
-      >
-        {quizLeaderboard?.entries &&
-          quizLeaderboard.entries
-            .slice(0, viewAllEntries ? undefined : 5)
-            .map(question => (
-              <LeaderboardEntry
-                key={question.position}
-                position={question.position}
-                score={question.score}
-                questionCount={questionCount}
-                correctResponses={question.correctResponses}
-                userName={question.peer.username || ''}
-                maxPossibleScore={maxPossibleScore}
-                duration={question.duration}
-              />
-            ))}
-        {quizLeaderboard?.entries?.length > 5 && !viewAllEntries ? (
-          <Flex
-            align="center"
-            justify="end"
+          <Text variant="sm" css={{ fontWeight: '$semiBold', mt: '$4' }}>
+            Leaderboard
+          </Text>
+          <Text variant="xs" css={{ color: '$on_surface_medium' }}>
+            Based on score and time taken to cast the correct answer
+          </Text>
+          <Box
             css={{
-              w: '100%',
-              borderTop: '1px solid $border_bright',
-              cursor: 'pointer',
-              color: '$on_surface_high',
-              p: '$6 $2',
+              mt: '$8',
+              overflowY: 'auto',
+              flex: viewAllEntries ? '1 1 0' : 'unset',
+              mr: viewAllEntries ? '-$6' : 'unset',
+              px: viewAllEntries ? '0' : '$4',
+              pr: viewAllEntries ? '$6' : '$4',
+              backgroundColor: viewAllEntries ? '' : '$surface_default',
+              borderRadius: '$1',
             }}
-            onClick={() => setViewAllEntries(true)}
           >
-            <Text variant="sm">View All</Text> <ChevronRightIcon />
-          </Flex>
-        ) : null}
-      </Box>
-    </Flex>
+            {quizLeaderboard?.entries &&
+              quizLeaderboard.entries
+                .slice(0, viewAllEntries ? undefined : 5)
+                .map(question => (
+                  <LeaderboardEntry
+                    key={question.position}
+                    position={question.position}
+                    score={question.score}
+                    questionCount={questionCount}
+                    correctResponses={question.correctResponses}
+                    userName={question.peer.username || ''}
+                    maxPossibleScore={maxPossibleScore}
+                    duration={question.duration}
+                  />
+                ))}
+            {quizLeaderboard?.entries?.length > 5 && !viewAllEntries ? (
+              <Flex
+                align="center"
+                justify="end"
+                css={{
+                  w: '100%',
+                  borderTop: '1px solid $border_bright',
+                  cursor: 'pointer',
+                  color: '$on_surface_high',
+                  p: '$6 $2',
+                }}
+                onClick={() => setViewAllEntries(true)}
+              >
+                <Text variant="sm">View All</Text> <ChevronRightIcon />
+              </Flex>
+            ) : null}
+          </Box>
+        </Box>
+      </Flex>
+    </Container>
   );
 };