From 5fcffd40746b2074d523f53dc82c824d147444e5 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Tue, 29 Jun 2021 16:29:06 -0400
Subject: Refactor buttons

---
 src/components/camera/FlashButton.tsx | 42 +++++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 src/components/camera/FlashButton.tsx

(limited to 'src/components/camera/FlashButton.tsx')

diff --git a/src/components/camera/FlashButton.tsx b/src/components/camera/FlashButton.tsx
new file mode 100644
index 00000000..06a4e44e
--- /dev/null
+++ b/src/components/camera/FlashButton.tsx
@@ -0,0 +1,42 @@
+import React, {Dispatch, SetStateAction} from 'react';
+import {Text, TouchableOpacity} from 'react-native';
+import {FlashMode} from 'react-native-camera';
+import FlashOffIcon from '../../assets/icons/camera/flash-off.svg';
+import FlashOnIcon from '../../assets/icons/camera/flash-on.svg';
+import {styles} from './styles';
+
+interface FlashButtonProps {
+  flashMode: keyof FlashMode;
+  setFlashMode: Dispatch<SetStateAction<keyof FlashMode>>;
+}
+
+/*
+ * Toggles between flash on/off modes
+ */
+export const FlashButton: React.FC<FlashButtonProps> = ({
+  flashMode,
+  setFlashMode,
+}) => (
+  <TouchableOpacity
+    onPress={() => setFlashMode(flashMode === 'on' ? 'off' : 'on')}
+    style={styles.flashButtonContainer}>
+    {flashMode === 'on' ? (
+      <FlashOnIcon
+        height={30}
+        width={20}
+        color={'white'}
+        style={styles.flashIcon}
+      />
+    ) : (
+      <FlashOffIcon
+        height={30}
+        width={20}
+        color={'white'}
+        style={styles.flashIcon}
+      />
+    )}
+    <Text style={styles.saveButtonLabel}>Flash</Text>
+  </TouchableOpacity>
+);
+
+export default FlashButton;
-- 
cgit v1.2.3-70-g09d2