Split some code into seperate components

components/Card/index.tsx

@@ -0,0 +1,20 @@
+import { View, Text } from "react-native";
+import tw from "twrnc";
+
+interface CardProps {
+  label?: string;
+  children: React.ReactNode;
+}
+
+export default function Card({ label, children }: CardProps) {
+  return (
+    <>
+      {label && <Text style={tw.style("ml-6 mt-4")}>{label}</Text>}
+      <View
+        style={tw.style("bg-white m-2 p-1 rounded-lg border border-slate-200")}
+      >
+        {children}
+      </View>
+    </>
+  );
+}

components/Gauge/index.tsx

@@ -0,0 +1,16 @@
+import { View, Text } from "react-native";
+import tw from "twrnc";
+
+interface GaugeProps {
+  label: string;
+  value: string;
+}
+
+export function Gauge({ label, value }: GaugeProps) {
+  return (
+    <View>
+      <Text>{label}</Text>
+      <Text style={tw.style("text-2xl")}>{value}</Text>
+    </View>
+  );
+}

components/Login/index.tsx

@@ -1,12 +1,49 @@
-import { View, Button, Text, TextInput } from "react-native";
+import {
+  View,
+  TouchableOpacity,
+  Text,
+  TextInput,
+  SafeAreaView,
+  TextInputProps,
+} from "react-native";
 import React, { useState } from "react";
+import tw from "twrnc";
 import useAuthStore from "../../stores/useAuthStore";
 import { useTicketMut } from "../../hooks/useTicket";
 
+interface FormFieldProps extends TextInputProps {
+  label: string;
+}
+
+export function FormField({
+  label,
+  value,
+  onChangeText,
+  placeholder,
+  secureTextEntry,
+  inputMode,
+}: FormFieldProps) {
+  return (
+    <>
+      <Text style={tw.style("ml-2 mb-2 text-slate-500")}>{label}</Text>
+      <TextInput
+        style={tw.style(
+          "border rounded-md border-slate-200 bg-slate-100 px-4 py-2 text-base"
+        )}
+        value={value}
+        onChangeText={onChangeText}
+        placeholder={placeholder}
+        secureTextEntry={secureTextEntry}
+        inputMode={inputMode}
+      />
+    </>
+  );
+}
+
 export default function Login() {
-  const [domain, setDomain] = useState("");
+  const [domain, setDomain] = useState("https://pve.holowaif.us:8006");
   const [username, setUsername] = useState("root@pam");
-  const [password, setPassword] = useState("");
+  const [password, setPassword] = useState("1Absolut3.lyAd0r3Vtube.rs!");
 
   const authStore = useAuthStore();
   const ticketMut = useTicketMut({
@@ -17,23 +54,51 @@ export default function Login() {
   });
 
   return (
-    <View>
-      <Text>Hello</Text>
-      <TextInput value={domain} onChangeText={setDomain} placeholder="Domain" />
-      <TextInput
-        value={username}
-        onChangeText={setUsername}
-        placeholder="Username"
-      />
-      <TextInput
-        value={password}
-        onChangeText={setPassword}
-        placeholder="Password"
-      />
-      <Button
-        title="Login"
-        onPress={() => ticketMut.mutate({ domain, username, password })}
-      />
+    <View style={tw.style("flex-1 justify-center")}>
+      <SafeAreaView style={tw.style("mx-4")}>
+        <View style={tw.style("ml-2 mb-8")}>
+          <Text style={tw.style("text-3xl font-semibold text-slate-700 mb-2")}>
+            PVERN
+          </Text>
+          <Text style={tw.style("text-xl font-semibold text-slate-600")}>
+            Sign In
+          </Text>
+        </View>
+        <View style={tw.style("mb-5")}>
+          <FormField
+            inputMode="url"
+            label="Server URL"
+            placeholder="https://pve.example.com"
+            value={domain}
+            onChangeText={setDomain}
+          />
+        </View>
+        <View style={tw.style("mb-5")}>
+          <FormField
+            autoComplete="username"
+            label="Username"
+            value={username}
+            onChangeText={setUsername}
+          />
+        </View>
+        <View style={tw.style("mb-10")}>
+          <FormField
+            autoComplete="password"
+            label="Password"
+            value={password}
+            onChangeText={setPassword}
+            secureTextEntry
+          />
+        </View>
+        <TouchableOpacity
+          style={tw.style(
+            "flex bg-slate-700 rounded-md flex flex-row items-center justify-center"
+          )}
+          onPress={() => ticketMut.mutate({ domain, username, password })}
+        >
+          <Text style={tw.style("text-white font-semibold py-3")}>Sign In</Text>
+        </TouchableOpacity>
+      </SafeAreaView>
     </View>
   );
 }

components/ProgressBar/index.tsx

@@ -0,0 +1,42 @@
+import { View, Text } from "react-native";
+import tw from "twrnc";
+import { formatPercentage } from "../../lib/helper/format";
+
+interface ProgressBarProps {
+  label: string;
+  value: number;
+  max: number;
+  formatFn?: (input: number) => string;
+}
+
+export default function ProgressBar({
+  label,
+  value,
+  max,
+  formatFn,
+}: ProgressBarProps) {
+  const percentage = formatPercentage(value / max);
+  return (
+    <View>
+      <View
+        style={tw.style("flex flex-row justify-between items-center mb-1 px-1")}
+      >
+        <Text>
+          {label} ({percentage})
+        </Text>
+        {formatFn && (
+          <Text>
+            {formatFn(value)}/{formatFn(max)}
+          </Text>
+        )}
+      </View>
+      <View style={tw.style("h-3 w-full bg-slate-300 rounded-lg")}>
+        <View
+          style={tw.style("h-full bg-slate-700 rounded-lg", {
+            width: percentage,
+          })}
+        />
+      </View>
+    </View>
+  );
+}