feat(client): add header and avatar components

apps/client/app/(home)/_components/header.tsx

@@ -1,13 +1,31 @@
 import React from 'react'
-import { View } from 'react-native'
+import { Text, View } from 'react-native'
+import { Bell } from 'lucide-react-native'
+import { Avatar } from '@/components/ui/avatar'
 import { Button } from '@/components/ui/button'
 import { useAuth } from '@clerk/clerk-expo'
 
 export const Header = () => {
   const { signOut } = useAuth()
+  const userName = 'Bruno Rodrigues'
   return (
-    <View className="bg-green-500">
-      <Button title="teste" onPress={() => signOut()} />
+    <View className="px-2">
+      <View className="flex-row justify-between">
+        <View className="flex-row gap-2">
+          <Avatar
+            source={{
+              uri: 'https://avatars.githubusercontent.com/u/13812512?v=4',
+            }}
+          />
+          <View>
+            <Text className="text-slate-300">{userName}</Text>
+            <Text className="text-slate-500">Welcome back</Text>
+          </View>
+        </View>
+        <View>
+          <Button variant="ghost" icon={Bell} onPress={() => signOut()} />
+        </View>
+      </View>
     </View>
   )
 }

apps/client/app/(home)/_layout.tsx

@@ -1,6 +1,7 @@
 import { Redirect } from 'expo-router'
 import { Stack } from 'expo-router/stack'
 import { Container } from '@/components/ui/container'
+import { colors } from '@/theme'
 import { useAuth } from '@clerk/clerk-expo'
 import { Header } from './_components/header'
 
@@ -14,7 +15,12 @@ export default function Layout() {
   return (
     <Container className="bg-background">
       <Header />
-      <Stack screenOptions={{ headerShown: false }} />
+      <Stack
+        screenOptions={{
+          headerShown: false,
+          contentStyle: { backgroundColor: colors.dark.background },
+        }}
+      />
     </Container>
   )
 }

apps/client/app/(home)/index.tsx

@@ -1,23 +1,24 @@
 import { Text, TouchableOpacity } from 'react-native'
 import { Link } from 'expo-router'
-import { Container } from '@/components/ui/container'
 import { SignedIn, SignedOut, useAuth, useUser } from '@clerk/clerk-expo'
 
 export default function Page() {
   const { signOut } = useAuth()
   const { user } = useUser()
 
   return (
-    <Container className="bg-red-500">
+    <>
       <SignedIn>
-        <Text>Hello {user?.emailAddresses[0].emailAddress}</Text>
+        <Text className="text-primary">
+          Hello {user?.emailAddresses[0].emailAddress}
+        </Text>
         <TouchableOpacity onPress={() => signOut()}>
-          <Text>Sign out</Text>
+          <Text className="text-primary">Sign out</Text>
         </TouchableOpacity>
       </SignedIn>
       <SignedOut>
         <Link href="/auth/sign-in">
-          <Text>Sign in</Text>
+          <Text className="primary">Sign in</Text>
         </Link>
         <Link href="/auth/sign-up">
           <Text>Sign up</Text>
@@ -26,6 +27,6 @@ export default function Page() {
           <Text>Sign out</Text>
         </TouchableOpacity>
       </SignedOut>
-    </Container>
+    </>
   )
 }

apps/client/components/ui/avatar.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { Image, ImageProps, View } from 'react-native'
+
+type AvatarProps = {} & ImageProps
+
+export const Avatar = (props: AvatarProps) => {
+  return (
+    <View className="rounded-full bg-secondary p-0.5">
+      <Image width={32} height={32} {...props} className="rounded-full" />
+    </View>
+  )
+}