Added theme components. Reorganized them. Prepping for Tech Tracker Rewrite

components/theme/ui/ThemedBadge.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { StyleSheet, ViewProps } from 'react-native';
+import { ThemedView, ThemedText } from '@/components/theme';
+import { Colors } from '@/constants/Colors';
+import { useColorScheme } from '@/hooks/useColorScheme';
+
+type ThemedBadgeProps = ViewProps & {
+  value: number | string;
+  size?: number;
+  color?: string;
+  textColor?: string;
+};
+
+const ThemedBadge: React.FC<ThemedBadgeProps> = ({
+  value,
+  size = 24,
+  color,
+  textColor,
+  style,
+  ...restProps
+}) => {
+  const scheme = useColorScheme() ?? 'dark';
+  const badgeColor = color || Colors[scheme].tint;
+  const badgeTextColor = textColor || Colors[scheme].background;
+  
+  return (
+    <ThemedView
+      style={[
+        styles.badge,
+        {
+          width: size,
+          height: size,
+          borderRadius: size / 2,
+          backgroundColor: badgeColor,
+        },
+        style,
+      ]}
+      {...restProps}
+    >
+      <ThemedText 
+        style={[
+          styles.text, 
+          { color: badgeTextColor, fontSize: size * 0.5 }
+        ]}
+      >
+        {value}
+      </ThemedText>
+    </ThemedView>
+  );
+};
+
+const styles = StyleSheet.create({
+  badge: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    fontWeight: 'bold',
+  },
+});
+
+export default ThemedBadge;