ui/cards: implement card titles (heading)

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

@@ -6,6 +6,14 @@
     --card-nested-section-indent: 30px;
 }
 
+.tn-card-heading {
+    margin-bottom: 10px;
+    font-size: .75rem;
+    font-weight: 600;
+    letter-spacing: .4pt;
+    text-transform: uppercase;
+}
+
 .tn-card {
     display: flex;
     flex-direction: column;

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

@@ -6,12 +6,16 @@ import clsx from "clsx";
 
 interface CardProps {
     className?: string;
+    heading?: string;
 }
 
 export function Card(props: {children: ComponentChildren} & CardProps) {
-    return <div className={clsx(["tn-card", props.className])}>
-        {props.children}
-    </div>;
+    return <>
+        {props.heading && <h5 class="tn-card-heading">{props.heading}</h5>}
+        <div className={clsx(["tn-card", props.className])}>
+            {props.children}
+        </div>
+    </>;
 }
 
 interface CardSectionProps {
@@ -31,7 +35,7 @@ export function CardSection(props: {children: ComponentChildren} & CardSectionPr
                     "tn-card-section-nested": nestingLevel > 0,
                     "tn-card-section-highlight-on-hover": props.highlightOnHover || props.onAction
                  })}
-                 style={{"--tn-card-section-nesting-level": nestingLevel}}
+                 style={{"--tn-card-section-nesting-level": (nestingLevel) ? nestingLevel : null}}
                  onClick={props.onAction}>
             {props.children}
         </section>