Table empty placeholder (#18)

* Add empty placeholder when table does not contain value

src/components/Table/Table.css

@@ -3,6 +3,19 @@
   width: 100%;
 }
 
+.table-placeholder {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 2rem;
+}
+
+.table-placeholderText {
+  margin-top: 0.5rem;
+  margin-bottom: 0;
+}
+
 .table-container {
   border: 1px solid var(--codex-border-color);
   background-color: var(--codex-background-secondary);

src/components/Table/Table.tsx

@@ -1,5 +1,8 @@
 import "./Table.css";
 import { ReactNode } from "react";
+import { EmptyPlaceholderIcon as EPI } from "../EmptyPlaceholder/EmptyPlaceholderIcon";
+import { EmptyPlaceholder } from "../EmptyPlaceholder/EmptyPlaceholder";
+import { Search } from "lucide-react";
 
 type Props = {
   /**
@@ -46,6 +49,13 @@ export function Table({ headers, cells, className }: Props) {
           ))}
         </tbody>
       </table>
+
+      {!cells.length && (
+        <div className="table-placeholder">
+          <Search />
+          <p className="table-placeholderText">No search results.</p>
+        </div>
+      )}
     </div>
   );
 }

src/components/Upload/UploadFile.tsx

@@ -151,7 +151,7 @@ export function UploadFile({
         );
     },
     onError: (error) => {
-      worker.current?.terminate();
+      // worker.current?.terminate();
       dispatch({ type: "error", error: error.message });
     },
     onSuccess: (cid: string) => {

stories/Table.stories.tsx

@@ -87,3 +87,10 @@ export const State: Story = {
     headers: ["id", "title", "state", "actions"],
   },
 };
+
+export const Empty: Story = {
+  args: {
+    cells: [],
+    headers: ["id", "title", "state", "actions"],
+  },
+};