refactor, added slate, added editor, added book

app/client/components/ListSearch.tsx

@@ -0,0 +1,41 @@
+import { Button, Icon, Input, InputGroup, Stack } from '@chakra-ui/react';
+import { useState } from 'react';
+
+export function ListSearch({
+  placeholder,
+  onSubmit
+}: {
+  readonly placeholder?: string;
+  readonly onSubmit: (value: string) => void;
+}) {
+  const [searchValue, setSearchValue] = useState<string>('');
+  return (
+    <form
+      onSubmit={event => {
+        event.preventDefault();
+        onSubmit(searchValue);
+      }}
+    >
+      <Stack direction="row">
+        <InputGroup
+          flex="1"
+          startElement={
+            <Icon color="colorPalette.500">
+              <i className="nf nf-oct-search" />
+            </Icon>
+          }
+        >
+          <Input
+            value={searchValue}
+            onChange={event => setSearchValue(event.currentTarget.value)}
+            onSubmit={event => event.preventDefault()}
+            placeholder={placeholder}
+          />
+        </InputGroup>
+        <Button type="submit" border="none">
+          Refresh
+        </Button>
+      </Stack>
+    </form>
+  );
+}