Initial commitHEADmain

Created from https://vercel.com/new

1 files changed, 60 insertions, 0 deletions

diff --git a/src/components/metrics/ChangeLabel.tsx b/src/components/metrics/ChangeLabel.tsx
new file mode 100644
index 0000000..192f0ff
--- /dev/null
+++ b/src/components/metrics/ChangeLabel.tsx
@@ -0,0 +1,60 @@
+import { Icon, Row, type RowProps, Text } from '@umami/react-zen';
+import type { ReactNode } from 'react';
+import { ArrowRight } from '@/components/icons';
+
+const STYLES = {
+  positive: {
+    color: `var(--success-color)`,
+    background: `color-mix(in srgb, var(--success-color), var(--background-color) 95%)`,
+  },
+  negative: {
+    color: `var(--danger-color)`,
+    background: `color-mix(in srgb, var(--danger-color), var(--background-color) 95%)`,
+  },
+  neutral: {
+    color: `var(--font-color-muted)`,
+    background: `var(--base-color-2)`,
+  },
+};
+
+export function ChangeLabel({
+  value,
+  size,
+  reverseColors,
+  children,
+  ...props
+}: {
+  value: number;
+  size?: 'xs' | 'sm' | 'md' | 'lg';
+  title?: string;
+  reverseColors?: boolean;
+  showPercentage?: boolean;
+  children?: ReactNode;
+} & RowProps) {
+  const positive = value >= 0;
+  const negative = value < 0;
+  const neutral = value === 0 || Number.isNaN(value);
+  const good = reverseColors ? negative : positive;
+
+  const style =
+    STYLES[good && 'positive'] || STYLES[!good && 'negative'] || STYLES[neutral && 'neutral'];
+
+  return (
+    <Row
+      {...props}
+      style={style}
+      alignItems="center"
+      alignSelf="flex-start"
+      paddingX="2"
+      paddingY="1"
+      gap="2"
+    >
+      {!neutral && (
+        <Icon rotate={positive ? -90 : 90} size={size}>
+          <ArrowRight />
+        </Icon>
+      )}
+      <Text>{children || value}</Text>
+    </Row>
+  );
+}