TAL-51 - show talent badges

src/apps/profiles/src/member-badges/MemberBadgesPage.module.scss

@@ -2,16 +2,7 @@
 
 .container {
     .backLink {
-        text-transform: uppercase;
-        color: $turq-160;
-        font-weight: $font-weight-bold;
         margin: $sp-6 0;
-        display: flex;
-        align-items: center;
-
-        svg {
-            margin-right: $sp-2;
-        }
     }
 
     .badgesWrapper {
@@ -67,4 +58,4 @@
             }
         }
     }
-}
+}

src/apps/profiles/src/member-badges/MemberBadgesPage.tsx

@@ -1,16 +1,17 @@
 import { Dispatch, FC, SetStateAction, useCallback, useEffect, useState } from 'react'
-import { Link, Params, useParams } from 'react-router-dom'
+import { Link, Params, useNavigate, useParams } from 'react-router-dom'
 import { bind } from 'lodash'
 
 import { profileGetPublicAsync, useMemberBadges, UserBadge, UserBadgesResponse, UserProfile } from '~/libs/core'
-import { ContentLayout, LoadingSpinner } from '~/libs/ui'
+import { Button, ContentLayout, IconSolid, LoadingSpinner } from '~/libs/ui'
 
 import { MemberBadgeModal } from '../components'
 
 import styles from './MemberBadgesPage.module.scss'
 
 const MemberBadgesPage: FC<{}> = () => {
     const routeParams: Params<string> = useParams()
+    const navigate = useNavigate()
 
     const [profile, setProfile]: [
         UserProfile | undefined,
@@ -32,6 +33,10 @@ const MemberBadgesPage: FC<{}> = () => {
         setSelectedBadge(badge)
     }, [])
 
+    const handleBackBtn = useCallback(() => {
+        navigate(-1)
+    }, [navigate])
+
     useEffect(() => {
         if (routeParams.memberHandle) {
             profileGetPublicAsync(routeParams.memberHandle)
@@ -55,24 +60,17 @@ const MemberBadgesPage: FC<{}> = () => {
                 <ContentLayout
                     outerClass={styles.container}
                 >
-                    <Link to={`/${profile?.handle}`} className={styles.backLink}>
-                        <svg
-                            xmlns='http://www.w3.org/2000/svg'
-                            width='14'
-                            height='12'
-                            fill='none'
-                            viewBox='0 0 14 12'
+                    <div className={styles.backLink}>
+                        <Button
+                            link
+                            size='lg'
+                            iconToLeft
+                            icon={IconSolid.ArrowLeftIcon}
+                            onClick={handleBackBtn}
                         >
-                            <path
-                                fill='#137D60'
-                                fillRule='evenodd'
-                                // eslint-disable-next-line max-len
-                                d='M6.766 11.366a.8.8 0 01-1.132 0l-4.8-4.8a.8.8 0 010-1.132l4.8-4.8a.8.8 0 111.132 1.132L3.33 5.2h9.27a.8.8 0 010 1.6H3.33l3.435 3.434a.8.8 0 010 1.132z'
-                                clipRule='evenodd'
-                            />
-                        </svg>
-                        Return to Profile
-                    </Link>
+                            Return to profile
+                        </Button>
+                    </div>
 
                     <div className={styles.badgesWrapper}>
                         <h3>COMMUNITY AWARDS & HONORS</h3>

src/apps/talent-search/src/talent-search.routes.tsx

@@ -13,6 +13,10 @@ const TalentPage: LazyLoadedComponent = lazyLoad(
     () => import('./routes/talent-page'),
     'TalentPage',
 )
+const MemberBadgesPage: LazyLoadedComponent = lazyLoad(
+    () => import('@profiles/member-badges'),
+    'MemberBadgesPage',
+)
 
 const isOnAppSubdomain = EnvironmentConfig.SUBDOMAIN === AppSubdomain.talentSearch
 export const rootRoute: string = (
@@ -46,6 +50,11 @@ export const talentSearchRoutes: ReadonlyArray<PlatformRoute> = [
                 element: <TalentPage />,
                 route: '/talent/:memberHandle',
             },
+            {
+                element: <MemberBadgesPage />,
+                id: 'MemberBadgesPage',
+                route: '/talent/:memberHandle/badges',
+            },
         ],
         domain: AppSubdomain.talentSearch,
         element: <TalentSearchAppRoot />,