feat: added welcome screen

.prettierrc.js

@@ -5,5 +5,5 @@
   semi: true,
   singleQuote: true,
   bracketSpacing: true,
-  printWidth: 1200,
+  printWidth: 100,
 }

src/components/core/Button.tsx

@@ -3,12 +3,12 @@ import { Text, TouchableOpacity } from 'react-native';
 
 type Props = {
   title: string;
-  onPress?: () => object;
+  onPress?: () => void;
 };
 
 const Button = ({ title, onPress }: Props) => (
-  <TouchableOpacity onPress={onPress} className="px-6 py-2.5 bg-teal-600 rounded-md">
-    <Text className={text({ type: 'headline', isCenter: true, class: 'text-white' })}>{title}</Text>
+  <TouchableOpacity onPress={onPress} className="px-6 py-4 bg-zinc-900 rounded-lg">
+    <Text className={text({ type: 'subtitle', isCenter: true, class: 'text-white' })}>{title}</Text>
   </TouchableOpacity>
 );
 

src/components/core/Input.tsx

@@ -0,0 +1,20 @@
+import { TextInput } from 'react-native';
+
+type Props = {
+  value?: string;
+  placeholder?: string;
+  containerClass?: string;
+  onPressClose?: () => void;
+  onChangeText: (value: string) => void;
+};
+
+const Input = ({ value, containerClass, placeholder, onChangeText }: Props) => (
+  <TextInput
+    value={value}
+    placeholder={placeholder}
+    onChangeText={onChangeText}
+    className={`border-[2px] rounded-lg h-[50px] border-zinc-700 text-zinc-600 px-4 pr-10 font-Medium bg-white ${containerClass}`}
+  />
+);
+
+export default Input;

src/navigators/MainNavigator.tsx

@@ -1,6 +1,6 @@
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import TestScreen from '@screens/Test';
+import WelcomeScreen from '@screens/Welcome';
 
 export type MainNavigatorParamList = {
   Welcome: undefined;
@@ -11,7 +11,7 @@ const Stack = createNativeStackNavigator<MainNavigatorParamList>();
 const MainNavigator = () => (
   <NavigationContainer>
     <Stack.Navigator screenOptions={{ headerShown: false }}>
-      <Stack.Screen name="Welcome" component={TestScreen} />
+      <Stack.Screen name="Welcome" component={WelcomeScreen} />
     </Stack.Navigator>
   </NavigationContainer>
 );

src/screens/Welcome/index.tsx

@@ -0,0 +1,36 @@
+import Button from '@components/core/Button';
+import Input from '@components/core/Input';
+import { text } from '@theme/text';
+import { useState } from 'react';
+import { Text, View } from 'react-native';
+
+const WelcomeScreen = () => {
+  const [wordpressSite, setWordpressSiteUrl] = useState('https://blog.ted.com/');
+
+  return (
+    <View className="flex-1 items-center justify-center px-5 bg-white">
+      <View className="mb-10 items-center">
+        <View className="flex-row">
+          <Text className="text-zinc-700 text-[28px] font-Bold">Wo</Text>
+          <View className="bg-zinc-900 rounded-md">
+            <Text className="text-white text-[28px] font-Bold mx-2">Mob</Text>
+          </View>
+        </View>
+        <Text className={text({ type: 'subtitle', class: 'opacity-60 text-zinc-900 mt-1' })}>
+          Wordpress to Mobile App
+        </Text>
+      </View>
+      <View className="w-full">
+        <Input
+          value={wordpressSite}
+          containerClass="w-full mb-4"
+          onChangeText={setWordpressSiteUrl}
+          placeholder="Type your wordpress site link"
+        />
+        <Button title="Convert Wordpress into Mobile" />
+      </View>
+    </View>
+  );
+};
+
+export default WelcomeScreen;