Start register page (#89)

frontend/app/index.tsx

@@ -1,15 +1,32 @@
 import { SpotifyAuthButton } from '@/components/SpotifyAuthButton';
-import { SafeAreaView, Text } from 'react-native';
+import { useRouter } from 'expo-router';
+import { SafeAreaView, StyleSheet, Text, TouchableOpacity } from 'react-native';
 
 const Index = () => {
+  const router = useRouter();
+
   return (
     <>
-      <SafeAreaView>
-        <Text>Hello, world</Text>
-        <SpotifyAuthButton />
+      <SafeAreaView style={styles.container}>
+        <TouchableOpacity
+          onPress={() => {
+            router.navigate('/register');
+          }}
+        >
+          <Text>Go To Register Page</Text>
+        </TouchableOpacity>
       </SafeAreaView>
     </>
   );
 };
 
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
 export default Index;

frontend/app/register/index.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { SafeAreaView, StyleSheet, View } from 'react-native';
+import { SpotifyAuthButton } from '@/components/SpotifyAuthButton';
+import { Header } from '@/components/Header';
+import { InputField } from '@/components/InputField';
+
+const Index = () => {
+  return (
+    <SafeAreaView style={styles.background}>
+      <View style={styles.container}>
+        <Header
+          text="Register"
+          style={{
+            marginBottom: 20,
+          }}
+        />
+        <InputField
+          label="Username"
+          placeholder="Username"
+          style={{
+            marginBottom: 10,
+            width: '80%',
+          }}
+        />
+        <InputField
+          label="Password"
+          placeholder="Password"
+          style={{
+            marginBottom: 20,
+            width: '80%',
+          }}
+          kind="password"
+        />
+        <SpotifyAuthButton />
+      </View>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  background: {
+    width: '100%',
+    height: '100%',
+    backgroundColor: 'black',
+  },
+  container: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '50%',
+  },
+});
+
+export default Index;

frontend/components/Header.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { StyleProp, StyleSheet, Text, TextStyle } from 'react-native';
+interface Props {
+  text: string;
+  style?: StyleProp<TextStyle>;
+}
+export const Header: React.FC<Props> = ({ text, style }) => {
+  return (
+    <Text
+      style={{
+        ...styles.header,
+        ...(style as object),
+      }}
+    >
+      {text}
+    </Text>
+  );
+};
+const styles = StyleSheet.create({
+  header: {
+    color: 'white',
+    fontSize: 30,
+    fontWeight: 'bold',
+  },
+});

frontend/components/InputField.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  TextInput,
+  StyleSheet,
+  ViewStyle,
+  StyleProp,
+} from 'react-native';
+interface Props {
+  label: string;
+  placeholder: string;
+  style?: StyleProp<ViewStyle>;
+  kind?: 'text' | 'password';
+}
+export const InputField: React.FC<Props> = ({
+  label,
+  placeholder,
+  style,
+  kind,
+}) => {
+  return (
+    <View
+      style={{
+        ...styles.container,
+        ...(style as object),
+      }}
+    >
+      <Text style={styles.label}>{label}</Text>
+      <TextInput
+        style={styles.input}
+        placeholder={placeholder}
+        placeholderTextColor="#aaa"
+        secureTextEntry={kind === 'password'}
+      />
+    </View>
+  );
+};
+const styles = StyleSheet.create({
+  container: {
+    marginVertical: 10,
+  },
+  label: {
+    fontSize: 16,
+    color: 'white',
+    marginBottom: 5,
+    fontWeight: 'bold',
+  },
+  input: {
+    height: 40,
+    borderWidth: 1,
+    borderColor: '#ccc',
+    borderRadius: 10,
+    paddingHorizontal: 10,
+    fontSize: 16,
+    color: 'white',
+  },
+});