From 14e6164c26b80ec2e734ab08bf590bd5cb6bc7ac Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Wed, 20 Aug 2025 14:48:25 -0600
Subject: [PATCH] create metric header segment

---
 .../components/ui/layouts/AppPageLayout.tsx   |  1 -
 .../AssetContainer/MetricAssetContainer.tsx   |  9 -----
 .../MetricAssetContainer.tsx                  | 33 +++++++++++++++++++
 .../MetricAssetContainer/index.ts             |  1 +
 4 files changed, 34 insertions(+), 10 deletions(-)
 delete mode 100644 apps/web-tss/src/layouts/AssetContainer/MetricAssetContainer.tsx
 create mode 100644 apps/web-tss/src/layouts/AssetContainer/MetricAssetContainer/MetricAssetContainer.tsx
 create mode 100644 apps/web-tss/src/layouts/AssetContainer/MetricAssetContainer/index.ts

diff --git a/apps/web-tss/src/components/ui/layouts/AppPageLayout.tsx b/apps/web-tss/src/components/ui/layouts/AppPageLayout.tsx
index 6a04abe0d..73400e59b 100644
--- a/apps/web-tss/src/components/ui/layouts/AppPageLayout.tsx
+++ b/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}
diff --git a/apps/web-tss/src/layouts/AssetContainer/MetricAssetContainer.tsx b/apps/web-tss/src/layouts/AssetContainer/MetricAssetContainer.tsx
deleted file mode 100644
index aa8df0b68..000000000
--- a/apps/web-tss/src/layouts/AssetContainer/MetricAssetContainer.tsx
+++ /dev/null
@@ -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>;
-};
diff --git a/apps/web-tss/src/layouts/AssetContainer/MetricAssetContainer/MetricAssetContainer.tsx b/apps/web-tss/src/layouts/AssetContainer/MetricAssetContainer/MetricAssetContainer.tsx
new file mode 100644
index 000000000..3d2b731e1
--- /dev/null
+++ b/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>
+    </>
+  );
+};
diff --git a/apps/web-tss/src/layouts/AssetContainer/MetricAssetContainer/index.ts b/apps/web-tss/src/layouts/AssetContainer/MetricAssetContainer/index.ts
new file mode 100644
index 000000000..a33d47836
--- /dev/null
+++ b/apps/web-tss/src/layouts/AssetContainer/MetricAssetContainer/index.ts
@@ -0,0 +1 @@
+export * from './MetricAssetContainer';