56 lines
1.9 KiB
TypeScript
56 lines
1.9 KiB
TypeScript
import { RelationshipList } from "@/components/RelationshipList";
|
|
import { DocumentEditForm } from "@/components/documents/DocumentEditForm";
|
|
import { useDocument } from "@/context/document/DocumentContext";
|
|
import { displayName, relationshipsForDocument } from "@/lib/relationships";
|
|
import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@headlessui/react";
|
|
import { Link } from "@tanstack/react-router";
|
|
import { Loader } from "../Loader";
|
|
|
|
export function DocumentView() {
|
|
const { state } = useDocument();
|
|
|
|
if (state.status === "loading") {
|
|
return <Loader />;
|
|
}
|
|
|
|
const doc = state.doc;
|
|
|
|
const relationshipList = relationshipsForDocument(doc);
|
|
|
|
return (
|
|
<div key={doc.id} className="max-w-xl mx-auto py-2 px-4">
|
|
<Link
|
|
to="/document/$documentId/print"
|
|
params={{ documentId: doc.id }}
|
|
className="text-slate-400 hover:text-violet-400 text-sm underline underline-offset-2 transition-colors mb-4"
|
|
>
|
|
Print
|
|
</Link>
|
|
<DocumentEditForm document={doc} />
|
|
<TabGroup>
|
|
<TabList className="flex flex-row flex-wrap gap-1 mt-2">
|
|
{relationshipList.map((relationshipType) => (
|
|
<Tab
|
|
key={relationshipType}
|
|
className="px-3 py-2 rounded bg-slate-800 text-slate-100 border border-slate-700 focus:outline-none focus:ring-2 focus:ring-violet-500 data-selected:bg-violet-900 data-selected:border-violet-700"
|
|
>
|
|
{displayName(relationshipType)}
|
|
</Tab>
|
|
))}
|
|
</TabList>
|
|
<TabPanels>
|
|
{relationshipList.map((relationshipType) => (
|
|
<TabPanel key={relationshipType}>
|
|
<RelationshipList
|
|
key={relationshipType}
|
|
root={doc}
|
|
relationshipType={relationshipType}
|
|
/>
|
|
</TabPanel>
|
|
))}
|
|
</TabPanels>
|
|
</TabGroup>
|
|
</div>
|
|
);
|
|
}
|