TC&You init - tracks

Author: kkartunov

src/apps/accounts/src/lib/assets/index.ts

@@ -2,3 +2,4 @@ export * from './security'
 export * from './preferences'
 export * from './payments'
 export * from './tools'
+export * from './tcandyou'

src/apps/accounts/src/lib/assets/tcandyou/data_science.svg

@@ -0,0 +1,9 @@
+import { ReactComponent as DevelopmentTrackIcon } from './develop.svg'
+import { ReactComponent as DesignTrackIcon } from './design.svg'
+import { ReactComponent as DataScienceTrackIcon } from './data_science.svg'
+
+export {
+    DesignTrackIcon,
+    DataScienceTrackIcon,
+    DevelopmentTrackIcon,
+}

src/apps/accounts/src/lib/assets/tcandyou/design.svg

@@ -9,6 +9,7 @@ import { AccountTab } from './account'
 import { PreferencesTab } from './preferences'
 import { PaymentsTab } from './payments'
 import { ToolsTab } from './tools'
+import { TCandYouTab } from './tcandyou'
 import styles from './AccountSettingsTabs.module.scss'
 
 interface AccountSettingsTabsProps {
@@ -45,6 +46,10 @@ const AccountSettingsTabs: FC<AccountSettingsTabsProps> = (props: AccountSetting
                     'Topcoder'].join(' | ')}
             </PageTitle>
 
+            {activeTab === AccountSettingsTabViews.tcandyou && (
+                <TCandYouTab profile={props.profile} memberTraits={memberTraits} />
+            )}
+
             {activeTab === AccountSettingsTabViews.tools && (
                 <ToolsTab profile={props.profile} memberTraits={memberTraits} />
             )}

src/apps/accounts/src/lib/assets/tcandyou/develop.svg

@@ -5,9 +5,14 @@ export enum AccountSettingsTabViews {
     account = '1',
     preferences = '2',
     payment = '3',
+    tcandyou = '4',
 }
 
 export const AccountSettingsTabsConfig: TabsNavItem[] = [
+    {
+        id: AccountSettingsTabViews.tcandyou,
+        title: 'Topcoder & You',
+    },
     {
         id: AccountSettingsTabViews.tools,
         title: 'Tools',
@@ -28,6 +33,7 @@ export const AccountSettingsTabsConfig: TabsNavItem[] = [
 
 export function getHashFromTabId(tabId: string): string {
     switch (tabId) {
+        case AccountSettingsTabViews.tcandyou: return '#tcandyou'
         case AccountSettingsTabViews.tools: return '#tools'
         case AccountSettingsTabViews.account: return '#account'
         case AccountSettingsTabViews.preferences: return '#preferences'
@@ -38,6 +44,7 @@ export function getHashFromTabId(tabId: string): string {
 
 export function getTabIdFromHash(hash: string): string {
     switch (hash) {
+        case '#tcandyu': return AccountSettingsTabViews.tcandyou
         case '#tools': return AccountSettingsTabViews.tools
         case '#account': return AccountSettingsTabViews.account
         case '#preferences': return AccountSettingsTabViews.preferences

src/apps/accounts/src/lib/assets/tcandyou/index.ts

@@ -0,0 +1,12 @@
+@import '@libs/ui/styles/includes';
+
+.container {
+    background-color: $black-5;
+    padding: $sp-6;
+    margin: $sp-8 0;
+    border-radius: 6px;
+
+    @include ltelg {
+        padding: $sp-4;
+    }
+}

src/apps/accounts/src/settings/tabs/AccountSettingsTabs.tsx

@@ -0,0 +1,21 @@
+import { FC } from 'react'
+
+import { UserProfile, UserTraits } from '~/libs/core'
+
+import { Tracks } from './tracks'
+import styles from './TCandYouTab.module.scss'
+
+interface TCandYouTabProps {
+    profile: UserProfile
+    memberTraits: UserTraits[] | undefined
+}
+
+const TCandYouTab: FC<TCandYouTabProps> = (props: TCandYouTabProps) => (
+    <div className={styles.container}>
+        <h3>You And Topcoder</h3>
+
+        <Tracks profile={props.profile} />
+    </div>
+)
+
+export default TCandYouTab

src/apps/accounts/src/settings/tabs/config/account-settings-tabs-config.ts

@@ -0,0 +1 @@
+export { default as TCandYouTab } from './TCandYouTab'