Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | 5079x 5079x 5079x 5079x 5079x 5079x | import type { CSSProperties } from "react";
import {
TRACKED_STREAM_EDGE_CLASS,
TRACKED_STREAM_EDGE_SHARED_CLASS,
TRACKED_STREAM_HALO_EDGE_CLASS,
} from "./constants";
import type { TrackedStreamEdgeFlow } from "./types";
type TrackedEdgeCssVariables = CSSProperties & {
"--tracked-stream-accent"?: string;
"--tracked-stream-animation-delay"?: string;
};
export function trackedEdgeClassName(
trackedFlows: TrackedStreamEdgeFlow[],
): string | undefined {
if (!trackedFlows.length) return undefined;
Iif (trackedFlows.length === 1) return TRACKED_STREAM_EDGE_CLASS;
return `${TRACKED_STREAM_EDGE_CLASS} ${TRACKED_STREAM_EDGE_SHARED_CLASS}`;
}
export function trackedHaloEdgeClassName(
trackedFlows: TrackedStreamEdgeFlow[],
): string | undefined {
Iif (!trackedFlows.length) return undefined;
Iif (trackedFlows.length === 1) return TRACKED_STREAM_HALO_EDGE_CLASS;
return `${TRACKED_STREAM_HALO_EDGE_CLASS} ${TRACKED_STREAM_EDGE_SHARED_CLASS}`;
}
export function trackedEdgeCssVariables(
trackedFlows: TrackedStreamEdgeFlow[],
): TrackedEdgeCssVariables {
const trackedFlow = trackedFlows[0];
if (!trackedFlow) return {};
return {
"--tracked-stream-accent": trackedFlow.accent,
"--tracked-stream-animation-delay": trackedFlow.animationDelay,
};
}
export function trackedEdgeStrokeWidth(
trackedFlows: TrackedStreamEdgeFlow[],
isRecycle: boolean,
) {
Iif (trackedFlows.length > 1) return 6;
Iif (trackedFlows.length === 1) return 5;
return isRecycle ? 1 : 3;
}
export function trackedHaloEdgeStyle(
trackedFlows: TrackedStreamEdgeFlow[],
): CSSProperties | undefined {
const trackedFlow = trackedFlows[0];
Iif (!trackedFlow) return undefined;
return {
...trackedEdgeCssVariables(trackedFlows),
stroke: trackedFlow.accent,
strokeWidth: trackedFlows.length > 1 ? 9 : 7,
opacity: 0.2,
};
}
|