detailed commit message (oopsie)

src/app/clubSearch/page.tsx

@@ -0,0 +1,22 @@
+import Header from '@src/components/BaseHeader';
+import { ClubSearchComponent } from '@src/components/ClubSearchComponent';
+
+type Params = {
+  searchParams: { [key: string]: string | undefined };
+};
+
+const clubSearch = async (props: Params) => {
+  const { searchParams } = props;
+  const userSearch = searchParams['search'] || '';
+
+  return (
+    <main className="md:pl-72">
+      <div>
+        <Header />
+        <ClubSearchComponent userSearch={userSearch} />
+      </div>
+    </main>
+  );
+};
+
+export default clubSearch;

src/components/ClubSearchComponent.tsx

@@ -0,0 +1,35 @@
+'use client';
+import { api } from '@src/trpc/react';
+import DirectoryOrgs from './DirectoryOrgs';
+import type { SelectClub as Club } from '@src/server/db/models'; // Assuming you use this type
+import { type Session } from 'next-auth';
+
+interface ClubSearchComponentProps {
+  userSearch: string;
+  session: Session | null;
+}
+
+export const ClubSearchComponent = ({
+  userSearch,
+  session,
+}: ClubSearchComponentProps) => {
+  const { data } = api.club.byNameNoLimit.useQuery(
+    { name: userSearch },
+    { enabled: !!userSearch },
+  );
+
+  if (!data) {
+    return <p />;
+  }
+  if (data.length === 0) {
+    return <p>No results found for "{userSearch}".</p>;
+  }
+
+  return (
+    <div className="grid w-full auto-rows-fr grid-cols-[repeat(auto-fill,320px)] justify-center gap-16 pb-4">
+      {data.map((club: Club, index: number) => (
+        <DirectoryOrgs key={club.id} club={club} session={session} priority />
+      ))}
+    </div>
+  );
+};

src/components/SearchBar.tsx

@@ -25,6 +25,7 @@ type SearchBarProps<T extends SearchElement> = {
   setSearch: Dispatch<SetStateAction<string>>;
   searchResults?: Array<T>;
   onClick?: (input: T) => void;
+  handleKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
 };
 
 export const SearchBar = <T extends SearchElement>({
@@ -33,6 +34,7 @@ export const SearchBar = <T extends SearchElement>({
   setSearch,
   searchResults,
   onClick,
+  handleKeyDown,
 }: SearchBarProps<T>) => {
   const [input, setInput] = useState<string>(value ?? '');
   const [focused, setFocused] = useState(false);
@@ -62,6 +64,7 @@ export const SearchBar = <T extends SearchElement>({
           onChange={handleSearch}
           onFocus={() => setFocused(true)}
           onBlur={() => setTimeout(() => setFocused(false), 300)}
+          onKeyDown={handleKeyDown}
         />
         {input && focused && searchResults && searchResults.length > 0 && (
           <div className="absolute left-0 right-0 top-full z-50 mt-1 rounded-sm shadow-lg">
@@ -92,12 +95,18 @@ export const ClubSearchBar = () => {
   const onClickSearchResult = (club: Club) => {
     router.push(`/directory/${club.id}`);
   };
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      router.push(`/clubSearch?search=${encodeURIComponent(search)}`);
+    }
+  };
   return (
     <SearchBar
       placeholder="Search for Clubs"
       setSearch={setSearch}
       searchResults={data || []}
       onClick={onClickSearchResult}
+      handleKeyDown={handleKeyDown}
     />
   );
 };

src/server/api/routers/club.ts

@@ -64,6 +64,15 @@ export const clubRouter = createTRPCRouter({
 
     return clubs.slice(0, 5);
   }),
+  byNameNoLimit: publicProcedure.input(byNameSchema).query(async ({ input, ctx }) => {
+    const { name } = input;
+    const clubs = await ctx.db.query.club.findMany({
+      where: (club) =>
+        and(ilike(club.name, `%${name}%`), eq(club.approved, 'approved')),
+    });
+
+    return clubs;
+  }),
   byId: publicProcedure.input(byIdSchema).query(async ({ input, ctx }) => {
     const { id } = input;
     try {