Courses Screen

MengTo · May 15, 2019 · f1d760d · f1d760d
1 parent 2555db8
commit f1d760d
Show file tree

Hide file tree

Showing 3 changed files with 288 additions and 7 deletions.
diff --git a/components/CourseSection.js b/components/CourseSection.js
@@ -0,0 +1,72 @@
+import React from "react";
+import styled from "styled-components";
+import { LinearGradient } from "expo";
+
+const CourseSection = props => (
+  <Container>
+    <Mask>
+      <Image source={props.image} />
+      <LinearGradient
+        colors={["rgba(0, 0, 0, 0)", "rgba(0, 0, 0, 0.5)"]}
+        style={{
+          position: "absolute",
+          width: "100%",
+          height: "100%"
+        }}
+      />
+      <LinearGradient
+        colors={["#3399ff", "#33e1ff"]}
+        start={[0, 0]}
+        end={[1, 0]}
+        style={{
+          position: "absolute",
+          bottom: 0,
+          height: 4,
+          borderRadius: 2,
+          width: props.progress * 100 + "%"
+        }}
+      />
+      <Border />
+      <Text>{props.title}</Text>
+    </Mask>
+  </Container>
+);
+
+export default CourseSection;
+
+const Container = styled.View`
+  width: 150px;
+  height: 150px;
+  border-radius: 10px;
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
+`;
+
+const Mask = styled.View`
+  height: 100%;
+  border-radius: 10px;
+  background: #3c4560;
+  overflow: hidden;
+  justify-content: flex-end;
+  margin-left: 20px;
+`;
+
+const Image = styled.Image`
+  width: 100%;
+  height: 100%;
+  position: absolute;
+`;
+
+const Text = styled.Text`
+  font-size: 15px;
+  font-weight: 600;
+  color: white;
+  margin: 16px;
+`;
+
+const Border = styled.View`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 10px;
+`;
diff --git a/components/Courses.js b/components/Courses.js
@@ -0,0 +1,69 @@
+import React from "react";
+import styled from "styled-components";
+import Course from "../components/Course";
+
+const Courses = () => (
+  <Container>
+    {courses.map((course, index) => (
+      <Course
+        key={index}
+        image={course.image}
+        title={course.title}
+        subtitle={course.subtitle}
+        logo={course.logo}
+        author={course.author}
+        avatar={course.avatar}
+        caption={course.caption}
+      />
+    ))}
+  </Container>
+);
+
+export default Courses;
+
+const Container = styled.View`
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: wrap;
+  padding-left: 10px;
+`;
+
+const courses = [
+  {
+    title: "Prototype in InVision Studio",
+    subtitle: "10 sections",
+    image: require("../assets/background13.jpg"),
+    logo: require("../assets/logo-studio.png"),
+    author: "Meng To",
+    avatar: require("../assets/avatar.jpg"),
+    caption: "Design an interactive prototype using Auto-Animate"
+  },
+  {
+    title: "React for Designers",
+    subtitle: "12 sections",
+    image: require("../assets/background11.jpg"),
+    logo: require("../assets/logo-react.png"),
+    author: "Meng To",
+    avatar: require("../assets/avatar.jpg"),
+    caption: "Learn to design and code a React site"
+  },
+  {
+    title: "Design and Code with Framer X",
+    subtitle: "10 sections",
+    image: require("../assets/background14.jpg"),
+    logo: require("../assets/logo-framerx.png"),
+    author: "Meng To",
+    avatar: require("../assets/avatar.jpg"),
+    caption: "Create powerful design and code components for your app"
+  },
+  {
+    title: "Design System in Figma",
+    subtitle: "10 sections",
+    image: require("../assets/background6.jpg"),
+    logo: require("../assets/logo-figma.png"),
+    author: "Meng To",
+    avatar: require("../assets/avatar.jpg"),
+    caption:
+      "Complete guide to designing a site using a collaborative design tool"
+  }
+];
diff --git a/screens/CoursesScreen.js b/screens/CoursesScreen.js
@@ -1,15 +1,51 @@
 import React from "react";
 import styled from "styled-components";
+import { LinearGradient } from "expo";
+import CourseSection from "../components/CourseSection";
+import Courses from "../components/Courses";
+import { Dimensions } from "react-native";
+
+let screenWidth = Dimensions.get("window").width;
 
 class CoursesScreen extends React.Component {
-  static navigationOptions = {
-    header: null
-  };
+  static navigationOptions = { title: "Courses", header: null };
 
   render() {
     return (
       <Container>
-        <Text>Courses Screen</Text>
+        <ScrollView>
+          <Hero>
+            <Background source={require("../assets/background12.jpg")} />
+            <LinearGradient
+              colors={["rgba(0, 0, 0, 0)", "rgba(0, 0, 0, 0.5)"]}
+              style={{ position: "absolute", width: screenWidth, height: 460 }}
+            />
+            <Logo source={require("../assets/logo-react.png")} />
+            <Caption>12 Sections</Caption>
+            <Title>React Native for Designers</Title>
+            <Sections>
+              <SectionScrollView
+                horizontal={true}
+                showsHorizontalScrollIndicator={false}
+              >
+                {sections.map((section, index) => (
+                  <CourseSection
+                    key={index}
+                    title={section.title}
+                    image={section.image}
+                    progress={section.progress}
+                  />
+                ))}
+              </SectionScrollView>
+            </Sections>
+            <Author>
+              <Avatar source={require("../assets/avatar.jpg")} />
+              <Name>Taught by Meng To</Name>
+            </Author>
+          </Hero>
+          <Subtitle>Latest Courses</Subtitle>
+          <Courses />
+        </ScrollView>
       </Container>
     );
   }
@@ -18,9 +54,113 @@ class CoursesScreen extends React.Component {
 export default CoursesScreen;
 
 const Container = styled.View`
-  flex: 1;
-  justify-content: center;
+  background: #f0f3f5;
+`;
+
+const ScrollView = styled.ScrollView`
+  width: 100%;
+  height: 100%;
+`;
+
+const Hero = styled.View`
+  height: 460px;
+  background: #3c4560;
+`;
+
+const Background = styled.Image`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: ${screenWidth};
+  height: 460px;
+`;
+
+const Logo = styled.Image`
+  width: 48px;
+  height: 48px;
+  margin-top: 50px;
+  margin-left: 20px;
+  align-self: center;
+`;
+
+const Caption = styled.Text`
+  font-size: 15px;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: #b8bece;
+  margin-top: 20px;
+  margin-left: 20px;
+`;
+
+const Title = styled.Text`
+  font-size: 32px;
+  color: white;
+  font-weight: 600;
+  margin-top: 4px;
+  margin-left: 20px;
+  width: 220px;
+`;
+
+const Sections = styled.View`
+  margin-top: 20px;
+  flex-direction: row;
+`;
+
+const SectionScrollView = styled.ScrollView`
+  padding: 10px 0;
+`;
+
+const Author = styled.View`
+  flex-direction: row;
+  margin-top: 10px;
   align-items: center;
+  margin-left: 20px;
 `;
 
-const Text = styled.Text``;
+const Avatar = styled.Image`
+  width: 22px;
+  height: 22px;
+  border-radius: 11px;
+  background: white;
+`;
+
+const Name = styled.Text`
+  margin-left: 8px;
+  color: #b8bece;
+`;
+
+const Subtitle = styled.Text`
+  font-size: 15;
+  text-transform: uppercase;
+  font-weight: 600;
+  color: #b8bece;
+  margin: 20px 0 0 20px;
+`;
+
+const sections = [
+  {
+    title: "React Native for Designers",
+    progress: 0.2,
+    image: require("../assets/background1.jpg")
+  },
+  {
+    title: "Styled Components",
+    progress: 0.3,
+    image: require("../assets/background2.jpg")
+  },
+  {
+    title: "Assets, Icons and SVG",
+    progress: 0.9,
+    image: require("../assets/background3.jpg")
+  },
+  {
+    title: "Props and Data",
+    progress: 0.5,
+    image: require("../assets/background4.jpg")
+  },
+  {
+    title: "States and Layout Animation",
+    progress: 0.1,
+    image: require("../assets/background6.jpg")
+  }
+];