reza added Videos

src/components/Divider.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { View, Text } from "react-native";
+import tw from "tailwind-rn";
+
+const Divider = ({ type }) => {
+  return (
+    <View
+      style={[
+        tw(`bg-gray-100 my-4`),
+        {
+          height: type === "horizontal" ? "100%" : 1,
+          width: type === 'horizontal' ? 1 : "100%",
+        },
+      ]}
+    ></View>
+  );
+};
+
+export default Divider;

src/screens/Products/components/Video.js

@@ -21,10 +21,6 @@ function Video({
     <Pressable
       style={[
         {
-          // shadowColor : "#000",
-          // shadowOffset : {width : 0,  height : 2},
-          // shadowRadius : 20,
-          // shadowOpacity : 1,
           marginBottom: 15,
           borderWidth: 1,
           borderColor: "#ddd",

src/screens/Products/index.js

@@ -74,8 +74,8 @@ function Products({ grades, productTypes }) {
             "flex flex-1 w-full py-5 flex-row flex-wrap justify-between bg-white"
           )}
         >
-          {[0, 1, 2, 3, 4, 5, 6, 7].map((item, i) =>
+          {[0, 1, 2, 3, 4, 5, 6, 7].map((item, index) =>
-            productType === "ویدئوها" ? <Video /> : <Book />
+            productType === "ویدئوها" ? <Video key={index} /> : <Book key={index} />
           )}
         </View>
       </ScrollView>

src/screens/Videos/components/MostViewedVideo.js

@@ -0,0 +1,110 @@
+import React from "react";
+import { View, FlatList, Pressable, Image, Dimensions, Text } from "react-native";
+import {useNavigation} from '@react-navigation/native';
+import tw from "tailwind-rn";
+
+const { width, height } = Dimensions.get("window");
+
+import Header from "../../Home/components/Header";
+import posterImage from "../../Products/assets/poster.png";
+
+function MostViewedVideo({}) {
+  const navigation = useNavigation();
+  const Video = ({ video }) => {
+    return (
+      <Pressable
+        style={[
+          {
+            width : 320,
+          },
+          tw("flex flex-col items-end rounded-md ml-4"),
+        ]}
+        onPress={() => navigation.navigate("Product")}
+      >
+        <View
+          style={[
+            tw(
+              "w-full flex flex-row flex-1 justify-between items-center relative overflow-hidden"
+            ),
+            { height: height / 3.8 },
+          ]}
+        >
+          <Image
+            source={video.poster}
+            style={tw("w-full h-full absolute left-0 top-0 rounded-md")}
+          />
+          <Image
+            source={{ uri: video.imageUrl }}
+            style={[
+              tw("rounded-md h-full absolute left-2 inset-y-1/4 rounded-md"),
+              { width: 70, height: 100 },
+            ]}
+          />
+        </View>
+        <Text
+          style={{
+            fontSize: width / 27,
+            marginTop: 5,
+            color: "#05335F",
+            fontFamily: "bold",
+          }}
+        >
+          {video.name}
+        </Text>
+
+        <View
+          style={tw("w-full flex flex-row justify-between items-center")}
+        >
+          <Text
+            style={[
+              tw(""),
+              {
+                marginTop: 10,
+                color: "#132F52",
+                fontFamily: "light",
+                fontSize: width / 37,
+              },
+            ]}
+          >
+            {video.price}
+          </Text>
+          <Text
+            style={{
+              color: "#196EC0",
+              fontFamily: "light",
+              fontSize: width / 37,
+              marginTop: 5,
+            }}
+          >
+            {"پایه" + " " + video.grade}
+          </Text>
+        </View>
+      </Pressable>
+    );
+  };
+  return (
+    <View style={tw("w-full flex flex-col w-full")}>
+      <Header title="پربازدیدترین" />
+      <FlatList
+        horizontal={true}
+        inverted={true}
+        style={tw("pb-1.5  mt-3 flex flex-row w-full")}
+        data={[0,1,2]}
+        renderItem={({ item }) => (
+          <Video
+            video={{
+              name: "ریاضی",
+              price: "145.000 تومان",
+              grade: "4",
+              imageUrl: "https://dnvn.ir/api/v1/file/2105",
+              poster: posterImage,
+            }}
+          />
+        )}
+        keyExtractor={(item) => item}
+      />
+    </View>
+  );
+}
+
+export default MostViewedVideo;

src/screens/Videos/components/NewestVideo.js

@@ -0,0 +1,75 @@
+import React from "react";
+import { View, Pressable, Image, Dimensions, Text } from "react-native";
+import { useNavigation } from "@react-navigation/native";
+import tw from "tailwind-rn";
+
+const { width, height } = Dimensions.get("window");
+
+import Header from "../../Home/components/Header";
+import posterImage from "../../Products/assets/poster.png";
+
+const NewestVideo = () => {
+  const navigation = useNavigation();
+  const Video = ({ video }) => {
+    return (
+      <Pressable
+        style={[
+          {
+            width: width / 2.3,
+          },
+          tw("flex flex-col items-end mb-4"),
+        ]}
+        onPress={() => navigation.navigate("Product")}
+      >
+        <Image
+          source={video.poster}
+          style={[
+            tw("rounded-sm"),
+            { width: '100%', height: ((width / 2.5 * 3 / 4)) },
+          ]}
+        />
+        <Text
+          style={{
+            fontSize: width / 27,
+            marginTop: 5,
+            color: "#05335F",
+            fontFamily: "bold",
+          }}
+        >
+          {video.name}
+        </Text>
+        <Text
+          style={{
+            color: "#196EC0",
+            fontFamily: "light",
+            fontSize: width / 37,
+            marginTop: 5,
+          }}
+        >
+          {"پایه" + " " + video.grade}
+        </Text>
+      </Pressable>
+    );
+  };
+  return (
+    <View style={tw("w-full flex flex-col w-full")}>
+      <Header title="جدیدترین‌ دوره‌ها" />
+      <View style={tw("w-full flex flex-row flex-wrap justify-between mt-3")}>
+        {[0, 1, 2, 3].map((video, index) => (
+          <Video
+            video={{
+              name: "ریاضی",
+              price: "145.000 تومان",
+              grade: "4",
+              imageUrl: "https://dnvn.ir/api/v1/file/2105",
+              poster: posterImage,
+            }}
+            key={index}
+          />
+        ))}
+      </View>
+    </View>
+  );
+};
+
+export default NewestVideo;

src/screens/Videos/components/VerticalGradeFilter.js

@@ -0,0 +1,43 @@
+import React from "react";
+import { View, Text, FlatList, TouchableOpacity } from "react-native";
+import { connect } from "react-redux";
+import tw from "tailwind-rn";
+import Header from "../../Home/components/Header";
+
+const VerticalGradeFilter = ({ grades }) => {
+  const Grade = ({ grade }) => {
+    return (
+      <TouchableOpacity
+        style={[
+          tw("p-3 rounded-sm border border-gray-300 mt-2 ml-2"),
+          { backgroundColor: "#f9f9f9" },
+        ]}
+      >
+        <Text style={[tw("text-xs text-gray-600"), { fontFamily: "light" }]}>
+          {grades[grade]}
+        </Text>
+      </TouchableOpacity>
+    );
+  };
+  return (
+    <View style={tw("w-full flex flex-col mt-3")}>
+      <Header title={"پایه تحصیلی"} />
+      <FlatList
+        style={tw("flex flex-row w-full pb-1.5")}
+        horizontal={true}
+        inverted={true}
+        data={Object.keys(grades)}
+        renderItem={({ item }) => <Grade grade={item} />}
+        keyExtractor={(item) => item}
+      />
+      
+    </View>
+  );
+};
+
+
+const mapStateToProps = (state) => ({
+  grades: state.publicApi.grades,
+});
+
+export default connect(mapStateToProps)(VerticalGradeFilter);

src/screens/Videos/index.js

@@ -7,13 +7,16 @@ import {
   SafeAreaView,
   StatusBar,
   Platform,
-  LayoutAnimation
+  LayoutAnimation,
 } from "react-native";
-import tw from "tailwind-react-native-classnames";
+import tw from "tailwind-rn";
 import Navbar from "../../components/Navbar";
 import Drawer from "../../components/Drawer";
 import Search from "../../components/Search";
-
+import VerticalGradeFilter from "./components/VerticalGradeFilter";
+import Divider from "../../components/Divider";
+import MostViewedVideo from './components/MostViewedVideo';
+import NewestVideo from './components/NewestVideo';
 //assets
 
 const width = Dimensions.get("window").width;
@@ -45,6 +48,11 @@ function Videos(props) {
           onChange={setSearch}
           placeholder={"نام کتاب یا دوره را جستجو کنید"}
         />
+        <VerticalGradeFilter />
+        <Divider type={'vertical'} />
+        <MostViewedVideo />
+        <Divider type={'vertical'} />
+        <NewestVideo />
       </ScrollView>
     </SafeAreaView>
   );