mirror of
https://github.com/0xWheatyz/handler.git
synced 2026-09-01 22:16:23 +00:00
Claude
daecaa7e6b
Build the committed 2a interactive prototype from Handler Mobile.dc.html as a real Expo app: six wired screens (Fleet, Agent detail, Answer, Spawn, Log, Settings) with the exact state logic ported from the design's renderVals(). - Port Leeworks tokens (colors light/dark, typography, spacing, radii, shadows) to typed RN values in src/theme. - Reimplement the design-system components used by the screens (Button, Badge, Icon, Switch, Select, TextField, segmented control, chip, tab bar). - Shared store mirrors the prototype's single-screen navigation and the Waiting -> Running flip when agt-7a1d is answered. - Real OS status bar / home indicator (safe-area insets) replace the mock phone chrome; dark mode follows system appearance. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PdF2hHVQ4UUBFPtpeMQ81o
37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
import React from "react";
|
|
import { StyleSheet, Text, View } from "react-native";
|
|
import { fonts, radius } from "../theme/tokens";
|
|
import { useTheme } from "../theme/useTheme";
|
|
import type { BadgeTone } from "../state/AppState";
|
|
|
|
/** Leeworks Badge, ported from components/display/Badge.jsx. */
|
|
export function Badge({ tone, children }: { tone: BadgeTone; children: string }) {
|
|
const { colors } = useTheme();
|
|
const tones: Record<BadgeTone, { bg: string; fg: string }> = {
|
|
neutral: { bg: colors.ink1, fg: colors.ink7 },
|
|
positive: { bg: colors.positiveTint, fg: colors.positive },
|
|
warning: { bg: colors.warningTint, fg: colors.warning },
|
|
danger: { bg: colors.dangerTint, fg: colors.danger },
|
|
};
|
|
const t = tones[tone];
|
|
return (
|
|
<View style={[styles.badge, { backgroundColor: t.bg }]}>
|
|
<Text style={[styles.text, { color: t.fg }]}>{children}</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
badge: {
|
|
alignSelf: "flex-start",
|
|
paddingVertical: 3,
|
|
paddingHorizontal: 10,
|
|
borderRadius: radius.pill,
|
|
},
|
|
text: {
|
|
fontFamily: fonts.bodySemiBold,
|
|
fontSize: 12,
|
|
lineHeight: 17,
|
|
},
|
|
});
|