[feat] Name Card Component Closes #45

packages/react-silk-docs/src/components/Anchors.tsx

@@ -33,5 +33,8 @@ export default () => (
     <NavItem>
       <Link to="/components/input_pins">Input Pins</Link>
     </NavItem>
+    <NavItem>
+      <Link to="/components/namecard">Name Card</Link>
+    </NavItem>
   </NavItems>
 )

packages/react-silk-docs/src/demo/NameCardDemo.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react'
+import { NameCard } from 'react-silk-ui'
+import styled from 'styled-components'
+
+const NameCardWrapper = styled.div`
+  display: flex;
+  > div > div {
+    margin-bottom: 0.5rem;
+  }
+`
+
+export default () => (
+  <div>
+    <NameCardWrapper>
+      <div>
+        <NameCard
+          image="https://vnn-imgs-f.vgcloud.vn/2018/04/12/17/bill-gates-la-nguoi-dan-ong-duoc-nguong-mo-nhat-the-gioi.jpg"
+          title="Bill Gate"
+          subTitle="[email protected]"
+        />
+        <NameCard
+          image="https://media.laodong.vn/storage/newsportal/2018/9/28/633320/CEO-Facebook.jpg"
+          title="Mark Zuckerberg"
+          subTitle="[email protected]"
+          rtl={true}
+        />
+      </div>
+    </NameCardWrapper>
+  </div>
+)

packages/react-silk-docs/src/pages/components/namecard.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react'
+import MyMom from '.'
+import NameCardDemo from '../../demo/NameCardDemo'
+
+export default () => (
+  <MyMom>
+    <NameCardDemo />
+  </MyMom>
+)

packages/react-silk-ui/src/components/NameCard.tsx

@@ -0,0 +1,89 @@
+import * as React from 'react'
+import { View, Image, StyleSheet, Dimensions } from 'react-native'
+import { Text } from './Text'
+import Colors from './Colors'
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingVertical: 30,
+    paddingHorizontal: 10,
+    backgroundColor: Colors.white,
+    flexDirection: 'row',
+    borderWidth: 1,
+    borderRadius: 2,
+    borderColor: Colors.smokeWhite,
+    borderBottomWidth: 0,
+    shadowColor: Colors.gray,
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.5,
+    shadowRadius: 2,
+    elevation: 1,
+  },
+  imageWrapper: {
+    flex: 3,
+  },
+  contentWrapper: {
+    flex: 7,
+  },
+  image: {
+    width: '100%',
+    height: '100%',
+  },
+  title: {
+    fontSize: 20,
+    color: Colors.dark,
+    fontWeight: '500',
+  },
+  subTitle: {
+    fontSize: 16,
+    color: Colors.gray,
+  },
+})
+
+export interface Props {
+  image?: string
+  title: string
+  subTitle?: string
+  rtl?: boolean
+}
+
+export const NameCard = ({ image, title, subTitle, rtl }: Props) => {
+  return (
+    <View style={{ flex: 1 }}>
+      {rtl ? (
+        <View style={styles.container}>
+          <View style={[styles.contentWrapper, { paddingRight: 10 }]}>
+            <Text style={styles.title}>{title}</Text>
+            <Text style={styles.subTitle}>{subTitle}</Text>
+          </View>
+          <View style={styles.imageWrapper}>
+            <Image
+              style={styles.image}
+              resizeMode="contain"
+              source={{ uri: image }}
+            />
+          </View>
+        </View>
+      ) : (
+        <View style={styles.container}>
+          <View style={styles.imageWrapper}>
+            <Image
+              style={styles.image}
+              resizeMode="contain"
+              source={{ uri: image }}
+            />
+          </View>
+          <View style={[styles.contentWrapper, { paddingLeft: 10 }]}>
+            <Text style={styles.title}>{title}</Text>
+            <Text style={styles.subTitle}>{subTitle}</Text>
+          </View>
+        </View>
+      )}
+    </View>
+  )
+}
+
+NameCard.defaultProps = {
+  rtl: false,
+}

packages/react-silk-ui/src/index.ts

@@ -18,6 +18,7 @@ import { DropdownItem } from './components/Dropdown/Item'
 import { Carousel } from './components/Carousel'
 import * as Colors from './components/Colors'
 import { InputPin } from './components/InputPin'
+import { NameCard } from './components/NameCard'
 
 export {
   Text,
@@ -39,6 +40,7 @@ export {
   DropdownItem,
   Carousel,
   InputPin,
+  NameCard,
 }
 
 export default {
@@ -61,4 +63,5 @@ export default {
   DropdownItem,
   Carousel,
   InputPin,
+  NameCard,
 }