feat: search bar (#267)

* feat: search bar

Author: eric-kitagawa

clients/web/src/components/guests/GuestSearchBar.tsx

@@ -1,4 +1,4 @@
-import { Search } from "lucide-react";
+import { SearchBar } from "@/components/ui/SearchBar";
 
 type GuestSearchBarProps = {
   value: string;
@@ -7,15 +7,6 @@ type GuestSearchBarProps = {
 
 export function GuestSearchBar({ value, onChange }: GuestSearchBarProps) {
   return (
-    <label className="flex w-full items-center gap-[1vw] border border-black bg-white px-[1vw] py-[1vh]">
-      <input
-        type="text"
-        value={value}
-        onChange={(event) => onChange(event.target.value)}
-        placeholder="Search Guests"
-        className="w-full bg-transparent text-[1vw] text-black outline-none placeholder:text-black"
-      />
-      <Search className="h-[2vh] w-[2vh] text-black" />
-    </label>
+    <SearchBar value={value} onChange={onChange} placeholder="Search Guests" />
   );
 }

clients/web/src/components/rooms/RoomsToolbar.tsx

@@ -1,22 +1,33 @@
+import { SearchBar } from "../ui/SearchBar";
 import { FloorDropdown } from "./FloorDropdown";
 import { OrderByDropdown } from "./OrderByDropdown";
 import { RoomsFilterPopover } from "@/components/rooms/RoomsFilterPopover";
 
 type RoomsToolbarProps = {
+  searchTerm: string;
+  onChangeSearchTerm: (value: string) => void;
   selectedFloors: Array<number>;
   onChangeSelectedFloors: (floors: Array<number>) => void;
   ascending: boolean;
   setAscending: (ascending: boolean) => void;
 };
 
 export function RoomsToolbar({
+  searchTerm,
+  onChangeSearchTerm,
   selectedFloors,
   onChangeSelectedFloors,
   ascending,
   setAscending,
 }: RoomsToolbarProps) {
   return (
     <div className="flex items-center gap-3">
+      <SearchBar
+        value={searchTerm}
+        onChange={onChangeSearchTerm}
+        placeholder="Search for a room..."
+        className="w-full max-w-[16rem]"
+      />
       <FloorDropdown
         selected={selectedFloors}
         onChangeSelectedFloors={onChangeSelectedFloors}

clients/web/src/components/ui/SearchBar.tsx

@@ -0,0 +1,55 @@
+import { Search } from "lucide-react";
+import type { InputHTMLAttributes, ReactNode } from "react";
+import { cn } from "@/lib/utils";
+
+type SearchBarProps = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  "value" | "onChange"
+> & {
+  value: string;
+  onChange: (value: string) => void;
+  className?: string;
+  inputClassName?: string;
+  iconClassName?: string;
+  icon?: ReactNode;
+};
+
+export function SearchBar({
+  value,
+  onChange,
+  placeholder = "Search for a room...",
+  className,
+  inputClassName,
+  iconClassName,
+  icon,
+  ...inputProps
+}: SearchBarProps) {
+  return (
+    <label
+      className={cn(
+        "flex w-full items-center justify-between rounded-[4px] border border-stroke-subtle bg-bg-primary px-3 py-2",
+        className,
+      )}
+    >
+      <input
+        type="text"
+        value={value}
+        onChange={(event) => onChange(event.target.value)}
+        placeholder={placeholder}
+        className={cn(
+          "w-full bg-transparent text-sm leading-tight text-text-default outline-none placeholder:text-text-subtle",
+          inputClassName,
+        )}
+        {...inputProps}
+      />
+      <span
+        className={cn(
+          "ml-2 flex shrink-0 items-center text-text-subtle",
+          iconClassName,
+        )}
+      >
+        {icon ?? <Search className="size-4" strokeWidth={2} />}
+      </span>
+    </label>
+  );
+}

clients/web/src/routes/_protected/rooms.index.tsx

@@ -16,6 +16,7 @@ export const Route = createFileRoute("/_protected/rooms/")({
 });
 
 function RoomsPage() {
+  const [searchTerm, setSearchTerm] = useState("");
   const [selectedFloors, setSelectedFloors] = useState<Array<number>>([]);
   const [selectedRoom, setSelectedRoom] =
     useState<RoomWithOptionalGuestBooking | null>(null);
@@ -60,6 +61,8 @@ function RoomsPage() {
       contentClassName={"h-full"}
     >
       <RoomsToolbar
+        searchTerm={searchTerm}
+        onChangeSearchTerm={setSearchTerm}
         selectedFloors={selectedFloors}
         onChangeSelectedFloors={setSelectedFloors}
         ascending={ascending}