Scaffold out UI components

src/components/SearchInput/SearchInput.css

@@ -0,0 +1,32 @@
+.search-bar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 250px;
+  margin: 4px;
+  padding: 8px 16px;
+  border: 1px solid black;
+  border-radius: 24px;
+  background-color: white;
+}
+
+.search-bar:focus-within {
+  outline: none;
+  border: 1px solid violet;
+  border-radius: 24px;
+}
+
+.search-bar input {
+  flex: 1;
+  border: none;
+  margin-left: 8px;
+  padding: 2px 0px 0px;
+}
+
+.search-bar input:focus {
+  outline: none;
+}
+
+.search-bar input::placeholder {
+  color: black;
+}

src/components/SearchInput/SearchInput.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { useRecoilState } from "recoil";
+
+import { searchQueryAtom } from "../../state/atoms";
+import { Search } from "phosphor-react";
+import "./SearchInput.css";
+
+type SearchInputProps = {};
+
+const SearchInput: React.FC<SearchInputProps> = () => {
+  const [query, setQuery] = useRecoilState(searchQueryAtom);
+
+  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setQuery(event.target.value);
+  };
+  return (
+    <div className="search-bar">
+      <Search />
+      <label htmlFor="search-input" hidden>
+        Search for an icon
+      </label>
+      <input
+        id="search-input"
+        type="text"
+        value={query}
+        placeholder="Search for an icon"
+        onChange={handleSearchChange}
+      />
+    </div>
+  );
+};
+
+export default SearchInput;