Add Sign in with Apple sorta

components/theme/inputs/ThemedTextInput.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { StyleSheet, TextInput, TextInputProps, DimensionValue } from 'react-native';
+import ThemedView from '@/components/theme/default/ThemedView';
+import { Colors } from '@/constants/Colors';
+import { useColorScheme } from '@/hooks/useColorScheme';
+
+const DEFAULT_WIDTH = 320;
+const DEFAULT_HEIGHT = 50;
+
+type ThemedTextInputProps = TextInputProps & {
+  width?: DimensionValue;
+  height?: DimensionValue;
+  fontSize?: number;
+  containerStyle?: object;
+};
+
+const ThemedTextInput: React.FC<ThemedTextInputProps> = ({
+  width = DEFAULT_WIDTH,
+  height = DEFAULT_HEIGHT,
+  fontSize = 16,
+  containerStyle,
+  style,
+  ...restProps
+}) => {
+  const scheme = useColorScheme() ?? 'dark';
+
+  return (
+    <ThemedView
+      style={[
+        styles.inputContainer,
+        {
+          width,
+          height,
+          borderColor: Colors[scheme].accent },
+          containerStyle,
+      ]}
+    >
+      <TextInput
+        style={[
+          styles.input,
+          {
+            color: Colors[scheme].text,
+            backgroundColor: Colors[scheme].background,
+            fontSize,
+          },
+          style,
+        ]}
+        placeholderTextColor={Colors[scheme].text + '80'} // 50% opacity
+        {...restProps}
+      />
+    </ThemedView>
+  );
+};
+
+export default ThemedTextInput;
+
+const styles = StyleSheet.create({
+  inputContainer: {
+    padding: 3,
+    borderRadius: 10,
+    borderWidth: 1,
+  },
+  input: {
+    width: '100%',
+    height: '100%',
+    borderRadius: 8,
+    paddingHorizontal: 15,
+  },
+});