1import Constants from "expo-constants";
2import { Image } from "expo-image";
3import { View } from "react-native";
4
5import { AppText as Text } from "./AppText";
6import { KNIFE_BRAND_MARK_SOURCE } from "./brandAssets";
7
8const appVariant = Constants.expoConfig?.extra?.appVariant;
9const DEFAULT_STAGE_LABEL =
10 appVariant === "development" ? "Dev" : appVariant === "preview" ? "Preview" : "Alpha";
11
12export function BrandMark(props: { readonly compact?: boolean; readonly stageLabel?: string }) {
13 const compact = props.compact ?? false;
14 const iconSize = compact ? 32 : 44;
15 const stageLabel = props.stageLabel ?? DEFAULT_STAGE_LABEL;
16
17 return (
18 <View className="flex-row items-center gap-3">
19 <Image
20 source={KNIFE_BRAND_MARK_SOURCE}
21 accessibilityIgnoresInvertColors
22 style={{
23 width: iconSize,
24 height: iconSize,
25 }}
26 />
27 <View className="gap-1">
28 <View className="flex-row items-center gap-2">
29 <Text className="text-lg font-t3-bold tracking-[-0.4px] text-foreground">The Knife</Text>
30 <View className="rounded-full bg-subtle px-2 py-1">
31 <Text className="text-3xs font-t3-bold tracking-[1.1px] uppercase text-foreground-muted">
32 {stageLabel}
33 </Text>
34 </View>
35 </View>
36 {!compact ? (
37 <Text className="text-xs font-medium text-foreground-muted">
38 Mobile control surface for your live coding environments
39 </Text>
40 ) : null}
41 </View>
42 </View>
43 );
44}