Week 2

.gitignore

@@ -9,6 +9,7 @@ npm-debug.*
 *.mobileprovision
 *.orig.*
 web-build/
+.idea
 
 # macOS
 .DS_Store

App.tsx

@@ -1,20 +1,26 @@
-import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
+
+import { View } from 'react-native';
+import React from 'react';
+import UserMessageList from './components/UserMessageList';
+import UserProfile from './components/UserProfile';
+import UserList from './components/UserList';
+import UserCall from './components/UserCall';
+import Gallery from './components/Gallery';
+import ProductCard from './components/ProductCard';
+import Resume from "./components/Resume";
+import AcceptedOrder from "./components/AcceptedOrder";
 
 export default function App() {
   return (
-    <View style={styles.container}>
-      <Text>Open up App.tsx to start working on your app!</Text>
-      <StatusBar style="auto" />
+    <View>
+      {/*<UserCall />*/}
+      {/*<UserList />*/}
+      {/*<UserMessageList />*/}
+      {/*<UserProfile />*/}
+      {/*<Gallery />*/}
+      {/*<ProductCard />*/}
+      {/*<Resume />*/}
+      <AcceptedOrder />
     </View>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});

components/AcceptedOrder/AcceptedOrder.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Image, Text, TouchableOpacity, View } from 'react-native';
+import { styles } from './styles';
+
+const like = require('../../assets/like.png');
+
+const AcceptedOrder = () => {
+  return (
+    <View style={styles.container}>
+      <Image style={styles.like} source={like} />
+      <Text style={styles.title}>Congratulation, your order is accepted</Text>
+      <Text style={styles.text}>Doctor Who is a British science-fiction television programme broadcast by the BBC since 1963. The programme depicts the adventures of a Time Lord called the Doctor, an extraterrestrial being who appears to be human.</Text>
+      <TouchableOpacity style={styles.addButton}>
+        <Text style={styles.buttonText}>
+          Continue
+        </Text>
+      </TouchableOpacity>
+    </View>
+  )
+};
+
+export default AcceptedOrder;

components/AcceptedOrder/index.ts

@@ -0,0 +1 @@
+export { default } from './AcceptedOrder';

components/AcceptedOrder/styles.ts

@@ -0,0 +1,38 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    height: '100%',
+    backgroundColor: '#e3e3e3',
+    paddingTop: 32,
+    paddingHorizontal: 16,
+    display: 'flex',
+    alignItems: 'center',
+  },
+  addButton: {
+    width: '60%',
+    padding: 12,
+    marginTop: 24,
+    display: 'flex',
+    alignItems: 'center',
+    backgroundColor: '#327cc7',
+    borderRadius: 18,
+  },
+  buttonText: {
+    color: 'white',
+  },
+  title: {
+    fontSize: 20,
+    color: '#222a46',
+  },
+  text: {
+    color: '#949494',
+    marginTop: 24,
+    textAlign: 'center',
+  },
+  like: {
+    height: 90,
+    width:  90,
+    marginVertical: 32,
+  }
+});

components/Gallery/Gallery.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import {Image, View} from 'react-native';
+import {styles} from './styles';
+
+const img1 = require('../../assets/kermit.png');
+const img2 = require('../../assets/kiko.jpeg');
+const img3 = require('../../assets/jungkook.jpeg');
+const img4 = require('../../assets/img.jpeg');
+
+const images = [img1, img2, img3, img4, img1, img2, img3, img4];
+
+const Gallery = () => {
+  return (
+    <View style={styles.container}>
+      {images.map(img => <Image style={styles.img} source={img} />)}
+    </View>
+  )
+};
+
+export default Gallery;

components/Gallery/index.ts

@@ -0,0 +1 @@
+export { default } from './Gallery';

components/Gallery/styles.ts

@@ -0,0 +1,16 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    marginTop: 16,
+    display: 'flex',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  img: {
+    width: '33.3%',
+    height: 120,
+    borderWidth: 1,
+    borderColor: 'white',
+  }
+});

components/Icons/Camera.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+import Svg, { Path } from "react-native-svg"
+
+const Camera = () => (
+  <Svg
+    viewBox="0 0 26 24"
+    fill="none"
+    // @ts-ignore
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <Path
+      d="M13 19.719a6.099 6.099 0 0 1-6.094-6.094A6.099 6.099 0 0 1 13 7.531a6.099 6.099 0 0 1 6.094 6.094A6.099 6.099 0 0 1 13 19.719Zm0-10.563a4.475 4.475 0 0 0-4.469 4.469A4.475 4.475 0 0 0 13 18.094a4.475 4.475 0 0 0 4.469-4.469A4.475 4.475 0 0 0 13 9.156Zm-1.625 4.469A1.63 1.63 0 0 1 13 12a.815.815 0 0 0 .813-.813.815.815 0 0 0-.813-.812 3.253 3.253 0 0 0-3.25 3.25c0 .447.366.813.813.813a.815.815 0 0 0 .812-.813ZM16.468 2.25c.168 0 .32.107.381.264L17.971 5.5h5.591c.447 0 .813.366.813.813v14.625a.815.815 0 0 1-.813.812H2.438a.815.815 0 0 1-.812-.813V6.313c0-.446.366-.812.813-.812h5.596l1.02-2.722a.814.814 0 0 1 .762-.528h6.652Zm0-1.625H9.816c-1.016 0-1.925.63-2.28 1.58l-.63 1.67H2.438A2.438 2.438 0 0 0 0 6.313v14.625a2.438 2.438 0 0 0 2.438 2.437h21.125A2.438 2.438 0 0 0 26 20.937V6.313a2.438 2.438 0 0 0-2.438-2.437h-4.468l-.726-1.93a2.02 2.02 0 0 0-1.9-1.32Z"
+      fill="#000"
+    />
+  </Svg>
+)
+
+export default Camera

components/Icons/Phone.tsx

@@ -0,0 +1,19 @@
+import * as React from "react"
+import Svg, { Path } from "react-native-svg"
+
+const Phone = () => (
+  <Svg
+    width={30}
+    height={30}
+    fill="none"
+  >
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M28 15c0 7.18-5.82 13-13 13S2 22.18 2 15 7.82 2 15 2s13 5.82 13 13Zm2 0c0 8.284-6.716 15-15 15-8.284 0-15-6.716-15-15C0 6.716 6.716 0 15 0c8.284 0 15 6.716 15 15ZM18.947 7.038l2.944.678c.653.15 1.11.725 1.11 1.393C23 16.803 16.758 23 9.105 22.997a1.425 1.425 0 0 1-1.393-1.11l-.679-2.943a1.43 1.43 0 0 1 .832-1.635l3.175-1.359a1.434 1.434 0 0 1 1.668.41l1.022 1.25a9.717 9.717 0 0 0 3.882-3.879l-1.25-1.022c-.491-.4-.66-1.087-.41-1.668l1.36-3.172c.271-.638.959-.988 1.634-.831ZM8.513 18.666l.653 2.834c6.8-.031 12.303-5.534 12.334-12.334l-2.834-.653-1.316 3.068 2.128 1.74c-1.45 3.095-3.069 4.707-6.156 6.157l-1.74-2.128-3.07 1.316Z"
+      fill="#1143FE"
+    />
+  </Svg>
+)
+
+export default Phone;

components/ProductCard/ProductCard.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Image, View, Text, ScrollView, TouchableOpacity } from 'react-native';
+import { styles } from './styles';
+
+const tShirt = require('../../assets/t-shirt.jpeg');
+const star = require('../../assets/star.png');
+
+const colors = ['#e87ec2', '#5e42e8', '#3eb5d9', '#b59bdc', '#2b856c', '#e7be26'];
+const size = ['S', 'M', 'L', 'XL'];
+
+const ProductCard = () => {
+  return (
+    <ScrollView>
+      <View style={styles.container}>
+        <Image source={tShirt} style={styles.img} />
+        <Text style={styles.title}> Super Soft T-shirt </Text>
+        <Text style={styles.price}> 12.22$ </Text>
+        <Text style={styles.description}> Sharks Beauty T-shirt Men Comics Poster Design T Shirt Hip Hop Street Tops Cotton Black Tees Sexy Mermaid Print Clothes Unique</Text>
+        <View style={styles.rating}>
+          <Image style={styles.star} source={star} />
+          <Image style={styles.star} source={star} />
+          <Image style={styles.star} source={star} />
+          <Image style={styles.star} source={star} />
+          <Image style={styles.star} source={star} />
+        </View>
+        <View style={styles.variantsWrapper}>
+          {colors.map(color => <View style={{ ...styles.color, backgroundColor: color }} />)}
+        </View>
+        <View style={styles.variantsWrapper}>
+          {size.map(s => (
+            <View style={styles.size}>
+              <Text> {s} </Text>
+            </View>
+          ))}
+        </View>
+        <TouchableOpacity style={styles.addButton}>
+          <Text style={styles.buttonText}>
+            Add to cart
+          </Text>
+        </TouchableOpacity>
+      </View>
+    </ScrollView>
+  )
+};
+
+export default ProductCard;

components/ProductCard/index.ts

@@ -0,0 +1 @@
+export { default } from './ProductCard';

components/ProductCard/styles.ts

@@ -0,0 +1,79 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    display: 'flex',
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    marginTop: 32,
+    paddingHorizontal: 16
+  },
+  img: {
+    height: 190,
+    width: 164,
+  },
+  star: {
+    height: 30,
+    width: 30,
+    marginLeft: 4,
+  },
+  title: {
+    fontWeight: 'bold',
+    marginTop: 24,
+    color: '#757575',
+    fontSize: 28,
+  },
+  price: {
+    fontWeight: 'bold',
+    marginTop: 8,
+    color: '#65934c',
+    fontSize: 24,
+  },
+  description: {
+    marginTop: 8,
+    fontSize: 16,
+    textAlign: 'center',
+    color: '#919191',
+  },
+  rating: {
+    display: 'flex',
+    flexDirection: 'row',
+    marginTop: 16,
+  },
+  variantsWrapper: {
+    display: 'flex',
+    flexDirection: 'row',
+    marginTop: 24,
+  },
+  size: {
+    padding: 4,
+    width: 36,
+    height: 36,
+    borderWidth: 1,
+    borderColor: 'black',
+    borderRadius: 18,
+    fontSize: 20,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-around',
+    marginLeft: 4,
+  },
+  color: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    marginLeft: 4,
+  },
+  addButton: {
+    width: '90%',
+    marginTop: 24,
+    display: 'flex',
+    alignItems: 'center',
+    backgroundColor: '#54bcd7',
+    padding: 8,
+    borderRadius: 16,
+  },
+  buttonText: {
+    color: 'white',
+  }
+});

components/Resume/Resume.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Image, Text, TouchableOpacity, View } from 'react-native';
+import { styles } from './styles';
+
+const jk = require('../../assets/jungkook.jpeg');
+
+const Resume = () => {
+  return (
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <Text style={styles.title}> Lorem ipsum dolor </Text>
+      </View>
+      <View style={styles.content}>
+        <Text style={styles.subtitle}>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</Text>
+        <Text style={styles.text}>Doctor Who is a British science-fiction television programme broadcast by the BBC since 1963. The programme depicts the adventures of a Time Lord called the Doctor, an extraterrestrial being who appears to be human.</Text>
+        <Text style={styles.link}>Doctor Who is a British science-fiction television programme</Text>
+        <Text style={styles.date}>2001-12-12 13:03:02 </Text>
+        <View style={styles.user}>
+          <Image style={styles.avatar} source={jk} />
+          <Text style={styles.name}>Johan Doe </Text>
+        </View>
+        <TouchableOpacity style={styles.addButton}>
+          <Text style={styles.buttonText}>
+            Like
+          </Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  )
+};
+
+export default Resume;

components/Resume/index.ts

@@ -0,0 +1 @@
+export { default } from './Resume';