Merge pull request #6 from MGT-Limited/5-create-component---normal-input

created normal, secondary button & normal input

app/(tabs)/settings/index.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { Text } from "react-native";
 import PhoneInput from "../../../component/global/phone_input";
+
 export default function Index() {
 	/**********************************狀態管理**********************************/
 	/**********************************狀態管理**********************************/
@@ -17,12 +18,7 @@ export default function Index() {
 	return (
 		////testing component here
 		<>
-			<PhoneInput
-				placeholder="電話號碼"
-				onChangeText={(newText) => console.log(newText)}
-				onValidationStatusChange={handleValidationStatus}
-			/>
-			{console.log(inputValidationStatus)}
+      <p>Test Here</p>
 		</>
 	);
 }

component/global/normal_button.tsx

@@ -0,0 +1,36 @@
+import React, { ReactElement } from "react";
+import { Pressable, Text, StyleSheet, ViewStyle, StyleProp } from "react-native";
+
+interface NormalButtonProps {
+	title: ReactElement;
+	extendedStyle?: StyleProp<ViewStyle>;
+	onPress: () => void;
+}
+
+const NormalButton: React.FC<NormalButtonProps> = ({ title, extendedStyle, onPress }) => {
+	return (
+		<Pressable
+			onPress={onPress}
+			style={({ pressed }) => [styles.button, pressed ? styles.buttonPressed : null, extendedStyle]}
+		>
+			{title}
+		</Pressable>
+	);
+};
+
+const styles = StyleSheet.create({
+	button: {
+		maxWidth: "100%",
+		padding: 15,
+		margin: 10,
+		backgroundColor: "#025c72",
+		justifyContent: "center",
+		alignItems: "center",
+		borderRadius: 10,
+	},
+	buttonPressed: {
+		backgroundColor: "#28495c",
+	},
+});
+
+export default NormalButton;

component/global/normal_input.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { TextInput, StyleSheet, StyleProp, ViewStyle, KeyboardTypeOptions } from "react-native";
+
+interface NormalInputProps {
+	placeholder: string;
+	extendedStyle?: StyleProp<ViewStyle>;
+	onChangeText: (text: string) => void;
+	type?: KeyboardTypeOptions;
+	secureTextEntry?: boolean;
+}
+
+const NormalInput: React.FC<NormalInputProps> = ({
+	placeholder,
+	extendedStyle,
+	type,
+	onChangeText,
+	secureTextEntry = false,
+}) => {
+	return (
+		<TextInput
+			style={[styles.textInput, extendedStyle]}
+			placeholder={placeholder}
+			keyboardType={type ? type : "default"}
+			onChangeText={onChangeText}
+			secureTextEntry={secureTextEntry}
+		/>
+	);
+};
+
+const styles = StyleSheet.create({
+	textInput: {
+		maxWidth: "100%",
+		height: 60,
+		borderWidth: 1,
+		margin: 10,
+		padding: 20,
+		borderRadius: 8,
+		borderColor: "#bbbbbb",
+	},
+});
+
+export default NormalInput;

component/global/secondary_button.tsx

@@ -0,0 +1,35 @@
+import React, { ReactElement } from "react";
+import { Pressable, StyleSheet, ViewStyle, StyleProp } from "react-native";
+
+interface SecondaryButtonProps {
+	title: ReactElement;
+	extendedStyle?: StyleProp<ViewStyle>;
+	onPress: () => void;
+}
+
+const SecondaryButton: React.FC<SecondaryButtonProps> = ({ title, extendedStyle, onPress }) => {
+	return (
+		<Pressable
+			onPress={onPress}
+			style={({ pressed }) => [styles.button, pressed ? styles.buttonPressed : null, extendedStyle]}
+		>
+			{title}
+		</Pressable>
+	);
+};
+
+const styles = StyleSheet.create({
+	button: {
+		maxWidth: "100%",
+		padding: 15,
+		margin: 10,
+		backgroundColor: "#e7f2f8",
+		justifyContent: "center",
+		alignItems: "center",
+		borderRadius: 10,
+	},
+	buttonPressed: {
+		backgroundColor: "#d0e1e8",
+	},
+});
+export default SecondaryButton;