feat: AgentView on TeamView

l3vels · Sep 26, 2023 · abdef37 · abdef37
1 parent 7857627
commit abdef37
Showing 1 changed file with 51 additions and 2 deletions.
diff --git a/apps/ui/src/pages/TeamOfAgents/TeamOfAgentView.tsx b/apps/ui/src/pages/TeamOfAgents/TeamOfAgentView.tsx
@@ -18,15 +18,21 @@ import styled from 'styled-components'
 
 import Typography from '@l3-lib/ui-core/dist/Typography'
 import Tags from '@l3-lib/ui-core/dist/Tags'
+import IconButton from '@l3-lib/ui-core/dist/IconButton'
+
+import EyeOpen from '@l3-lib/ui-core/dist/icons/EyeOpen'
 
 import AvatarGenerator from 'components/AvatarGenerator/AvatarGenerator'
 
 import TeamOfAgentsDetailsBox from './components/TeamOfAgentsDetailsBox'
+import { useModal } from 'hooks'
 
 const TeamOfAgentView = ({ teamOfAgentsData }: { teamOfAgentsData?: any }) => {
   const { teamId } = useParams()
   const { data } = useTeamOfAgentsByIdService({ id: teamId })
 
+  const { openModal } = useModal()
+
   if (!data && !teamOfAgentsData) return <div />
 
   const { team_agents } = data || teamOfAgentsData
@@ -89,7 +95,27 @@ const TeamOfAgentView = ({ teamOfAgentsData }: { teamOfAgentsData?: any }) => {
                       />
                     </StyledMainTextWrapper>
 
-                    <Tags label={role} readOnly size='small' outlined />
+                    <StyledSecondInfoWrapper>
+                      <IconButton
+                        onClick={() =>
+                          openModal({
+                            name: 'agent-view-modal',
+                            data: {
+                              id: agent.id,
+                            },
+                          })
+                        }
+                        icon={() => (
+                          <StyledIconWrapper className='hiddenButton'>
+                            <EyeOpen size={50} />
+                          </StyledIconWrapper>
+                        )}
+                        size={IconButton.sizes.SMALL}
+                        kind={IconButton.kinds.TERTIARY}
+                        // ariaLabel='View'
+                      />
+                      <Tags label={role} readOnly size='small' outlined />
+                    </StyledSecondInfoWrapper>
                   </StyledAgent>
                 )
               })}
@@ -115,14 +141,24 @@ const StyledAgentsWrapper = styled.div`
 
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 6px;
 `
 const StyledAgent = styled.div`
   display: flex;
 
   align-items: center;
 
   gap: 6px;
+
+  padding: 5px 10px;
+  border-radius: 8px;
+  :hover {
+    background: rgba(0, 0, 0, 0.1);
+
+    .hiddenButton {
+      opacity: 1;
+    }
+  }
 `
 const StyledMainTextWrapper = styled.div`
   /* text-align: center; */
@@ -134,3 +170,16 @@ const StyledMainTextWrapper = styled.div`
   /* width: 100%; */
   /* max-width: 400px; */
 `
+const StyledSecondInfoWrapper = styled.div`
+  display: flex;
+  align-items: center;
+
+  gap: 5px;
+`
+
+const StyledIconWrapper = styled.div`
+  /* color: #000; */
+  color: transparent;
+
+  opacity: 0;
+`