refactor to tamagui

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

@@ -1,10 +1,10 @@
 import type { NativeSyntheticEvent } from "react-native";
 import type { ContextMenuOnPressNativeEvent } from "react-native-context-menu-view";
-import { Image, Keyboard, TouchableOpacity, View } from "react-native";
+import { Keyboard, TouchableOpacity } from "react-native";
 import ContextMenu from "react-native-context-menu-view";
 import { useRouter } from "expo-router";
+import { Image, Text, View } from "tamagui";
 
-import { Text } from "~/components/ui/Text";
 import { usePlayerStore } from "~/stores/player/store";
 
 export interface ItemData {
@@ -47,19 +47,29 @@ export default function Item({ data }: { data: ItemData }) {
       onLongPress={() => {}}
       style={{ width: "100%" }}
     >
-      <View className="w-full">
+      <View width="100%">
         <ContextMenu actions={contextMenuActions} onPress={onContextMenuPress}>
-          <View className="mb-2 aspect-[9/14] w-full overflow-hidden rounded-2xl">
-            <Image source={{ uri: posterUrl }} className="h-full w-full" />
+          <View
+            marginBottom={4}
+            aspectRatio={9 / 14}
+            width="100%"
+            overflow="hidden"
+            borderRadius={24}
+          >
+            <Image source={{ uri: posterUrl }} width="100%" height="100%" />
           </View>
         </ContextMenu>
-        <Text className="font-bold">{title}</Text>
-        <View className="flex-row items-center gap-3">
-          <Text className="text-xs text-gray-600">
+        <Text fontWeight="bold" fontSize={14}>
+          {title}
+        </Text>
+        <View flexDirection="row" alignItems="center" gap={3}>
+          <Text fontSize={12} color="gray">
             {type === "tv" ? "Show" : "Movie"}
           </Text>
-          <View className="h-1 w-1 rounded-3xl bg-gray-600" />
-          <Text className="text-sm text-gray-600">{year}</Text>
+          <View height={1} width={1} borderRadius={24} backgroundColor="gray" />
+          <Text fontSize={12} color="gray">
+            {year}
+          </Text>
         </View>
       </View>
     </TouchableOpacity>