Merge pull request #2011 from delexagon/hearing-search-result-text

Hearing search result text

Author: mertbagt

components/hearing/Transcriptions.tsx

@@ -23,6 +23,15 @@ const ClearButton = styled(FontAwesomeIcon)`
   cursor: pointer;
 `
 
+const ResultNumText = styled.div`
+  position: absolute;
+  right: 4rem;
+  top: 50%;
+  user-select: none;
+  transform: translateY(-50%);
+  color: #979797;
+`
+
 const ErrorContainer = styled(Container)`
   background-color: white;
 `
@@ -197,7 +206,15 @@ export const Transcriptions = ({
           onChange={e => setSearchTerm(e.target.value)}
         />
         {searchTerm && (
-          <ClearButton icon={faTimes} onClick={handleClearInput} />
+          <>
+            <ResultNumText>
+              {t("num_results", {
+                ns: "hearing",
+                count: filteredData.length
+              })}
+            </ResultNumText>
+            <ClearButton icon={faTimes} onClick={handleClearInput} />
+          </>
         )}
         <SearchIcon icon={faMagnifyingGlass} />
       </SearchWrapper>

public/locales/en/hearing.json

@@ -13,6 +13,8 @@
   "no_results_found": "No Search Results for ”{{searchTerm}}”",
   "no_video_on_file": "This hearing does not yet have a video on file",
   "no_vote": "No Vote Recorded",
+  "num_results_one": "{{count}} result",
+  "num_results_other": "{{count}} results",
   "recording_date": "Recording date",
   "reserve": "Reserve",
   "reserve_right": "Reserve Right",