social overhaul

2026-07-22 15:47:34 -07:00
parent 9db3fa697d
commit 86cda294f9
45 changed files with 3026 additions and 430 deletions
@@ -0,0 +1,40 @@
+import { Group, Indicator, Text } from "@mantine/core";
+
+interface SectionHeadingProps {
+  label: string;
+  /** Show a pulsing red "live" dot before the label. */
+  live?: boolean;
+  /** Appended as "· N" after the label when greater than 1. */
+  count?: number;
+  /** Optional right-aligned action (e.g. a "View all" link). */
+  action?: React.ReactNode;
+}
+
+/**
+ * Compact, uppercase section label used across the started-tournament home
+ * surfaces. Mirrors the original "Live Matches" heading treatment.
+ */
+const SectionHeading = ({ label, live, count, action }: SectionHeadingProps) => {
+  return (
+    <Group gap={10} px="md" mb={6} align="center" wrap="nowrap" justify="space-between">
+      <Group gap={10} align="center" wrap="nowrap" style={{ minWidth: 0 }}>
+        {live && (
+          <Indicator
+            size={8}
+            color="red"
+            processing
+            position="middle-start"
+            offset={0}
+          />
+        )}
+        <Text size="xs" fw={700} c="dimmed" tt="uppercase" lts="0.05em" lineClamp={1}>
+          {label}
+          {count && count > 1 ? ` · ${count}` : ""}
+        </Text>
+      </Group>
+      {action}
+    </Group>
+  );
+};
+
+export default SectionHeading;