Add Sign in with Apple sorta

components/theme/inputs/ThemedSearchBar.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { StyleSheet, ViewProps, DimensionValue } from 'react-native';
+import ThemedView from '@/components/theme/default/ThemedView';
+import ThemedTextInput from '@/components/theme/inputs/ThemedTextInput';
+import { Ionicons } from '@expo/vector-icons';
+import { Colors } from '@/constants/Colors';
+import { useColorScheme } from '@/hooks/useColorScheme';
+
+type ThemedSearchBarProps = ViewProps & {
+  placeholder?: string;
+  value: string;
+  onChangeText: (text: string) => void;
+  width?: DimensionValue;
+  height?: number;
+};
+
+const ThemedSearchBar: React.FC<ThemedSearchBarProps> = ({
+  placeholder = 'Search',
+  value,
+  onChangeText,
+  width = '100%',
+  height = 40,
+  style,
+  ...restProps
+}) => {
+  const scheme = useColorScheme() ?? 'dark';
+
+  return (
+    <ThemedView style={[styles.container, { width }, style]} {...restProps}>
+      <Ionicons name='search' size={20} color={Colors[scheme].text} style={styles.icon} />
+      <ThemedTextInput
+        placeholder={placeholder}
+        value={value}
+        onChangeText={onChangeText}
+        height={height}
+        width={width}
+        style={styles.input}
+      />
+    </ThemedView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  icon: {
+    position: 'absolute',
+    zIndex: 1,
+    left: 15,
+  },
+  input: {
+    paddingLeft: 45,
+  },
+});
+
+export default ThemedSearchBar;

components/theme/inputs/ThemedSwitch.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Switch, SwitchProps } from 'react-native';
+import { Colors } from '@/constants/Colors';
+import { useColorScheme } from '@/hooks/useColorScheme';
+
+type ThemedSwitchProps = SwitchProps;
+
+const ThemedSwitch: React.FC<ThemedSwitchProps> = ({ ...props }) => {
+  const scheme = useColorScheme() ?? 'dark';
+
+  return (
+    <Switch
+      trackColor={{
+        false: Colors[scheme].border,
+        true: Colors[scheme].tint + '80',
+      }}
+      thumbColor={props.value ? Colors[scheme].tint : Colors[scheme].card}
+      ios_backgroundColor={Colors[scheme].border}
+      {...props}
+    />
+  );
+};
+
+export default ThemedSwitch;

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,
+  },
+});