refactor: separate components, remove unused comps

Author: enesozturk

dapps/Web3InboxLab/src/components/NotificationItemSkeleton.tsx

@@ -0,0 +1,57 @@
+import {StyleSheet, View} from 'react-native';
+import useColors from '@/hooks/useColors';
+
+export default function NotificationItemSkeleton() {
+  const colors = useColors();
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          borderColor: colors.border,
+        },
+      ]}>
+      <View
+        style={[
+          styles.title,
+          {
+            backgroundColor: colors.background,
+          },
+        ]}
+      />
+      <View
+        style={[
+          styles.description,
+          {
+            backgroundColor: colors.background,
+          },
+        ]}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+    gap: 8,
+    padding: 12,
+    borderBottomWidth: 1,
+  },
+  title: {
+    width: '50%',
+    height: 16,
+    borderRadius: 4,
+  },
+  description: {
+    width: '70%',
+    height: 12,
+
+    borderRadius: 4,
+  },
+});

dapps/Web3InboxLab/src/components/NotificationItemWithSubscription.tsx

@@ -1,44 +1,60 @@
-import {View} from 'react-native';
+import {StyleSheet, View} from 'react-native';
 import useColors from '@/hooks/useColors';
 
-export default function SubscriptionItemSkeleton({style}) {
+export default function SubscriptionItemSkeleton() {
   const colors = useColors();
 
   return (
     <View
       style={[
+        styles.container,
         {
-          width: '100%',
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'flex-start',
-          justifyContent: 'center',
-          opacity: 0.8,
-          gap: 8,
-          padding: 12,
-          borderRadius: 12,
-          borderWidth: 0.5,
           borderColor: colors.border,
           backgroundColor: colors.background,
         },
-        style,
       ]}>
       <View
-        style={{
-          width: '50%',
-          height: 16,
-          backgroundColor: colors.backgroundSecondary,
-          borderRadius: 4,
-        }}
+        style={[
+          styles.title,
+          {
+            backgroundColor: colors.backgroundSecondary,
+          },
+        ]}
       />
       <View
-        style={{
-          width: '70%',
-          height: 12,
-          backgroundColor: colors.backgroundSecondary,
-          borderRadius: 4,
-        }}
+        style={[
+          styles.description,
+          {
+            backgroundColor: colors.backgroundSecondary,
+          },
+        ]}
       />
     </View>
   );
 }
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+    opacity: 0.8,
+    gap: 8,
+    padding: 12,
+    borderRadius: 12,
+    borderWidth: 0.5,
+  },
+  title: {
+    width: '50%',
+    height: 16,
+    borderRadius: 4,
+  },
+  description: {
+    width: '70%',
+    height: 12,
+
+    borderRadius: 4,
+  },
+});