Add "and" "ampersand" substitution to fuzzy match

go/cmd/kjol-website/frontend/src/pages/Components.tsx

@@ -1332,6 +1332,20 @@ const KIT_NAMES = [
     "Tooltip", "TutorialProvider", "SidebarNav", "Chart", "FuzzyMatch",
 ];
 
+// Both "and" and "&" spellings appear here on purpose: with andAmpersand on, typing
+// either finds both, and the exact spelling ranks above the substituted one.
+// "Standard" / "Brand" hold an "and" that is NOT the whole word — left untouched.
+const AND_AMP_NAMES = [
+    "First Bank & Trust",
+    "First Bank and Trust Company",
+    "Smith & Wesson Financial",
+    "Johnson and Johnson Federal CU",
+    "Highland Savings & Loan",
+    "Standard Chartered",
+    "Brand Mortgage Group",
+    "AT&T Employees CU",
+];
+
 function Search() {
     const [hit, setHit] = createSignal("");
 
@@ -1359,6 +1373,25 @@ function Search() {
                     and you render them however you like.
                 </p>
             </Panel>
+
+            <Prose>
+                Pass <code class="font-mono">andAmpersand</code> and the word "and" and the symbol "&amp;"
+                match each other, so "First Bank and Trust" also finds "First Bank &amp; Trust". The exact
+                spelling still wins — the substituted form is a penalized extra pass, not a free swap — and a
+                stray "and" inside "Standard" or "Brand" is left alone.
+            </Prose>
+
+            <Panel title="andAmpersand — type “first bank and trust”, or “smith & wesson”">
+                <div class="max-w-md">
+                    <FuzzyMatch
+                        options={AND_AMP_NAMES}
+                        andAmpersand
+                        placeholder="Search bank names…"
+                        maxResults={6}
+                        showScores
+                    />
+                </div>
+            </Panel>
         </Section>
     );
 }