From b5fb0a1978eaa3d1fc6457a8c9b70741b65c2c66 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Mon, 11 Mar 2024 00:15:36 +0000
Subject: feature(mobile): A reasonablly looking signin form

---
 app/signin.tsx           | 22 +++++++++++++++-------
 babel.config.js          |  2 +-
 components/Logo.tsx      | 12 ++++++------
 components/ui/Button.tsx |  2 +-
 components/ui/Input.tsx  | 32 ++++++++++++++++----------------
 lib/utils.ts             |  4 ++--
 6 files changed, 41 insertions(+), 33 deletions(-)

diff --git a/app/signin.tsx b/app/signin.tsx
index 641d1b97..cc8dde79 100644
--- a/app/signin.tsx
+++ b/app/signin.tsx
@@ -1,16 +1,24 @@
+import { View, Text } from "react-native";
+
 import Logo from "@/components/Logo";
 import { Button } from "@/components/ui/Button";
 import { Input } from "@/components/ui/Input";
-import { TextInput, View } from "react-native";
 
 export default function Signin() {
   return (
-    <View className="items-center justify-center h-full">
-      <Logo />
-
-      <Input  />
-      <Button label="Sign In"  />
-
+    <View className="justify-center h-full flex flex-col gap-2 container">
+      <View className="items-center">
+        <Logo />
+      </View>
+      <View className="gap-2">
+        <Text className="font-bold">Email</Text>
+        <Input className="w-full" placeholder="Email" />
+      </View>
+      <View className="gap-2">
+        <Text className="font-bold">Password</Text>
+        <Input className="w-full" placeholder="Password" secureTextEntry />
+      </View>
+      <Button className="w-full" label="Sign In" />
     </View>
   );
 }
diff --git a/babel.config.js b/babel.config.js
index 77c28f95..f3c649bb 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,4 +1,4 @@
-module.exports = function(api) {
+module.exports = function (api) {
   api.cache(true);
   return {
     presets: [
diff --git a/components/Logo.tsx b/components/Logo.tsx
index 8b1d0654..a15d8561 100644
--- a/components/Logo.tsx
+++ b/components/Logo.tsx
@@ -2,10 +2,10 @@ import { PackageOpen } from "lucide-react-native";
 import { View, Text } from "react-native";
 
 export default function Logo() {
-    return (
-        <View className="flex flex-row gap-2 justify-center items-center ">
-            <PackageOpen color="black" size={70} />
-            <Text className="text-5xl">Hoarder</Text>
-        </View>
-    );
+  return (
+    <View className="flex flex-row gap-2 justify-center items-center ">
+      <PackageOpen color="black" size={70} />
+      <Text className="text-5xl">Hoarder</Text>
+    </View>
+  );
 }
diff --git a/components/ui/Button.tsx b/components/ui/Button.tsx
index 069fe116..4c3cbc69 100644
--- a/components/ui/Button.tsx
+++ b/components/ui/Button.tsx
@@ -50,7 +50,7 @@ const buttonTextVariants = cva("text-center font-medium", {
 
 interface ButtonProps
   extends React.ComponentPropsWithoutRef<typeof TouchableOpacity>,
-  VariantProps<typeof buttonVariants> {
+    VariantProps<typeof buttonVariants> {
   label: string;
   labelClasses?: string;
 }
diff --git a/components/ui/Input.tsx b/components/ui/Input.tsx
index 6843917a..6fc90b8f 100644
--- a/components/ui/Input.tsx
+++ b/components/ui/Input.tsx
@@ -4,25 +4,25 @@ import { Text, TextInput, View } from "react-native";
 import { cn } from "@/lib/utils";
 
 export interface InputProps
-    extends React.ComponentPropsWithoutRef<typeof TextInput> {
-    label?: string;
-    labelClasses?: string;
-    inputClasses?: string;
+  extends React.ComponentPropsWithoutRef<typeof TextInput> {
+  label?: string;
+  labelClasses?: string;
+  inputClasses?: string;
 }
 
 const Input = forwardRef<React.ElementRef<typeof TextInput>, InputProps>(
-    ({ className, label, labelClasses, inputClasses, ...props }, ref) => (
-        <View className={cn("flex flex-col gap-1.5", className)}>
-            {label && <Text className={cn("text-base", labelClasses)}>{label}</Text>}
-            <TextInput
-                className={cn(
-                    inputClasses,
-                    "border border-input py-2.5 px-4 rounded-lg",
-                )}
-                {...props}
-            />
-        </View>
-    ),
+  ({ className, label, labelClasses, inputClasses, ...props }, ref) => (
+    <View className={cn("flex flex-col gap-1.5", className)}>
+      {label && <Text className={cn("text-base", labelClasses)}>{label}</Text>}
+      <TextInput
+        className={cn(
+          inputClasses,
+          "border border-input py-2.5 px-4 rounded-lg",
+        )}
+        {...props}
+      />
+    </View>
+  ),
 );
 
 export { Input };
diff --git a/lib/utils.ts b/lib/utils.ts
index 9ad0df42..365058ce 100644
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -1,5 +1,5 @@
-import { type ClassValue, clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
-- 
cgit v1.2.3-70-g09d2