From b7c7708ab436d7e83fff14a2452f38581058fb4a Mon Sep 17 00:00:00 2001
From: jrhender <stampy@j-henderson.com>
Date: Mon, 12 Feb 2024 20:47:31 +0000
Subject: [PATCH 1/2] feat(Input): add placeholder prop and set for Menu

---
 app/components/CategoriesNav/Menu.tsx | 2 +-
 app/components/SearchInput/Input.tsx  | 8 ++++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/app/components/CategoriesNav/Menu.tsx b/app/components/CategoriesNav/Menu.tsx
index 928aa962..dbad1b38 100644
--- 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
index 3ffba303..aa5b4214 100644
--- 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)

From 7d6d25dc1aaff7b2b0469f090ef38da81d368eab Mon Sep 17 00:00:00 2001
From: jrhender <stampy@j-henderson.com>
Date: Mon, 12 Feb 2024 20:59:33 +0000
Subject: [PATCH 2/2] style(tags.all): prettier fix

---
 app/routes/tags.all.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/routes/tags.all.tsx b/app/routes/tags.all.tsx
index 43447a84..59c65599 100644
--- 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, {