[refactor][x]: move reusable ErrorMessage component to _shared

components/_shared/Error.tsx

@@ -0,0 +1,15 @@
+export default function ErrorMessage({ message }) {
+  return (
+    <aside>
+      {message}
+      <style jsx>{`
+        aside {
+          padding: 1.5em;
+          font-size: 14px;
+          color: white;
+          background-color: red;
+        }
+      `}</style>
+    </aside>
+  );
+}

components/_shared/Table.tsx

@@ -24,7 +24,8 @@ const Table: React.FC<TableProps> = ({ columns, data, className }) => {
             {columns.map(({ key, render }) => (
               <td className="px-4 py-2">
                 {(render && typeof render === 'function' && render(item)) ||
-                  item[key]}
+                  item[key] ||
+                  ''}
               </td>
             ))}
           </tr>

components/_shared/index.ts

@@ -0,0 +1,4 @@
+import Table from './Table';
+import ErrorMessage from './Error';
+
+export { Table, ErrorMessage };