refactor to turbo

apps/expo/src/app/components/ExternalLink.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { Platform } from "react-native";
+import { Link } from "expo-router";
+import * as WebBrowser from "expo-web-browser";
+
+export function ExternalLink(
+  props: Omit<React.ComponentProps<typeof Link>, "href"> & { href: string },
+) {
+  return (
+    <Link
+      hrefAttrs={{
+        // On web, launch the link in a new tab.
+        target: "_blank",
+      }}
+      {...props}
+      // @ts-expect-error href is not a valid prop for Link, but we're using it here to pass the URL to the web browser.
+      href={props.href}
+      onPress={(e) => {
+        if (Platform.OS !== "web") {
+          // Prevent the default behavior of linking to the default browser on native.
+          e.preventDefault();
+          // Open the link in an in-app browser.
+          WebBrowser.openBrowserAsync(props.href).catch((error) => {
+            console.error("Failed to open browser", error);
+          });
+        }
+      }}
+    />
+  );
+}

apps/expo/src/app/components/TabBarIcon.tsx

@@ -0,0 +1,17 @@
+import { FontAwesome } from "@expo/vector-icons";
+
+import Colors from "@movie-web/tailwind-config/colors";
+
+type Props = {
+  focused?: boolean;
+} & React.ComponentProps<typeof FontAwesome>;
+
+export default function TabBarIcon({ focused, ...rest }: Props) {
+  return (
+    <FontAwesome
+      color={focused ? Colors.primary[300] : Colors.secondary[300]}
+      size={24}
+      {...rest}
+    />
+  );
+}

apps/expo/src/app/components/item/item.tsx

@@ -0,0 +1,26 @@
+import { Image, View } from "react-native";
+
+import { TMDB_POSTER_PATH } from "~/app/constants/General";
+import { Text } from "~/components/ui/Text";
+
+export default function Item() {
+  return (
+    <View className="w-full">
+      <View className="mb-2 aspect-[9/14] w-full overflow-hidden rounded-2xl">
+        <Image
+          source={{
+            uri: `${TMDB_POSTER_PATH}/w342//gdIrmf2DdY5mgN6ycVP0XlzKzbE.jpg`,
+            width: 200,
+          }}
+          className="h-full w-full object-cover"
+        />
+      </View>
+      <Text className="font-bold">Hamilton</Text>
+      <View className="flex-row items-center gap-3">
+        <Text className="text-xs text-gray-600">Movie</Text>
+        <View className="h-1 w-1 rounded-3xl bg-gray-600" />
+        <Text className="text-sm text-gray-600">2023</Text>
+      </View>
+    </View>
+  );
+}

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

@@ -0,0 +1,22 @@
+import { View } from "react-native";
+
+import { Text } from "~/components/ui/Text";
+
+interface Props {
+  title?: React.ReactNode | string;
+  subtitle?: string;
+  children?: React.ReactNode;
+}
+
+export default function ScreenLayout({ title, subtitle, children }: Props) {
+  return (
+    <View className="bg-shade-900 flex-1 p-12">
+      {typeof title === "string" && (
+        <Text className="text-2xl font-bold">{title}</Text>
+      )}
+      {typeof title !== "string" && title}
+      <Text className="mt-1 text-sm font-bold">{subtitle}</Text>
+      <View className="py-3">{children}</View>
+    </View>
+  );
+}

apps/expo/src/app/components/ui/Text.tsx

@@ -0,0 +1,18 @@
+import type { TextProps } from "react-native";
+import { Text as RNText } from "react-native";
+import { cva } from "class-variance-authority";
+
+import { cn } from "~/app/lib/utils";
+
+const textVariants = cva("text-white");
+
+export function Text({ className, ...props }: TextProps) {
+  return (
+    <RNText
+      className={cn(className, textVariants(), {
+        "font-sans": !className?.includes("font-"),
+      })}
+      {...props}
+    />
+  );
+}