client/refactor: create a separate property sheet component

apps/client/src/widgets/react/PropertySheet.css

@@ -0,0 +1,79 @@
+.property-sheet-table {
+    --border-radius: 8px;
+
+    dl {
+        background: var(--card-background-color);
+
+        dt {
+            color: var(--muted-text-color);
+        }
+    }
+}
+
+@media (min-width: 600px) {
+    .property-sheet-table {
+        display: table;
+        border-spacing: 0 2px;
+        border-collapse: separate;
+
+        dl {
+            display: table-row;
+            --_br: var(--border-radius);
+            
+            &:first-child {
+                clip-path: inset(0 round var(--_br) var(--_br) 0 0);
+            }
+
+            &:last-child {
+                clip-path: inset(0 round 0 0 var(--_br) var(--_br));
+            }
+        }
+
+        dt, dd {
+            display: table-cell;
+            padding: 10px 16px;
+            vertical-align: top;
+        }
+
+        dt {
+            white-space: nowrap;
+        }
+
+        dl {
+            width: 100%;
+    }
+    }
+}
+
+@media (max-width: 599px) {
+    .property-sheet-table {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+
+        dl {
+            margin: 0;
+            padding: 12px 20px;
+
+            &:first-child {
+                border-radius: var(--border-radius) var(--border-radius) 0 0;
+            }
+
+            &:last-child {
+                border-radius: 0 0 var(--border-radius) var(--border-radius);
+            }
+
+            dt {
+                margin-bottom: 8px;
+                font-size: .85em;
+                font-weight: 500;
+                text-transform: uppercase;
+                letter-spacing: .4pt;
+            }
+            
+            dd {
+                margin: 0;
+            }
+        }
+    }
+}

apps/client/src/widgets/react/PropertySheet.tsx

@@ -0,0 +1,15 @@
+import { ComponentChildren } from "preact";
+import "./PropertySheet.css";
+
+export function PropertySheet({ children }: { children: ComponentChildren }) {
+    return <div className="property-sheet-table">
+        {children} 
+    </div>
+}
+
+export function PropertySheetItem({label, children}: {label: string, children: ComponentChildren}) {
+    return <dl>
+        <dt>{label}</dt>
+        <dd>{children}</dd>
+    </dl>
+}