Merge pull request #391 from StampyAI/jrhender-379-search-placeholder

feat(Input): add placeholder prop and set for Menu
StampyAI · Feb 12, 2024 · 3fecaa0 · 3fecaa0
2 parents 04b76d2 + 7d6d25d
commit 3fecaa0
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git a/app/components/CategoriesNav/Menu.tsx b/app/components/CategoriesNav/Menu.tsx
@@ -20,7 +20,7 @@ export const CategoriesNav = ({categories, activeCategoryId}: CategoriesNavProps
   return (
     <div className={styles.categoriesGroup}>
       <h4>Categories</h4>
-      <SearchInput onChange={onSearch} />
+      <SearchInput onChange={onSearch} placeholderText="Filter by keyword" />
       {categories
         .filter((tag) => tag.name.toLowerCase().includes(search.toLowerCase()))
         .map(({tagId, name, questions}) => (

diff --git a/app/components/SearchInput/Input.tsx b/app/components/SearchInput/Input.tsx
@@ -12,8 +12,12 @@ interface SearchInputProps {
    * Custom styles
    */
   expandable?: boolean
+  /**
+   * Custom placeholder
+   */
+  placeholderText?: string
 }
-export const SearchInput = ({onChange, expandable}: SearchInputProps) => {
+export const SearchInput = ({onChange, expandable, placeholderText}: SearchInputProps) => {
   const [search, setSearch] = useState('')
   const handleSearch = (search: string) => {
     setSearch(search)
@@ -29,7 +33,7 @@ export const SearchInput = ({onChange, expandable}: SearchInputProps) => {
         <input
           type="search"
           name="searchbar"
-          placeholder="Search articles"
+          placeholder={placeholderText ?? 'Search articles'}
           className="search-input"
           onChange={(e) => {
             handleSearch(e.currentTarget.value)

diff --git a/app/routes/tags.all.tsx b/app/routes/tags.all.tsx
@@ -6,7 +6,9 @@ export const loader = async ({request, params}: Parameters<LoaderFunction>[0]) =
   const {data: tags, timestamp} = await loadTags(request)
 
   const tagId = params['*'] && params['*'].split('/')[0]
-  const currentTag = tagId ? tags.find(({tagId: checkedId, name}) => [checkedId.toString(), name].includes(tagId)) : tags[0]
+  const currentTag = tagId
+    ? tags.find(({tagId: checkedId, name}) => [checkedId.toString(), name].includes(tagId))
+    : tags[0]
 
   if (currentTag === undefined) {
     throw new Response(null, {