chore(client): add button component

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

@@ -1,7 +1,8 @@
 import { useCallback, useState } from 'react'
-import { Button, Text, View } from 'react-native'
+import { Text, View } from 'react-native'
 import { Link, useRouter } from 'expo-router'
 import { Camera } from 'lucide-react-native'
+import { Button } from '@/components/ui/button'
 import { Container } from '@/components/ui/Container'
 import { Input } from '@/components/ui/input'
 import { useSignIn } from '@clerk/clerk-expo'
@@ -14,6 +15,7 @@ export default function Page() {
   const [password, setPassword] = useState('')
 
   const onSignInPress = useCallback(async () => {
+    return
     if (!isLoaded) return
 
     try {
@@ -35,8 +37,8 @@ export default function Page() {
 
   return (
     <Container className="flex-1 bg-background">
-      <View className="flex-1">
-        <Text>
+      <View className="flex-1 items-center justify-center">
+        <Text className="color-primary bg-background">
           Master English, Transform Your World. The new frontier in
           collaborative learning.
         </Text>

apps/client/components/ui/button.tsx

@@ -1,12 +1,20 @@
 import { Pressable, PressableProps, Text } from 'react-native'
 import { cn } from '@/lib/cn'
 
-type ButtonProps = PressableProps
+type ButtonProps = {
+  title: string
+} & PressableProps
 
-export function Button({ className, ...props }: ButtonProps) {
+export function Button({ className, title, ...props }: ButtonProps) {
   return (
-    <Pressable {...props} className={cn('', className)}>
-      <Text>Button</Text>
+    <Pressable
+      {...props}
+      className={cn(
+        'items-center justify-center rounded-md bg-primary p-2',
+        className
+      )}
+    >
+      <Text className="text-primary-foreground">{title}</Text>
     </Pressable>
   )
 }