create metric header segment

apps/web-tss/src/components/ui/layouts/AppPageLayout.tsx

@@ -37,7 +37,6 @@ export const AppPageLayout: React.FC<
   mainClassName = '',
   contentContainerId,
 }) => {
-  console.log(scrollable, headerBorderVariant);
   return (
     <div
       id={id}

apps/web-tss/src/layouts/AssetContainer/MetricAssetContainer.tsx

@@ -1,9 +0,0 @@
-import { AssetContainer } from './AssetContainer';
-
-export const MetricAssetContainer: React.FC<{
-  children: React.ReactNode;
-  metricId: string;
-  metric_version_number: number | undefined;
-}> = ({ children, metricId, metric_version_number }) => {
-  return <AssetContainer header={<div>Metric ID: {metricId}</div>}>{children}</AssetContainer>;
-};

apps/web-tss/src/layouts/AssetContainer/MetricAssetContainer/MetricAssetContainer.tsx

@@ -0,0 +1,33 @@
+import { AssetContainer } from '../AssetContainer';
+import { MetricContainerHeaderSegment } from './MetricContainerHeaderSegment';
+
+export const MetricAssetContainer: React.FC<{
+  children: React.ReactNode;
+  metricId: string;
+  metric_version_number: number | undefined;
+}> = ({ children, metricId, metric_version_number }) => {
+  return (
+    <AssetContainer
+      header={
+        <MetricAssetHeader metricId={metricId} metric_version_number={metric_version_number} />
+      }
+    >
+      {children}
+    </AssetContainer>
+  );
+};
+
+const MetricAssetHeader: React.FC<{
+  metricId: string;
+  metric_version_number: number | undefined;
+}> = ({ metricId, metric_version_number }) => {
+  return (
+    <>
+      <MetricContainerHeaderSegment
+        metricId={metricId}
+        metric_version_number={metric_version_number}
+      />
+      <div>Metric Version Number: {metric_version_number}</div>
+    </>
+  );
+};

apps/web-tss/src/layouts/AssetContainer/MetricAssetContainer/index.ts

@@ -0,0 +1 @@
+export * from './MetricAssetContainer';