kinda works

1 files changed, 105 insertions, 0 deletions

diff --git a/components/login/ShipCredsForm.tsx b/components/login/ShipCredsForm.tsx
new file mode 100644
index 0000000..15712c2
--- /dev/null
+++ b/components/login/ShipCredsForm.tsx
@@ -0,0 +1,105 @@
+"use client";
+import { ColorScheme, lightColors } from "@/constants";
+import { BottomTabBarButtonProps } from "@react-navigation/bottom-tabs";
+import {
+  StyleSheet,
+  TextInput,
+  TouchableOpacity,
+  View,
+  Text,
+} from "react-native";
+import PrimaryButton from "../PrimaryButton";
+import { useState } from "react";
+
+export function ShipForm() {
+  const colors = lightColors;
+  const styles = getStyles(colors);
+  const [patp, setPatp] = useState("~mirtyl-wacdec");
+  const [ticket, setTicket] = useState("~posseg-winnub-fogluc-dirmes");
+  const [isLoading, setIsLoading] = useState(false);
+  async function onSubmit() {
+    console.log({ patp, ticket });
+  }
+  return (
+    <View style={styles.bottomSection}>
+      <TextInput
+        style={styles.input}
+        placeholder="~sampel-palnet"
+        placeholderTextColor={colors.secondary}
+        value={patp}
+        onChangeText={setPatp}
+        autoCapitalize="none"
+        autoCorrect={false}
+      />
+      <TextInput
+        style={styles.input}
+        placeholder="~sampel-ticlyt-migfun-falmel"
+        placeholderTextColor={colors.secondary}
+        value={ticket}
+        onChangeText={setTicket}
+        autoCapitalize="none"
+        autoCorrect={false}
+        secureTextEntry
+      />
+
+      <PrimaryButton
+        label="Log in"
+        onPress={onSubmit}
+        style={{ marginTop: 0 }}
+        isLoading={isLoading}
+      />
+
+      <TouchableOpacity style={styles.footer}>
+        <Text style={styles.footerText}>No Urbit ID? Get yours.</Text>
+      </TouchableOpacity>
+    </View>
+  );
+}
+export const getStyles = (colors: ColorScheme) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.background,
+      justifyContent: "space-between",
+      padding: 20,
+    },
+    topSection: {
+      flex: 1,
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    walletIcon: {
+      width: 64,
+      height: 64,
+      marginBottom: 12,
+    },
+    logoText: {
+      fontSize: 18,
+      color: colors.text,
+      fontWeight: "400",
+    },
+    bottomSection: {
+      gap: 8,
+      marginBottom: 40,
+    },
+    input: {
+      height: 48,
+      backgroundColor: colors.card,
+      borderColor: colors.border,
+      borderWidth: 1,
+      borderRadius: 8,
+      paddingHorizontal: 16,
+      paddingVertical: 12,
+      color: colors.text,
+      fontWeight: "500",
+      fontSize: 16,
+    },
+    footer: {
+      marginTop: 50,
+      alignItems: "center",
+    },
+    footerText: {
+      color: colors.text,
+      fontSize: 16,
+    },
+  });