improve hex keyboard

Author: kamalkishor1991

components/HexKeyboard.js

@@ -7,8 +7,8 @@ const HexKeyboard = ({ onKeyPress }) => {
     ['4', '5', '6', '7'],
     ['8', '9', 'A', 'B'],
     ['C', 'D', 'E', 'F'],
-    ['del', 'clear', 'copy', 'paste']
   ];
+  const specialKeys = ['del', 'clear', 'copy', 'paste'];
 
   return (
     <View style={styles.keyboard}>
@@ -21,19 +21,33 @@ const HexKeyboard = ({ onKeyPress }) => {
           ))}
         </View>
       ))}
+      <View style={styles.specialRow}>
+        {specialKeys.map((key) => (
+          <TouchableOpacity key={key} style={[styles.key, styles.specialKey]} onPress={() => onKeyPress(key)}>
+            <Text style={styles.specialKeyText}>{key}</Text>
+          </TouchableOpacity>
+        ))}
+      </View>
     </View>
   );
 };
 
 const styles = StyleSheet.create({
   keyboard: {
-    paddingHorizontal: 16,
-    paddingVertical: 8
+    paddingHorizontal: 8,
+    paddingVertical: 8,
+    width: '100%',
+    alignSelf: 'center',
   },
   row: {
     flexDirection: 'row',
     justifyContent: 'space-between',
-    marginBottom: 8
+    marginBottom: 8,
+  },
+  specialRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 0,
   },
   key: {
     flex: 1,
@@ -44,12 +58,23 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderColor: 'gray',
     borderRadius: 8,
-    marginHorizontal: 4
+    marginHorizontal: 2,
+    minWidth: 0,
   },
   keyText: {
     fontSize: 24,
-    fontWeight: 'bold'
-  }
+    fontWeight: 'bold',
+  },
+  specialKey: {
+    backgroundColor: '#f0f0f0',
+    borderColor: '#888',
+    height: 40,
+  },
+  specialKeyText: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#333',
+  },
 });
 
 export default HexKeyboard;