38 lines
1.3 KiB
TypeScript
38 lines
1.3 KiB
TypeScript
import { useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import type { components } from "../api/schema";
|
|
import { FieldList } from "./field-list";
|
|
import { FieldForm } from "./field-form";
|
|
import { useDocumentTitle } from "../lib/use-document-title";
|
|
import { useBreadcrumb } from "../shell/use-breadcrumb";
|
|
import { PageTitle } from "@/components/ui/page-title";
|
|
|
|
type FieldDefinitionView = components["schemas"]["FieldDefinitionView"];
|
|
|
|
export function FieldsPage() {
|
|
const { t } = useTranslation();
|
|
const [selected, setSelected] = useState<FieldDefinitionView | null>(null);
|
|
|
|
useDocumentTitle(t("fields.title"));
|
|
useBreadcrumb([{ label: t("nav.fields") }]);
|
|
|
|
return (
|
|
<div className="flex h-full flex-col">
|
|
<PageTitle className="px-4 pt-4 pb-2">{t("fields.title")}</PageTitle>
|
|
<div className="grid flex-1 grid-cols-1 overflow-auto lg:grid-cols-[20rem_1fr] lg:overflow-hidden">
|
|
<div className="overflow-hidden border-b lg:border-r lg:border-b-0">
|
|
<FieldList selectedKey={selected?.key ?? null} onSelect={setSelected} />
|
|
</div>
|
|
<div className="overflow-hidden">
|
|
<FieldForm
|
|
key={selected?.key ?? "create"}
|
|
editing={selected}
|
|
onDone={() => setSelected(null)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|