feat(Input): add placeholder prop and set for Menu

StampyAI · Feb 12, 2024 · b7c7708 · b7c7708
1 parent 04b76d2
commit b7c7708
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 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)