feat: add recommended languages

client/src/app/onboarding/ui/steps/languages/languages.tsx

@@ -3,11 +3,12 @@ import { EmptyTile } from './ui/empty-tile';
 import { useState } from 'react';
 import { Search } from './ui/search';
 import styles from './languages.module.scss';
-import { programmingLanguages } from '@/shared/constant';
+import { programmingLanguages, recommendedLanguages } from '@/shared/constant';
 import { LanguageItem } from './ui/language-item';
 import { IOptionItem } from '@/widgets/search/types';
 
 const MAX_LANGS = 8;
+const SPECIALITY = 'Frontend/UI Developer'; // TODO: replace with real data. Hardcoded Right now
 
 export const Languages = () => {
   const [text, setText] = useState('');
@@ -40,7 +41,7 @@ export const Languages = () => {
                   const languagesItem = languages[index];
                   if (languagesItem) {
                     return (
-                      <div onClick={() => toggleLanguage(languagesItem)} key={languagesItem.label}>
+                      <div onClick={() => toggleLanguage(languagesItem)} key={index}>
                         <BadgeIcon isActive={true} data={languagesItem.label} />
                       </div>
                     );
@@ -61,7 +62,7 @@ export const Languages = () => {
               Recommended for you
             </Typography>
             <div className={styles.recommended_languages}>
-              {programmingLanguages.map((lang, index) => (
+              {recommendedLanguages[SPECIALITY].map((lang, index) => (
                 <LanguageItem
                   isActive={Boolean(languages.find(option => option.label === lang.label))}
                   onClick={() => toggleLanguage(lang)}
@@ -79,7 +80,7 @@ export const Languages = () => {
               {programmingLanguages.map((lang, index) => (
                 <LanguageItem
                   isActive={Boolean(languages.find(option => option.label === lang.label))}
-                  onClick={() => setLanguages(prev => [...prev, lang])}
+                  onClick={() => toggleLanguage(lang)}
                   language={lang.label}
                   key={index}
                 />

client/src/shared/constant/index.ts

@@ -1,4 +1,5 @@
 export { specialities } from './specialities';
+export { recommendedLanguages } from './recommended-languages';
 export { experiences, type ExperienceProps } from './experiences';
 export { badgeColors, badgeTextColors } from './badge-colors';
 export { programmingLanguages } from './programming-languages';

client/src/shared/constant/recommended-languages.ts

@@ -0,0 +1,97 @@
+export const recommendedLanguages = {
+  'Backend Developer': [
+    { label: 'JavaScript', value: 'javascript' },
+    { label: 'PHP', value: 'php' },
+    { label: 'Python', value: 'python' },
+    { label: 'Java', value: 'java' },
+    { label: 'Go', value: 'go' },
+  ],
+  'Cyber Security': [
+    { label: 'Java', value: 'java' },
+    { label: 'C++', value: 'cpp' },
+    { label: 'C', value: 'c' },
+    { label: 'Assembly', value: 'assembly' },
+    { label: 'Python', value: 'python' },
+  ],
+  'Data Engineer': [
+    { label: 'Python', value: 'python' },
+    { label: 'R', value: 'r' },
+    { label: 'SQL', value: 'sql' },
+    { label: 'Java', value: 'java' },
+    { label: 'Scala', value: 'scala' },
+  ],
+  'Data Scientist': [
+    { label: 'Python', value: 'python' },
+    { label: 'R', value: 'r' },
+    { label: 'SQL', value: 'sql' },
+    { label: 'Java', value: 'java' },
+    { label: 'Scala', value: 'scala' },
+  ],
+  'Database Developer': [
+    { label: 'Python', value: 'python' },
+    { label: 'R', value: 'r' },
+    { label: 'SQL', value: 'sql' },
+    { label: 'Java', value: 'java' },
+    { label: 'Scala', value: 'scala' },
+  ],
+  'Desktop Applications Developer': [
+    { label: 'Java', value: 'java' },
+    { label: 'JavaScript', value: 'javascript' },
+    { label: 'Kotlin', value: 'kotlin' },
+    { label: 'Dart', value: 'dart' },
+    { label: 'C#', value: 'csharp' },
+  ],
+  'DevOps Engineer': [
+    { label: 'Python', value: 'python' },
+    { label: 'Java', value: 'java' },
+    { label: 'Go', value: 'go' },
+    { label: 'PHP', value: 'php' },
+    { label: 'JavaScript', value: 'javascript' },
+  ],
+  'Embedded Systems Developer': [
+    { label: 'C', value: 'c' },
+    { label: 'Rust', value: 'rust' },
+    { label: 'Go', value: 'go' },
+    { label: 'C++', value: 'cpp' },
+    { label: 'Embedded C', value: 'embeddedc' },
+  ],
+  'Frontend/UI Developer': [
+    { label: 'JavaScript', value: 'javascript' },
+    { label: 'TypeScript', value: 'typescript' },
+    { label: 'Python', value: 'python' },
+    { label: 'Swift', value: 'swift' },
+    { label: 'Java', value: 'java' },
+  ],
+  'Full-Stack Developer': [
+    { label: 'JavaScript', value: 'javascript' },
+    { label: 'Go', value: 'go' },
+    { label: 'Python', value: 'python' },
+    { label: 'PHP', value: 'php' },
+    { label: 'Java', value: 'java' },
+  ],
+  'Machine Learning Engineer': [
+    { label: 'Python', value: 'python' },
+    { label: 'R', value: 'r' },
+    { label: 'SQL', value: 'sql' },
+    { label: 'Java', value: 'java' },
+    { label: 'Scala', value: 'scala' },
+  ],
+  'Mobile Developer': [
+    { label: 'Kotlin', value: 'kotlin' },
+    { label: 'Swift', value: 'swift' },
+    { label: 'Java', value: 'java' },
+    { label: 'Javascript', value: 'javascript' },
+    { label: 'TypeScript', value: 'typescript' },
+  ],
+  'No-code Developer': [
+    // No specific programming languages recommended
+  ],
+  'QA/Test Engineer': [
+    { label: 'Python', value: 'python' },
+    { label: 'JavaScript', value: 'javascript' },
+    { label: 'Java', value: 'java' },
+    { label: 'Ruby', value: 'ruby' },
+    { label: 'Go', value: 'go' },
+    { label: 'Kotlin', value: 'kotlin' },
+  ],
+};