refactor: create component to rooms header

expo/app/(tabs)/rooms/_layout.tsx

@@ -1,9 +1,11 @@
 import { Stack } from "expo-router";
 
+import RoomsHeader from "../../../components/headers/RoomsHeader";
+
 export default function RoomsTabLayout() {
   return (
     <Stack>
-      <Stack.Screen name="index" options={{ title: "Salle" }} />
+      <Stack.Screen name="index" options={{ header: () => <RoomsHeader /> }} />
       <Stack.Screen name="join" options={{ title: "Rejoindre une salle" }} />
       <Stack.Screen
         name="create"

expo/app/(tabs)/rooms/index.tsx

@@ -1,22 +1,11 @@
 import React from "react";
-import { ScrollView, StyleSheet, Text, View } from "react-native";
+import { ScrollView, StyleSheet } from "react-native";
 
-import Button from "../../../components/Button";
 import UserRoomHistory from "../../../components/UserRoomHistory";
-import H1 from "../../../components/text/H1";
 
 export default function RoomsPage() {
   return (
     <ScrollView contentContainerStyle={styles.headerContainer}>
-      <H1>Salles d'écoute</H1>
-      <View style={styles.buttonContainer}>
-        <Button block href="/rooms/create">
-          Créer une salle
-        </Button>
-        <Button block type="outline" href="/rooms/join">
-          Rejoindre une salle
-        </Button>
-      </View>
       <UserRoomHistory />
     </ScrollView>
   );
@@ -29,7 +18,4 @@ const styles = StyleSheet.create({
     marginVertical: 21,
     gap: 36,
   },
-  buttonContainer: {
-    gap: 8,
-  },
 });

expo/components/headers/RoomsHeader.tsx

@@ -0,0 +1,33 @@
+import { StyleSheet, View } from "react-native";
+
+import Button from "../Button";
+import H1 from "../text/H1";
+
+export default function RoomsHeader() {
+  return (
+    <View style={styles.headerContainer}>
+      <H1>Salles d'écoute</H1>
+      <View style={styles.buttonContainer}>
+        <Button block href="/rooms/create">
+          Créer une salle
+        </Button>
+        <Button block type="outline" href="/rooms/join">
+          Rejoindre une salle
+        </Button>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  headerContainer: {
+    flex: 1,
+    paddingHorizontal: 24,
+    paddingVertical: 21,
+    gap: 36,
+    backgroundColor: "#E6E6E6",
+  },
+  buttonContainer: {
+    gap: 8,
+  },
+});