[feat] added toggle styling and functionality

calblueprint · Apr 25, 2024 · efd5d9e · efd5d9e
1 parent 2df4b55
commit efd5d9e
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 16 deletions.
diff --git a/src/Components/ToggleOptionsButton/ToggleOptionsButton.tsx b/src/Components/ToggleOptionsButton/ToggleOptionsButton.tsx
@@ -1,14 +1,29 @@
-import { Link } from 'expo-router';
-import React, { useState, ChangeEvent } from 'react';
-import { Text, TouchableOpacity, View } from 'react-native';
+import React, { useState } from 'react';
+import { View, TouchableOpacity, Text } from 'react-native';
 
 import styles from './styles';
 
 function ToggleOptionsButton() {
+  const [isChecked, setIsChecked] = useState(false);
+
+  const handleToggle = () => {
+    setIsChecked(prevState => !prevState);
+  };
+
   return (
-    <View style={styles.toggleButtonContainer}>
-      <View style={styles.toggleItem} />
-    </View>
+    <TouchableOpacity
+      activeOpacity={1}
+      style={[
+        styles.toggleButtonContainer,
+        isChecked && styles.toggleSwitchCheckedButtonContainer,
+      ]}
+      onPress={handleToggle}
+    >
+      <View
+        style={[styles.toggleItem, isChecked && styles.toggleSwitchCheckedItem]}
+      />
+      {isChecked}
+    </TouchableOpacity>
   );
 }
 

diff --git a/src/Components/ToggleOptionsButton/styles.ts b/src/Components/ToggleOptionsButton/styles.ts
@@ -6,24 +6,41 @@ export default StyleSheet.create({
   toggleButtonContainer: {
     width: '100%',
     height: 43,
-    backgroundColor: colors.midGrey,
+    backgroundColor: colors.lightGrey,
     borderRadius: 20,
     justifyContent: 'center',
     alignItems: 'flex-start',
-    padding: 2,
+    flexDirection: 'column',
+    position: 'relative',
+    overflow: 'hidden',
   },
   toggleItem: {
-    width: ' 50%',
+    position: 'absolute',
+    marginLeft: 4,
+    marginRight: 4,
+    width: '50%',
     height: 35,
+    backgroundColor: colors.white,
+
+    borderColor: colors.white,
+    borderWidth: 1,
+    borderStyle: 'solid',
     borderRadius: 20,
-    backgroundColor: 'white',
+
+    shadowColor: colors.midGrey,
+    shadowOffset: { width: 0.05, height: 0.75 },
+    shadowOpacity: 1,
+    shadowRadius: 0.75,
+    elevation: 1,
+  },
+  toggleSwitchCheckedButtonContainer: {
+    backgroundColor: colors.lightGrey,
   },
-  arrow: {
-    marginLeft: 120,
-    marginTop: 5,
+  toggleSwitchCheckedItem: {
+    right: 0,
   },
-  arrowWhite: {
-    marginLeft: 132,
-    marginTop: 5,
+  blackText: {
+    color: colors.black,
+    fontWeight: '400',
   },
 });