diff options
Diffstat (limited to 'app_expo/components/local')
-rw-r--r-- | app_expo/components/local/local.story.tsx | 15 | ||||
-rw-r--r-- | app_expo/components/local/local.tsx | 36 |
2 files changed, 51 insertions, 0 deletions
diff --git a/app_expo/components/local/local.story.tsx b/app_expo/components/local/local.story.tsx new file mode 100644 index 0000000..2bfa065 --- /dev/null +++ b/app_expo/components/local/local.story.tsx @@ -0,0 +1,15 @@ +import * as React from 'react' +import { storiesOf } from '@storybook/react-native' +import { StoryScreen, Story, UseCase } from '../../../storybook/views' +import { color } from '../../theme' +import { Local } from './local' + +storiesOf('Local', module) + .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>) + .add('Style Presets', () => ( + <Story> + <UseCase text="Primary" usage="The primary."> + <Local style={{ backgroundColor: color.error }} /> + </UseCase> + </Story> + )) diff --git a/app_expo/components/local/local.tsx b/app_expo/components/local/local.tsx new file mode 100644 index 0000000..1478057 --- /dev/null +++ b/app_expo/components/local/local.tsx @@ -0,0 +1,36 @@ +import * as React from 'react' +import { StyleProp, TextStyle, TouchableOpacity, View, ViewStyle } from 'react-native' +import { observer } from 'mobx-react-lite' +import { color, typography } from '../../theme' +import { Text } from '../' +import { flatten } from 'ramda' +import Icon from 'react-native-vector-icons/MaterialCommunityIcons' + +const CONTAINER: ViewStyle = { + justifyContent: 'center', +} + +const TEXT: TextStyle = { + fontFamily: typography.primary, + fontSize: 14, + color: color.primary, +} + +export interface LocalProps { + /** + * An optional style override useful for padding & margin. + */ + style?: StyleProp<ViewStyle> +} + +/** + * Describe your component here + */ +export const LocalButton = observer(function LocalButton(props: LocalProps): boolean { + const { style } = props + const styles = flatten([CONTAINER, style]) + + return ( + <Icon color="#a99f1f" name="graph" style={{ position: 'absolute', zIndex: 100, width: 500 }} /> + ) +}) |