chore(client): add button component and rename input component

apps/client/app/auth/sign-in.tsx

@@ -1,9 +1,9 @@
 import { useCallback, useState } from 'react'
-import { Button, Text, TextInput, View } from 'react-native'
+import { Button, Text, View } from 'react-native'
 import { Link, useRouter } from 'expo-router'
 import { Camera } from 'lucide-react-native'
 import { Container } from '@/components/ui/Container'
-import { Input, InputField, InputIcon } from '@/components/ui/Input'
+import { Input } from '@/components/ui/input'
 import { useSignIn } from '@clerk/clerk-expo'
 
 export default function Page() {

apps/client/components/ui/button.tsx

@@ -0,0 +1,12 @@
+import { Pressable, PressableProps, Text } from 'react-native'
+import { cn } from '@/lib/cn'
+
+type ButtonProps = PressableProps
+
+export function Button({ className, ...props }: ButtonProps) {
+  return (
+    <Pressable {...props} className={cn('', className)}>
+      <Text>Button</Text>
+    </Pressable>
+  )
+}

apps/client/components/ui/input.tsx

@@ -0,0 +1,29 @@
+import { TextInput, TextInputProps, View } from 'react-native'
+import { LucideIcon } from 'lucide-react-native'
+import colors from 'tailwindcss/colors'
+import { cn } from '@/lib/cn'
+
+type InputProps = {
+  icon: LucideIcon
+} & TextInputProps
+
+function Input({ className, icon, ...props }: InputProps) {
+  const Icon = icon
+
+  return (
+    <View className="relative">
+      <View className="absolute flex h-10 w-8 items-center justify-center">
+        <Icon size={16} color={colors.gray[500]} />
+      </View>
+      <TextInput
+        className={cn(
+          'flex h-10 flex-row gap-2 rounded-md border border-input px-3 py-1 pl-8 text-primary focus:border-accent-foreground focus:ring focus:ring-offset-2',
+          className
+        )}
+        {...props}
+      />
+    </View>
+  )
+}
+
+export { Input }