refactor to turbo

apps/expo/src/app/(tabs)/_layout.tsx

@@ -0,0 +1,86 @@
+import { Tabs } from "expo-router";
+
+import Colors from "@movie-web/tailwind-config/colors";
+
+import TabBarIcon from "~/components/TabBarIcon";
+
+export default function TabLayout() {
+  return (
+    <Tabs
+      sceneContainerStyle={{
+        backgroundColor: Colors.background,
+      }}
+      screenOptions={{
+        headerShown: false,
+        tabBarActiveTintColor: Colors.primary[100],
+        tabBarStyle: {
+          backgroundColor: Colors.secondary[700],
+          borderTopColor: "transparent",
+          borderTopRightRadius: 20,
+          borderTopLeftRadius: 20,
+          height: 80,
+        },
+        tabBarItemStyle: {
+          paddingVertical: 18,
+          height: 82,
+        },
+        tabBarLabelStyle: [
+          {
+            marginTop: 2,
+          },
+        ],
+      }}
+    >
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: "Home",
+          tabBarIcon: ({ focused }) => (
+            <TabBarIcon name="home" focused={focused} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="about"
+        options={{
+          title: "About",
+          tabBarIcon: ({ focused }) => (
+            <TabBarIcon name="info-circle" focused={focused} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="search"
+        options={{
+          title: "Search",
+          tabBarLabel: "",
+          tabBarIcon: () => (
+            <TabBarIcon
+              className=" bg-primary-400 flex aspect-[1/1] h-14 items-center justify-center rounded-full text-center text-2xl text-white"
+              name="search"
+              color="#FFF"
+            />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="settings"
+        options={{
+          title: "Settings",
+          tabBarIcon: ({ focused }) => (
+            <TabBarIcon name="cog" focused={focused} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="account"
+        options={{
+          title: "Account",
+          tabBarIcon: ({ focused }) => (
+            <TabBarIcon name="user" focused={focused} />
+          ),
+        }}
+      />
+    </Tabs>
+  );
+}

apps/expo/src/app/(tabs)/about.tsx

@@ -0,0 +1,16 @@
+import ScreenLayout from "~/components/layout/ScreenLayout";
+import { Text } from "~/components/ui/Text";
+
+export default function AboutScreen() {
+  return (
+    <ScreenLayout
+      title="About"
+      subtitle="What is movie-web and how content is served?"
+    >
+      <Text>
+        No content is served from movie-web directly and movie web does not host
+        anything.
+      </Text>
+    </ScreenLayout>
+  );
+}

apps/expo/src/app/(tabs)/account.tsx

@@ -0,0 +1,13 @@
+import ScreenLayout from "~/components/layout/ScreenLayout";
+import { Text } from "~/components/ui/Text";
+
+export default function AccountScreen() {
+  return (
+    <ScreenLayout
+      title="Account"
+      subtitle="Manage your movie web account from here"
+    >
+      <Text>Hey Bro! what are you up to?</Text>
+    </ScreenLayout>
+  );
+}

apps/expo/src/app/(tabs)/index.tsx

@@ -0,0 +1,10 @@
+import ScreenLayout from "~/components/layout/ScreenLayout";
+import { Text } from "~/components/ui/Text";
+
+export default function HomeScreen() {
+  return (
+    <ScreenLayout title="Home" subtitle="This is where all magic happens">
+      <Text>Movies will be listed here</Text>
+    </ScreenLayout>
+  );
+}

apps/expo/src/app/(tabs)/search/Searchbar.tsx

@@ -0,0 +1,41 @@
+import { useCallback, useRef, useState } from "react";
+import { View } from "react-native";
+import { TextInput } from "react-native-gesture-handler";
+import { useFocusEffect } from "expo-router";
+import { FontAwesome5 } from "@expo/vector-icons";
+
+import Colors from "@movie-web/tailwind-config/colors";
+
+export default function Searchbar() {
+  const [keyword, setKeyword] = useState("");
+  const inputRef = useRef<TextInput>(null);
+
+  useFocusEffect(
+    useCallback(() => {
+      // When the screen is focused
+      const focus = () => {
+        setTimeout(() => {
+          inputRef?.current?.focus();
+        }, 20);
+      };
+      focus();
+      return focus; // cleanup
+    }, []),
+  );
+
+  return (
+    <View className="border-primary-400 focus-within:border-primary-300 mb-6 mt-4 flex-row items-center rounded-full border">
+      <View className="ml-1 w-12 items-center justify-center">
+        <FontAwesome5 name="search" size={18} color={Colors.secondary[200]} />
+      </View>
+      <TextInput
+        value={keyword}
+        onChangeText={(text) => setKeyword(text)}
+        ref={inputRef}
+        placeholder="What are you looking for?"
+        placeholderTextColor={Colors.secondary[200]}
+        className="w-full rounded-3xl py-3 pr-5 text-white focus-visible:outline-none"
+      />
+    </View>
+  );
+}

apps/expo/src/app/(tabs)/search/_layout.tsx

@@ -0,0 +1,34 @@
+import { ScrollView, View } from "react-native";
+
+import Item from "~/components/item/item";
+import ScreenLayout from "~/components/layout/ScreenLayout";
+import { Text } from "~/components/ui/Text";
+import Searchbar from "./Searchbar";
+
+export default function SearchScreen() {
+  return (
+    <ScrollView>
+      <ScreenLayout
+        title={
+          <View className="flex-row items-center">
+            <Text className="text-2xl font-bold">Search</Text>
+          </View>
+        }
+        subtitle="Looking for something?"
+      >
+        <Searchbar />
+        <View className="flex w-full flex-1 flex-row flex-wrap justify-start">
+          <View className="basis-1/2 px-3 pb-3">
+            <Item />
+          </View>
+          <View className="basis-1/2 px-3 pb-3">
+            <Item />
+          </View>
+          <View className="basis-1/2 px-3 pb-3">
+            <Item />
+          </View>
+        </View>
+      </ScreenLayout>
+    </ScrollView>
+  );
+}

apps/expo/src/app/(tabs)/settings.tsx

@@ -0,0 +1,10 @@
+import ScreenLayout from "~/components/layout/ScreenLayout";
+import { Text } from "~/components/ui/Text";
+
+export default function SettingsScreen() {
+  return (
+    <ScreenLayout title="Settings" subtitle="Need to change something?">
+      <Text>Settings would be listed in here. Coming soon</Text>
+    </ScreenLayout>
+  );
+}