feat/temporary-friends-tab (#147)

* feat: added Friend header

* refactor: rename friends

* chore: using constant

expo/app/(tabs)/_layout.tsx

@@ -8,6 +8,7 @@ import { ActivityIndicator } from "react-native";
 
 import { Text } from "../../components/Tamed";
 import { View } from "../../components/Themed";
+import FriendHeader from "../../components/headers/FriendHeader";
 import Colors from "../../constants/Colors";
 import { useSupabaseUserHook } from "../../lib/useSupabaseUser";
 
@@ -113,10 +114,11 @@ export default function TabLayout() {
         }}
       />
       <Tabs.Screen
-        name="Friends"
+        name="friends"
         options={{
           title: "Amis",
           tabBarLabel: (props) => <TabBarLabel {...props} />,
+          header: () => <FriendHeader />,
           tabBarIcon: ({ color, focused }) => (
             <Users
               color={color}

expo/app/(tabs)/friends.tsx

@@ -0,0 +1,31 @@
+import Hammer from "phosphor-react-native/src/icons/Hammer";
+import React from "react";
+import { View } from "react-native";
+
+import { Text } from "../../components/Themed";
+
+export default function TabsFriends() {
+  return (
+    <View
+      style={{
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+        flexDirection: "column",
+        padding: 32,
+        gap: 16,
+      }}
+    >
+      <Hammer size={32} weight="fill" color="black" />
+      <Text
+        style={{
+          fontSize: 16,
+          textAlign: "center",
+          fontFamily: "Outfit-Bold",
+        }}
+      >
+        Cette page est en cours de développement. Merci de revenir plus tard.
+      </Text>
+    </View>
+  );
+}

expo/components/headers/FriendHeader.tsx

@@ -0,0 +1,54 @@
+import { Text, View } from "react-native";
+
+import Font from "../../constants/Font";
+import H1 from "../text/H1";
+
+export default function FriendHeader() {
+  return (
+    <View
+      style={{
+        flexDirection: "column",
+        backgroundColor: "#E6E6E6",
+        flex: 1,
+        paddingVertical: 18,
+        rowGap: 12,
+        paddingHorizontal: 38,
+      }}
+    >
+      <View
+        style={{
+          flexDirection: "row",
+          justifyContent: "space-between",
+          alignItems: "center",
+          alignContent: "center",
+        }}
+      >
+        <H1>Amis</H1>
+      </View>
+      <View
+        style={{
+          flexDirection: "row",
+          alignItems: "center",
+          gap: 12,
+        }}
+      >
+        <View
+          style={{
+            height: 8,
+            width: 8,
+            backgroundColor: "red",
+            borderRadius: 5,
+          }}
+        />
+        <Text
+          style={{
+            fontFamily: Font.Unbounded.Regular,
+            fontSize: 14,
+          }}
+        >
+          0 amis en ligne
+        </Text>
+      </View>
+    </View>
+  );
+}