Switches over to the relationship list

src/components/DocumentList.tsx

@@ -10,6 +10,7 @@ import { Fragment, useState } from "react";
 
 type Props<T extends Document> = {
   title: React.ReactNode;
+  error?: React.ReactNode;
   items: T[];
   renderRow: (item: T) => React.ReactNode;
   newItemForm: (onSubmit: () => void) => React.ReactNode;
@@ -25,6 +26,7 @@ type Props<T extends Document> = {
  */
 export function DocumentList<T extends Document>({
   title,
+  error,
   items,
   renderRow,
   newItemForm,
@@ -62,6 +64,9 @@ export function DocumentList<T extends Document>({
           </svg>
         </button>
       </div>
+      {error && (
+        <div className="bg-red-900 rounded p-4 text-slate-100">{error}</div>
+      )}
       <ul className="space-y-2">
         {items.map((item) => (
           <li key={item.id} className="bg-slate-800 rounded p-4 text-slate-100">