@protobase/ui 0.18.0 → 0.19.1

package/dist/record-view/spec-table.js

@@ -0,0 +1,25 @@
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/record-view/spec-table.tsx
+/**
+* Label/value rows, the label on the left and the value on the right, as a property's features table on a real estate
+* site: what a record page's section shows on its read view. A wide row puts its value under the label.
+*/
+const SpecTable = ({ rows }) => /* @__PURE__ */ jsx("dl", {
+	className: "border-t border-border text-[13px]",
+	children: rows.map((row) => /* @__PURE__ */ jsxs("div", {
+		className: cn("grid gap-x-4 border-b border-border py-2.5", row.wide ? "grid-cols-1 gap-y-1.5" : "grid-cols-[minmax(0,2fr)_minmax(0,3fr)]"),
+		children: [/* @__PURE__ */ jsxs("dt", {
+			className: "min-w-0 text-muted-foreground",
+			children: [row.label, row.help && /* @__PURE__ */ jsx("span", {
+				className: "mt-0.5 block text-xs text-faint-foreground",
+				children: row.help
+			})]
+		}), /* @__PURE__ */ jsx("dd", {
+			className: "min-w-0 break-words text-foreground",
+			children: row.value
+		})]
+	}, row.label))
+});
+//#endregion
+export { SpecTable };