1import type { ReactNode } from "react";
2import { View, type ColorValue } from "react-native";
3import { AppText as Text } from "../../components/AppText";
4import { SymbolView, type AppSymbolName } from "../../components/AppSymbol";
5import { ShimmeringWorkContent } from "./thread-work-log";
6
7export function ThreadContextDivider(props: {
8 label: string;
9 icon: AppSymbolName;
10 iconColor: ColorValue;
11 active?: boolean;
12 failed?: boolean;
13 children?: ReactNode;
14}) {
15 return (
16 <View className="mb-3 flex-row items-center gap-3 px-1 py-1">
17 <View className="h-px min-w-2 flex-1 bg-separator" />
18 <View className="shrink flex-row flex-wrap items-center justify-center gap-1.5">
19 <SymbolView name={props.icon} size={12} tintColor={props.iconColor} type="monochrome" />
20 {props.active ? (
21 <ShimmeringWorkContent
22 className="flex-none"
23 textClassName="font-t3-medium"
24 compact
25 icon="brain"
26 iconSubtleColor={props.iconColor}
27 label={props.label}
28 showIcon={false}
29 />
30 ) : (
31 <Text
32 className={
33 props.failed
34 ? "font-t3-medium text-xs text-danger-foreground"
35 : "font-t3-medium text-xs text-foreground-muted"
36 }
37 >
38 {props.label}
39 </Text>
40 )}
41 {props.children}
42 </View>
43 <View className="h-px min-w-2 flex-1 bg-separator" />
44 </View>
45 );
46}