From af0f858f4528780e8ecbae2f15139026704b169d Mon Sep 17 00:00:00 2001
From: Vasilica Olariu <olariu.vasilica@gmail.com>
Date: Mon, 14 Aug 2023 10:58:49 +0300
Subject: [PATCH] TAL-46 - add a max limit reached message for skills search

---
 .../search-input/SearchInput.module.scss      |  4 +++
 .../components/search-input/SearchInput.tsx   | 33 +++++++++++--------
 2 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/src/apps/talent-search/src/components/search-input/SearchInput.module.scss b/src/apps/talent-search/src/components/search-input/SearchInput.module.scss
index 072e1ad26..0485baa78 100644
--- a/src/apps/talent-search/src/components/search-input/SearchInput.module.scss
+++ b/src/apps/talent-search/src/components/search-input/SearchInput.module.scss
@@ -37,3 +37,7 @@
         color: inherit;
     }
 }
+
+.maxLimit {
+    font-size: 14px;
+}
diff --git a/src/apps/talent-search/src/components/search-input/SearchInput.tsx b/src/apps/talent-search/src/components/search-input/SearchInput.tsx
index 39bffe0bc..3335905ad 100644
--- a/src/apps/talent-search/src/components/search-input/SearchInput.tsx
+++ b/src/apps/talent-search/src/components/search-input/SearchInput.tsx
@@ -50,19 +50,26 @@ const SearchInput: FC<SearchInputProps> = props => {
     ), [props.onSearch, emsiSkills])
 
     return (
-        <InputSkillSelector
-            className={props.className}
-            autoFocus={props.autoFocus}
-            placeholder='Enter skills you are searching for...'
-            useWrapper={false}
-            theme='clear'
-            dropdownIcon={searchIcon}
-            value={emsiSkills}
-            onChange={onChange}
-            onSubmit={props.onSearch}
-            inputRef={props.inputRef}
-            limit={SKILL_SEARCH_LIMIT}
-        />
+        <div className={styles.wrap}>
+            <InputSkillSelector
+                className={props.className}
+                autoFocus={props.autoFocus}
+                placeholder='Enter skills you are searching for...'
+                useWrapper={false}
+                theme='clear'
+                dropdownIcon={searchIcon}
+                value={emsiSkills}
+                onChange={onChange}
+                onSubmit={props.onSearch}
+                inputRef={props.inputRef}
+                limit={SKILL_SEARCH_LIMIT}
+            />
+            {emsiSkills.length >= SKILL_SEARCH_LIMIT && (
+                <div className={styles.maxLimit}>
+                    You can only search up to 10 skills at one time
+                </div>
+            )}
+        </div>
     )
 }