add labels component (#64)

katsuhira02 · Danil · web-flow · commit bfabb1a1eaf2 · 2022-04-09T14:17:36.000-05:00
Co-authored-by: Danil &lt;rosesmaster2007@gmail.com&gt;
diff --git a/App.tsx b/App.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import { Text } from 'react-native'
 import { StyleSheet, ScrollView, View } from 'react-native'
 import { DARK, WHITE } from './src/constants'
-import { Button, Space, Switch } from './src/components'
+import { Button, Space, Switch, Labels } from './src/components'
 
 const styles = StyleSheet.create({
   container: {
@@ -38,6 +38,14 @@ export default function App({}){
       <Space height={15} />
       <Switch isValue={isEnabled} onValueChange={toggleSwitch}/>
       <Space height={30} />
+      <Text style={textStyle}>Labels</Text>
+      <Space height={15} />
+      <Labels isSaleOrNew={true} title='-20%'/>
+      <Space height={15} />
+      <Labels isSaleOrNew={false} title='NEW'/>
+      <Space height={15} />
+      <Labels isSaleOrNew={true} title='HOT'/>
+      <Space height={30} />
     </View>
   )
 }
diff --git a/src/components/Labels/index.tsx b/src/components/Labels/index.tsx
@@ -0,0 +1,41 @@
+import React from 'react'
+import { BLACK, SALE, WHITE } from '../../constants'
+import {StyleSheet, Text, View} from 'react-native'
+
+const styles = StyleSheet.create({
+    container: {
+        width: 40,
+        height: 24,
+        borderRadius: 29
+    },
+    colorDark: {
+        backgroundColor: BLACK
+    },
+    color: {
+        backgroundColor: SALE    
+    },
+    textStyle: {
+        alignItems: 'center',
+        alignSelf: 'center',
+        color: WHITE,
+        fontSize: 15
+      }
+})
+
+interface LabelsT {
+    isSaleOrNew: boolean,
+    title: string
+}
+
+function Labels ({isSaleOrNew, title}: LabelsT){
+    const { container, colorDark, color, textStyle } = styles
+    const saleOrNew = isSaleOrNew ? color : colorDark
+
+    return (
+        <View style={[saleOrNew, container]}>
+            <Text style={textStyle}>{title}</Text>
+            </View>
+    )
+}
+
+export { Labels }
diff --git a/src/components/Switch/index.tsx b/src/components/Switch/index.tsx
@@ -3,6 +3,13 @@ import React, {useState} from 'react'
 import { View, Switch as Swi, StyleSheet } from "react-native"
 import { SUCCESS, GRAY, GRAY_OPACITY } from '../../constants'
 
+const styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+    justifyContent: "center"
+  }
+})
+
 interface SwitchT {
     isValue: boolean,
     isDisable?: boolean,
@@ -23,12 +30,5 @@ function Switch ({isValue, isDisable, onValueChange }: SwitchT){
       </View>
     )
   }
-  
-  const styles = StyleSheet.create({
-    container: {
-      alignItems: "center",
-      justifyContent: "center"
-    }
-  })
 
   export { Switch }
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -1,3 +1,4 @@
 export * from './Button'
 export * from './Space'
-export * from './Switch'
+export * from './Switch'
+export * from './Labels'
