first setup

apps/mobile/components/item/item.tsx

@@ -1,30 +1,25 @@
-import { globalStyles } from '../../styles/global';
-import { Image, Text, View } from 'react-native';
-import styles from './styles';
-import { BoldText, RegularText } from '../Styled';
+import { Image, View } from 'react-native';
+
 import { TMDB_POSTER_PATH } from '../../constants/General';
+import { BoldText, RegularText } from '../ui/Text';
 
 export default function Item() {
   return (
-    <View style={styles.wrapper}>
-      <View style={styles.imageWrapper}>
+    <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,
           }}
-          style={styles.image}
+          className="h-full w-full object-cover"
         />
       </View>
-      <BoldText style={globalStyles.textWhite}>Hamilton</BoldText>
-      <View style={styles.meta}>
-        <RegularText style={[globalStyles.textMuted, styles.smallText]}>
-          Movie
-        </RegularText>
-        <View style={[globalStyles.dotSeperator]}></View>
-        <RegularText style={[globalStyles.textMuted, styles.smallText]}>
-          2023
-        </RegularText>
+      <BoldText className="text-white">Hamilton</BoldText>
+      <View className="flex-row items-center gap-3">
+        <RegularText className="text-xs text-gray-600">Movie</RegularText>
+        <View className="h-1 w-1 rounded-3xl bg-gray-600" />
+        <RegularText className="text-sm text-gray-600">2023</RegularText>
       </View>
     </View>
   );

apps/mobile/components/item/styles.tsx

@@ -1,31 +0,0 @@
-import Colors from '../../constants/Colors';
-import { StyleSheet } from 'react-native';
-
-const styles = StyleSheet.create({
-  wrapper: {
-    width: '100%',
-  },
-  imageWrapper: {
-    borderRadius: 16,
-    aspectRatio: 9 / 14,
-    width: '100%',
-    overflow: 'hidden',
-    position: 'relative',
-    marginBottom: 6,
-  },
-  image: {
-    width: '100%',
-    height: '100%',
-    resizeMode: 'cover',
-  },
-  meta: {
-    flexDirection: 'row',
-    gap: 6,
-    alignItems: 'center',
-  },
-  smallText: {
-    fontSize: 12,
-  },
-});
-
-export default styles;