Fix package diff skeleton header being the wrong size

oBusk · Mar 9, 2024 · 647eaee · 647eaee
1 parent 135c322
commit 647eaee
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 5 deletions.
diff --git a/src/app/[...parts]/_page/SizeComparison/SizeComparison.tsx b/src/app/[...parts]/_page/SizeComparison/SizeComparison.tsx
@@ -9,6 +9,7 @@ import type SimplePackageSpec from "^/lib/SimplePackageSpec";
 import { prettyByte } from "^/lib/utils/prettyByte";
 import Halfs from "../DiffIntro/Halfs";
 import ServiceTooltip from "../DiffIntro/ServiceTooltip";
+import SizeComparisonHeading from "./SizeComparisonHeading";
 
 function differance(a: number, b: number): ReactNode {
     const diff = a - b;
@@ -115,9 +116,7 @@ const SizeComparison = ({
     const service = Services[serviceName];
     return (
         <>
-            <Heading h={3} className="text-xs">
-                {service.name}
-            </Heading>
+            <SizeComparisonHeading>{service.name}</SizeComparisonHeading>
             {flags}
             <Halfs
                 className="w-full"

diff --git a/src/app/[...parts]/_page/SizeComparison/SizeComparisonHeading.tsx b/src/app/[...parts]/_page/SizeComparison/SizeComparisonHeading.tsx
@@ -0,0 +1,15 @@
+import { type ElementRef, forwardRef } from "react";
+import Heading, { type HeadingProps } from "^/components/ui/Heading";
+import { cx } from "^/lib/cva";
+
+export interface SizeComparisonHeadingProps extends HeadingProps {}
+
+const SizeComparisonHeading = forwardRef<
+    ElementRef<typeof Heading>,
+    SizeComparisonHeadingProps
+>(({ className, ...props }, ref) => (
+    <Heading h={3} className={cx("text-xs", className)} {...props} ref={ref} />
+));
+SizeComparisonHeading.displayName = "SizeComparisonHeading";
+
+export default SizeComparisonHeading;
diff --git a/src/app/[...parts]/_page/SizeComparison/SizeComparisonSkeleton.tsx b/src/app/[...parts]/_page/SizeComparison/SizeComparisonSkeleton.tsx
@@ -1,9 +1,9 @@
 import { type ComponentProps, type ReactNode } from "react";
-import Heading from "^/components/ui/Heading";
 import Skeleton from "^/components/ui/Skeleton";
 import { cx } from "^/lib/cva";
 import { type ServiceName, Services } from "^/lib/Services";
 import Halfs from "../DiffIntro/Halfs";
+import SizeComparisonHeading from "./SizeComparisonHeading";
 
 export interface SkeletonSizeRow {
     name: string;
@@ -40,7 +40,7 @@ const SizeComparisonSkeleton = ({
 
     return (
         <>
-            <Heading className="text-sm">{service.name}</Heading>
+            <SizeComparisonHeading>{service.name}</SizeComparisonHeading>
             {flags}
             <Halfs
                 className="w-full"