From 9afbf76a809d0a35dacad7d66697a3e4f9a8bd52 Mon Sep 17 00:00:00 2001
From: CarolBrose <c.brose@edu.pucrs.br>
Date: Mon, 8 Sep 2025 00:34:04 -0300
Subject: [PATCH 1/2] feat: add header component

---
 src/components/Header.tsx | 38 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 src/components/Header.tsx

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
new file mode 100644
index 0000000..3c24513
--- /dev/null
+++ b/src/components/Header.tsx
@@ -0,0 +1,38 @@
+import { ChevronLeft } from "lucide-react-native";
+import React from "react";
+import { View, Text, TouchableOpacity, useColorScheme } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+
+interface HeaderProps {
+  title: string;
+  showBackButton?: boolean;
+  handleBack?: () => void;
+}
+
+export default function Header({ title, showBackButton, handleBack }: HeaderProps) {
+  const colorScheme = useColorScheme();
+
+  const arrowColor = colorScheme === "dark" ? "#FF9F3A" : "#F28D22";
+
+  return (
+    <SafeAreaView edges={["top"]} className="bg-background-0">
+      <View className="w-full flex-row items-center justify-between px-4 py-3 shadow-sm">
+        <View className="w-1/4">
+          {showBackButton && (
+            <TouchableOpacity onPress={handleBack} activeOpacity={0.7}>
+              <ChevronLeft size={24} color={arrowColor} />
+            </TouchableOpacity>
+          )}
+        </View>
+
+        <View className="w-2/4 items-center">
+          <Text className="text-xl font-ifood-bold text-typography-900 dark:text-typography-white">
+            {title}
+          </Text>
+        </View>
+
+        <View className="w-1/4" />
+      </View>
+    </SafeAreaView>
+  );
+}

From 970e546016de90a2d9072cb5132da0a9bfade790 Mon Sep 17 00:00:00 2001
From: CarolBrose <c.brose@edu.pucrs.br>
Date: Mon, 8 Sep 2025 22:22:04 -0300
Subject: [PATCH 2/2] feat: add Header component

---
 src/components/Header.tsx | 67 ++++++++++++++++++++++++---------------
 1 file changed, 41 insertions(+), 26 deletions(-)

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 3c24513..39053ad 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,7 +1,21 @@
-import { ChevronLeft } from "lucide-react-native";
-import React from "react";
-import { View, Text, TouchableOpacity, useColorScheme } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
+import { ChevronLeft } from 'lucide-react-native';
+import React from 'react';
+import { View, Text, TouchableOpacity } from 'react-native';
+
+import { useColors } from '../hooks/useColors';
+
+/**
+  Componente Header para telas com título e botão de voltar opcional.
+  @param title Título da página onde se encontra o header
+  @param showBackButton Booleano para mostrar ou esconder o botão de voltar
+  @param handleBack Função a ser chamada ao pressionar o botão de voltar
+
+  @example
+  <Header 
+    title="Página Inicial"
+    showBackButton={true}
+    handleBack={() => router.replace('(tabs)')}
+ */
 
 interface HeaderProps {
   title: string;
@@ -9,30 +23,31 @@ interface HeaderProps {
   handleBack?: () => void;
 }
 
-export default function Header({ title, showBackButton, handleBack }: HeaderProps) {
-  const colorScheme = useColorScheme();
-
-  const arrowColor = colorScheme === "dark" ? "#FF9F3A" : "#F28D22";
+export default function Header({
+  title,
+  showBackButton,
+  handleBack,
+}: HeaderProps) {
+  const colorScheme = useColors();
 
   return (
-    <SafeAreaView edges={["top"]} className="bg-background-0">
-      <View className="w-full flex-row items-center justify-between px-4 py-3 shadow-sm">
-        <View className="w-1/4">
-          {showBackButton && (
-            <TouchableOpacity onPress={handleBack} activeOpacity={0.7}>
-              <ChevronLeft size={24} color={arrowColor} />
-            </TouchableOpacity>
-          )}
-        </View>
-
-        <View className="w-2/4 items-center">
-          <Text className="text-xl font-ifood-bold text-typography-900 dark:text-typography-white">
-            {title}
-          </Text>
-        </View>
-
-        <View className="w-1/4" />
+    <View className="w-full flex-row justify-center items-denter px-4">
+      <View className="w-8 items-start justify-center">
+        {showBackButton && (
+          <TouchableOpacity onPress={handleBack} activeOpacity={0.7}>
+            <ChevronLeft size={24} color={colorScheme.primaryOrange} />
+          </TouchableOpacity>
+        )}
       </View>
-    </SafeAreaView>
+
+      <View className="flex-1 items-center justify-center">
+        <Text className="text-lg font-ifood-bold text-text-light dark:text-text-dark">
+          {title.toUpperCase()}
+        </Text>
+      </View>
+
+      {/** Spacing to alignment */}
+      <View className="w-8" />
+    </View>
   );
 }