1import { View } from "react-native";
2
3import { AppText as Text } from "../../components/ui/AppText";
4
5/** The guest's name above their message, where "Sent by T3 Code" sits for server messages. */
6export function GuestMessageName(props: { readonly name: string }) {
7 return (
8 <Text
9 accessibilityLabel={`${props.name} (guest)`}
10 className="mb-1 pr-1 font-t3-medium text-2xs text-adaptive-fuchsia-600-300"
11 numberOfLines={1}
12 >
13 {props.name}
14 </Text>
15 );
16}
17
18/**
19 * First child of a sent guest bubble. Over the bubble color it gives the web's 14% fuchsia mix,
20 * which every theme gets without a per-theme token.
21 */
22export function GuestBubbleTint() {
23 return (
24 <View pointerEvents="none" className="absolute inset-0 rounded-[20px] bg-fuchsia-500/14" />
25 );
26}
27
28/** A pending guest bubble has a dashed edge and no fill. */
29export const GUEST_PENDING_BUBBLE_CLASS_NAME =
30 "min-w-0 rounded-[20px] border border-dashed border-adaptive-fuchsia-500-a50-300-a40 bg-transparent px-3.5 py-2.5";