ButtonPhoto component add (#75)

katsuhira02 · Danil · web-flow · commit 00dc120274e9 · 2022-06-03T10:48:31.000-05:00
Co-authored-by: Danil &lt;rosesmaster2007@gmail.com&gt;
diff --git a/src/components/ButtonPhoto/index.tsx b/src/components/ButtonPhoto/index.tsx
@@ -0,0 +1,37 @@
+import React from 'react'
+import { StyleSheet, Pressable } from 'react-native'
+import Ionicons from 'react-native-vector-icons/Ionicons'
+import { PRIMARY, WHITE } from '../../constants'
+
+const styles = StyleSheet.create({
+  container: {
+    height: 52,
+    width: 52,
+    backgroundColor: PRIMARY,
+    borderRadius: 100
+  },
+  iconStyle: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+})
+
+function ButtonPhoto() {
+  const { container, iconStyle } = styles
+
+  return (
+    <Pressable
+      style={({ pressed }) => [
+        {
+          opacity: pressed ? 0.9 : 1
+        },
+        container,
+        iconStyle
+      ]}
+    >
+      <Ionicons name="camera" size={30} color={WHITE} />
+    </Pressable>
+  )
+}
+
+export { ButtonPhoto }
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -2,4 +2,5 @@ export * from './Button'
 export * from './Space'
 export * from './Text'
 export * from './Switch'
-export * from './Labels'
+export * from './Labels'
+export * from './ButtonPhoto'
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { StyleSheet, View } from 'react-native'
 import { DARK, WHITE } from './constants'
-import { Space, Labels, Text } from './components'
+import { Space, Text, ButtonPhoto } from './components'
 
 const styles = StyleSheet.create({
   container: {
@@ -24,11 +24,9 @@ export default function App({}) {
 
   return (
     <View style={container}>
-      <Text title="Labels" h0 />
+      <Text title="ButtonPhoto" h0 />
       <Space height={15} />
-      <Labels isSaleOrNew={true} title={'90%'} />
-      <Space height={15} />
-      <Labels isSaleOrNew={false} title={'90%'} />
+      <ButtonPhoto />
     </View>
   )
 }
