brittanyellich.com
A mobile app view of atmoquest
1.2 kB
47 lines
1import { Text, StyleSheet, type TextProps } from 'react-native';
2import { colors, fontFamilies } from '@/theme';
3
4interface PromptLineProps extends TextProps {
5 /** The "user" segment (green). Defaults to "user". */
6 user?: string;
7 /** The "path" segment (blue). Defaults to "~". */
8 path?: string;
9 /** The "command" segment (text color). */
10 command: string;
11}
12
13/**
14 * Unix-style prompt line: `user@atmo:~$ command`
15 * Matches the web `.prompt-line` styling.
16 */
17export function PromptLine({ user = 'user', path = '~', command, style, ...props }: PromptLineProps) {
18 return (
19 <Text style={[styles.root, style]} {...props}>
20 <Text style={styles.user}>{user}</Text>
21 <Text style={styles.sep}>@atmo:</Text>
22 <Text style={styles.path}>{path}</Text>
23 <Text style={styles.sep}>$ </Text>
24 <Text style={styles.cmd}>{command}</Text>
25 </Text>
26 );
27}
28
29const styles = StyleSheet.create({
30 root: {
31 fontFamily: fontFamilies.mono,
32 fontSize: 13,
33 marginBottom: 8,
34 },
35 user: {
36 color: colors.green,
37 },
38 sep: {
39 color: colors.muted,
40 },
41 path: {
42 color: colors.blue,
43 },
44 cmd: {
45 color: colors.text,
46 },
47});