add header and background design

apps/expo/src/components/layout/ScreenLayout.tsx

@@ -1,24 +1,34 @@
-import { Text, View } from "tamagui";
+import { View } from "tamagui";
+import { LinearGradient } from "tamagui/linear-gradient";
+
+import { Header } from "./Header";
 
 interface Props {
-  title?: React.ReactNode | string;
-  subtitle?: string;
   children?: React.ReactNode;
 }
 
-export default function ScreenLayout({ title, subtitle, children }: Props) {
+export default function ScreenLayout({ children }: Props) {
   return (
-    <View flex={1} padding={44} backgroundColor="$screenBackground">
-      {typeof title === "string" && (
-        <Text fontWeight="bold" fontSize={24}>
-          {title}
-        </Text>
-      )}
-      {typeof title !== "string" && title}
-      <Text fontSize={16} fontWeight="bold" marginTop={1}>
-        {subtitle}
-      </Text>
-      <View paddingVertical={12}>{children}</View>
-    </View>
+    <LinearGradient
+      flex={1}
+      paddingVertical="$4"
+      paddingHorizontal="$7"
+      colors={[
+        "$shade900",
+        "$purple900",
+        "$purple800",
+        "$shade700",
+        "$shade900",
+      ]}
+      locations={[0.02, 0.15, 0.2, 0.4, 0.8]}
+      start={[0, 0]}
+      end={[1, 1]}
+      flexGrow={1}
+    >
+      <Header />
+      <View paddingVertical="$4" flexGrow={1}>
+        {children}
+      </View>
+    </LinearGradient>
   );
 }