From 55e7e281dfa7e4f9ad27d00dc17d9874fa4f59d3 Mon Sep 17 00:00:00 2001
From: Vinicius Souza <dev@viniciussouza.me>
Date: Fri, 25 Oct 2024 12:31:01 -0300
Subject: [PATCH] feat: create user photo component

---
 src/components/HomeHeader.tsx | 10 +++++++++-
 src/components/UserPhoto.tsx  | 17 +++++++++++++++++
 2 files changed, 26 insertions(+), 1 deletion(-)
 create mode 100644 src/components/UserPhoto.tsx

diff --git a/src/components/HomeHeader.tsx b/src/components/HomeHeader.tsx
index bf735a5..89f6064 100644
--- a/src/components/HomeHeader.tsx
+++ b/src/components/HomeHeader.tsx
@@ -1,8 +1,16 @@
 import { Heading, HStack, Text, VStack } from "@gluestack-ui/themed";
+import { UserPhoto } from "./UserPhoto";
 
 export function HomeHeader() {
   return (
-    <HStack bg="$gray600" pt="$16" pb="$5" px="$8" alignItems="center">
+    <HStack bg="$gray600" pt="$16" pb="$5" px="$8" alignItems="center" gap="$4">
+      <UserPhoto
+        source={{ uri: 'https://i.pravatar.cc/200' }}
+        alt="avatar image"
+        h="$16"
+        w="$16"
+      />
+
       <VStack>
         <Text color="$gray100" fontSize="$sm">
           Olá,
diff --git a/src/components/UserPhoto.tsx b/src/components/UserPhoto.tsx
new file mode 100644
index 0000000..77d447c
--- /dev/null
+++ b/src/components/UserPhoto.tsx
@@ -0,0 +1,17 @@
+import { ComponentProps } from "react";
+import { Image } from "@gluestack-ui/themed";
+
+type Props = ComponentProps<typeof Image>;
+
+export function UserPhoto({ ...others }: Props) {
+  return (
+    <Image
+      rounded="$full"
+      overflow="hidden"
+      borderWidth="$2"
+      borderColor="$gray400"
+      backgroundColor="$gray500"
+      {...others}
+    />
+  )
+}