41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
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;
|