TP-47022 | members details inheritance removed (#80)

src/Pages/Severity/SeverityForm.tsx

@@ -7,7 +7,7 @@ import { Typography } from '@navi/web-ui/lib/primitives';
 import { LoadingIcon } from '@navi/web-ui/lib/icons';
 
 import { ApiService } from '@src/services/api';
-import MembersDetails from '@src/components/MembersDetails';
+import MembersDetails from '@src/components/SevMemberDetails';
 import {
   FETCH_SINGLE_SEVERITY_DATA,
   SeverityFormProps,

src/components/SevMemberDetails/Members.module.scss

@@ -0,0 +1,13 @@
+.member-details-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 12px;
+  cursor: pointer;
+}
+
+.participant-detail {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}

src/components/SevMemberDetails/index.tsx

@@ -0,0 +1,54 @@
+import { useState } from 'react';
+
+import { Avatar, Typography } from '@navi/web-ui/lib/primitives';
+
+import styles from './Members.module.scss';
+
+const MembersDetails = (props: any) => {
+  const { data } = props;
+  const totalMembers = data?.participants?.length;
+  const [showTotalMembers, setShowTotalMembers] = useState(10);
+
+  return (
+    <div>
+      {totalMembers ? (
+        <>
+          {data?.participants
+            ?.slice(0, showTotalMembers)
+            ?.map((participant, index) => (
+              <div
+                key={participant?.id}
+                className={styles['member-details-wrapper']}
+              >
+                <div className={styles['participant-detail']}>
+                  <Avatar size={20} isImage src={participant?.image} />{' '}
+                  <Typography variant="p3">{participant?.name}</Typography>
+                  {totalMembers > 10 && index === showTotalMembers - 1 ? (
+                    totalMembers !== showTotalMembers ? (
+                      <div onClick={() => setShowTotalMembers(totalMembers)}>
+                        <Typography variant="h5">
+                          +{totalMembers - showTotalMembers} More
+                        </Typography>
+                      </div>
+                    ) : (
+                      <div onClick={() => setShowTotalMembers(10)}>
+                        <Typography variant="h5">View less</Typography>
+                      </div>
+                    )
+                  ) : (
+                    ''
+                  )}
+                </div>
+              </div>
+            ))}
+        </>
+      ) : (
+        <Typography variant="p3" className={styles['member-details-wrapper']}>
+          -
+        </Typography>
+      )}
+    </div>
+  );
+};
+
+export default MembersDetails;