diff --git a/src/components/Divider.js b/src/components/Divider.js
new file mode 100644
index 0000000..95bb0e5
--- /dev/null
+++ b/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 (
+
+ );
+};
+
+export default Divider;
diff --git a/src/screens/Products/components/Video.js b/src/screens/Products/components/Video.js
index c07f6b6..9b63cd1 100644
--- a/src/screens/Products/components/Video.js
+++ b/src/screens/Products/components/Video.js
@@ -21,10 +21,6 @@ function Video({
- {[0, 1, 2, 3, 4, 5, 6, 7].map((item, i) =>
- productType === "ویدئوها" ? :
+ {[0, 1, 2, 3, 4, 5, 6, 7].map((item, index) =>
+ productType === "ویدئوها" ? :
)}
diff --git a/src/screens/Videos/components/MostViewedVideo.js b/src/screens/Videos/components/MostViewedVideo.js
new file mode 100644
index 0000000..31d922c
--- /dev/null
+++ b/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 (
+ navigation.navigate("Product")}
+ >
+
+
+
+
+
+ {video.name}
+
+
+
+
+ {video.price}
+
+
+ {"پایه" + " " + video.grade}
+
+
+
+ );
+ };
+ return (
+
+
+ (
+
+ )}
+ keyExtractor={(item) => item}
+ />
+
+ );
+}
+
+export default MostViewedVideo;
diff --git a/src/screens/Videos/components/NewestVideo.js b/src/screens/Videos/components/NewestVideo.js
new file mode 100644
index 0000000..63da895
--- /dev/null
+++ b/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 (
+ navigation.navigate("Product")}
+ >
+
+
+ {video.name}
+
+
+ {"پایه" + " " + video.grade}
+
+
+ );
+ };
+ return (
+
+
+
+ {[0, 1, 2, 3].map((video, index) => (
+
+ ))}
+
+
+ );
+};
+
+export default NewestVideo;
\ No newline at end of file
diff --git a/src/screens/Videos/components/VerticalGradeFilter.js b/src/screens/Videos/components/VerticalGradeFilter.js
new file mode 100644
index 0000000..398af51
--- /dev/null
+++ b/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 (
+
+
+ {grades[grade]}
+
+
+ );
+ };
+ return (
+
+
+ }
+ keyExtractor={(item) => item}
+ />
+
+
+ );
+};
+
+
+const mapStateToProps = (state) => ({
+ grades: state.publicApi.grades,
+});
+
+export default connect(mapStateToProps)(VerticalGradeFilter);
diff --git a/src/screens/Videos/index.js b/src/screens/Videos/index.js
index 43a1710..82ca883 100644
--- a/src/screens/Videos/index.js
+++ b/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={"نام کتاب یا دوره را جستجو کنید"}
/>
+
+
+
+
+
);