Initial commit

src/components/ui/Spinner.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { ActivityIndicator, View, StyleSheet, Text } from 'react-native';
+import { COLORS, FONT_SIZE, SPACING } from '../../theme';
+import { useTheme } from '../../theme';
+
+interface SpinnerProps {
+  size?: 'small' | 'large';
+  color?: string;
+  centered?: boolean;
+  label?: string;
+}
+
+export function Spinner({ size = 'large', color, centered = false, label }: SpinnerProps) {
+  const { theme } = useTheme();
+  const spinnerColor = color ?? COLORS.primary;
+
+  if (centered) {
+    return (
+      <View style={styles.centered}>
+        <ActivityIndicator size={size} color={spinnerColor} />
+        {label ? <Text style={[styles.label, { color: theme.textSecondary }]}>{label}</Text> : null}
+      </View>
+    );
+  }
+
+  return <ActivityIndicator size={size} color={spinnerColor} />;
+}
+
+const styles = StyleSheet.create({
+  centered: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: SPACING.xxxl,
+    gap: SPACING.md,
+  },
+  label: { fontSize: FONT_SIZE.sm },
+});