diff --git a/src/screens/Home/assets/arrow.png b/src/screens/Home/assets/arrow.png new file mode 100644 index 0000000..61a0a75 Binary files /dev/null and b/src/screens/Home/assets/arrow.png differ diff --git a/src/screens/Home/assets/food.png b/src/screens/Home/assets/food.png new file mode 100644 index 0000000..eaf90b9 Binary files /dev/null and b/src/screens/Home/assets/food.png differ diff --git a/src/screens/Home/assets/message.png b/src/screens/Home/assets/message.png new file mode 100644 index 0000000..d8ed921 Binary files /dev/null and b/src/screens/Home/assets/message.png differ diff --git a/src/screens/Home/assets/olum1.png b/src/screens/Home/assets/olum1.png new file mode 100644 index 0000000..ddaa069 Binary files /dev/null and b/src/screens/Home/assets/olum1.png differ diff --git a/src/screens/Home/assets/olum2.png b/src/screens/Home/assets/olum2.png new file mode 100644 index 0000000..0435ae3 Binary files /dev/null and b/src/screens/Home/assets/olum2.png differ diff --git a/src/screens/Home/assets/shoe.png b/src/screens/Home/assets/shoe.png new file mode 100644 index 0000000..a24f63e Binary files /dev/null and b/src/screens/Home/assets/shoe.png differ diff --git a/src/screens/Home/assets/user.png b/src/screens/Home/assets/user.png new file mode 100644 index 0000000..b30d133 Binary files /dev/null and b/src/screens/Home/assets/user.png differ diff --git a/src/screens/Home/assets/zist11.png b/src/screens/Home/assets/zist11.png new file mode 100644 index 0000000..e442ebb Binary files /dev/null and b/src/screens/Home/assets/zist11.png differ diff --git a/src/screens/Home/components/2d.js b/src/screens/Home/components/2d.js deleted file mode 100644 index b031d7a..0000000 --- a/src/screens/Home/components/2d.js +++ /dev/null @@ -1,23 +0,0 @@ -import React from "react"; -import { View, StyleSheet, Dimensions } from "react-native"; -import Identifier from "./Identifier"; - -function component2D({ list, flexDirection, navigation }) { - return ( - - {list.map((item, i) => ( - - ))} - - ); -} - -const { width } = Dimensions.get("window"); -const styles = StyleSheet.create({ - container: { - // width, - borderRadius: 10, - flex: 1 - } -}); -export default component2D; diff --git a/src/screens/Home/components/3d.js b/src/screens/Home/components/3d.js deleted file mode 100644 index 0bfec76..0000000 --- a/src/screens/Home/components/3d.js +++ /dev/null @@ -1,24 +0,0 @@ -import React from "react"; -import { View, StyleSheet, Dimensions } from "react-native"; -import Identifier from "./Identifier"; - -function component3D({ list, navigation }) { - return ( - - {list.map((item, i) => ( - - ))} - - ); -} - -const { width } = Dimensions.get("window"); -const styles = StyleSheet.create({ - container: { - // width, - borderRadius: 10, - flex: 1, - flexDirection: "row-reverse" - } -}); -export default component3D; diff --git a/src/screens/Home/components/Blogs.js b/src/screens/Home/components/Blogs.js new file mode 100644 index 0000000..f9727c1 --- /dev/null +++ b/src/screens/Home/components/Blogs.js @@ -0,0 +1,125 @@ +import React from 'react'; +import {View, Text, ScrollView, Image, Dimensions} from 'react-native'; +import food from '../assets/food.png'; +import arrowIcon from '../assets/arrow.png'; +import userImage from '../assets/user.png'; +import message from '../assets/message.png'; +import tw from 'tailwind-react-native-classnames'; + +const width = Dimensions.get('window').width; +const height = Dimensions.get('window').height; +export default function Shop({blogs}) { + return ( + + + + فروشگاه + + + + + + + {blogs.map((blog, index) => ( + + + + + {blog.name} + + + + + {'اکبر یوسفی'} + + + {'زمان مطالعه 30 دقیقه'} + + + + + + + ))} + + + + ); +} + +Shop.defaultProps = { + blogs: [ + { + name: 'آیا مواد غذای پر فیبر مفید هستند؟', + imageUrl: food, + grade: 3, + progress: 70, + }, + { + name: 'آیا مواد غذای پر فیبر مفید هستند؟', + imageUrl: food, + grade: 4, + progress: 60, + }, + { + name: 'آیا مواد غذای پر فیبر مفید هستند؟', + imageUrl: food, + grade: 12, + progress: 90, + }, + { + name: 'آیا مواد غذای پر فیبر مفید هستند؟', + imageUrl: food, + grade: 3, + progress: 70, + }, + { + name: 'آیا مواد غذای پر فیبر مفید هستند؟', + imageUrl: food, + grade: 4, + progress: 60, + }, + { + name: 'آیا مواد غذای پر فیبر مفید هستند؟', + imageUrl: food, + grade: 12, + progress: 90, + }, + ], +}; diff --git a/src/screens/Home/components/Identifier.js b/src/screens/Home/components/Identifier.js deleted file mode 100644 index 48394b8..0000000 --- a/src/screens/Home/components/Identifier.js +++ /dev/null @@ -1,38 +0,0 @@ -import React from "react"; -import Carousel from "./carousel"; -import Component2D from "./2d"; -import Component3D from "./3d"; -import FlexAround from "./flexAround"; -import BackgroundTile from "./backgroundTile"; -import Shop from "./shop.js"; - -const Identifier = (item) => { - let component; - switch (item.name) { - case "carousel": - component = ; - break; - case "2d": - component = ( - - ); - break; - case "3d": - component = ; - break; - case "flex-around": - component = ; - break; - case "background-tile": - component = ; - break; - case "shop": - component = ; - break; - default: - component = null; - } - return <>{component}; -}; - -export default Identifier; diff --git a/src/screens/Home/components/MyBooks.js b/src/screens/Home/components/MyBooks.js new file mode 100644 index 0000000..94c1f2e --- /dev/null +++ b/src/screens/Home/components/MyBooks.js @@ -0,0 +1,110 @@ +import React from 'react'; +import {View, Text, ScrollView, Image, Dimensions} from 'react-native'; +import tw from 'tailwind-react-native-classnames'; +import olum2Image from '../assets/olum2.png'; +import olum1Image from '../assets/olum1.png'; +import zist11Image from '../assets/zist11.png'; + +const width = Dimensions.get('window').width; +const height = Dimensions.get('window').height; +export default function MyBooks({myBooks}) { + return ( + + + کتاب من + + + + {myBooks.map((book, index) => ( + + + + {book.name} + + + {book.grade} + + + + + + ))} + + + ); +} + +MyBooks.defaultProps = { + myBooks: [ + { + name: 'علوم تجربی', + imageUrl: zist11Image, + grade: 3, + progress: 70, + }, + { + name: 'زیست شناسی', + imageUrl: zist11Image, + grade: 4, + progress: 60, + }, + { + name: 'علوم اجتماعی', + imageUrl: zist11Image, + grade: 12, + progress: 90, + }, + { + name: 'علوم تجربی', + imageUrl: zist11Image, + grade: 3, + progress: 70, + }, + { + name: 'زیست شناسی', + imageUrl: zist11Image, + grade: 4, + progress: 60, + }, + { + name: 'علوم اجتماعی', + imageUrl: zist11Image, + grade: 12, + progress: 90, + }, + ], +}; diff --git a/src/screens/Home/components/MyVideos.js b/src/screens/Home/components/MyVideos.js new file mode 100644 index 0000000..e447075 --- /dev/null +++ b/src/screens/Home/components/MyVideos.js @@ -0,0 +1,113 @@ +import React from 'react'; +import {View, Text, ScrollView, Image, Dimensions} from 'react-native'; +import tw from 'tailwind-react-native-classnames'; +import arrowIcon from '../assets/arrow.png'; +import olum2Image from '../assets/olum2.png'; +import olum1Image from '../assets/olum1.png'; +import shoe from '../assets/shoe.png'; + +const width = Dimensions.get('window').width; +const height = Dimensions.get('window').height; +export default function MyBooks({myBooks}) { + return ( + + + + + دوره‌های ویدئویی شما + + + + + + {myBooks.map((book, index) => ( + + + + {book.name} + + + {book.grade} + + + + + + ))} + + + ); +} + +MyBooks.defaultProps = { + myBooks: [ + { + name: 'علوم تجربی', + imageUrl: shoe, + grade: 3, + progress: 70, + }, + { + name: 'زیست شناسی', + imageUrl: shoe, + grade: 4, + progress: 60, + }, + { + name: 'علوم اجتماعی', + imageUrl: shoe, + grade: 12, + progress: 90, + }, + { + name: 'علوم تجربی', + imageUrl: shoe, + grade: 3, + progress: 70, + }, + { + name: 'زیست شناسی', + imageUrl: shoe, + grade: 4, + progress: 60, + }, + { + name: 'علوم اجتماعی', + imageUrl: shoe, + grade: 12, + progress: 90, + }, + ], +}; diff --git a/src/screens/Home/components/backgroundTile.js b/src/screens/Home/components/backgroundTile.js deleted file mode 100644 index 1459dc8..0000000 --- a/src/screens/Home/components/backgroundTile.js +++ /dev/null @@ -1,52 +0,0 @@ -import React from "react"; -import { StyleSheet, View, Text, ImageBackground } from "react-native"; - -const backgroundTile = ({ item }) => { - return ( - - - {item.title} - {item.subTitle} - - - ); -}; - -const styles = StyleSheet.create({ - container: { - margin: 5, - borderRadius: 10, - overflow: 'hidden', - alignItems: 'center', - justifyContent: 'center', - }, - cover: { - minHeight: "100%", - minWidth: "100%", - flexDirection: "column", - justifyContent: "center", - padding: 10, - borderRadius: 10 - }, - title: { - fontSize: 21, - fontWeight: '600', - marginBottom: 5, - color: "white" - }, - subTitle: { - fontSize: 14, - color: "white" - } -}); - -export default backgroundTile; diff --git a/src/screens/Home/components/carousel.js b/src/screens/Home/components/carousel.js deleted file mode 100644 index 5aa80af..0000000 --- a/src/screens/Home/components/carousel.js +++ /dev/null @@ -1,51 +0,0 @@ -import React from "react"; -import { ImageBackground, Dimensions, StyleSheet, View } from "react-native"; -import { SwiperFlatList } from "react-native-swiper-flatlist"; - -const Carousel = ({ list }) => { - return ( - - ( - - - - )} - /> - - ); -}; - -const { width } = Dimensions.get("window"); -const styles = StyleSheet.create({ - container: { - minHeight: 300, - borderRadius: 10, - margin: 5, - overflow: 'hidden' - }, - child: { - width, - justifyContent: "center", - borderRadius: 10, - alignItems: "center" - }, - image: { - width, - flex: 1, - justifyContent: "center", - borderRadius: 10, - } -}); - -export default Carousel; diff --git a/src/screens/Home/components/flexAround.js b/src/screens/Home/components/flexAround.js deleted file mode 100644 index 8e091bd..0000000 --- a/src/screens/Home/components/flexAround.js +++ /dev/null @@ -1,52 +0,0 @@ -import React from "react"; -import { StyleSheet, View, Text, Image } from "react-native"; - -const FlexAround = ({ item }) => { - return ( - - - {item.title} - {item.subTitle} - - - - ); -}; - -const styles = StyleSheet.create({ - container: { - borderRadius: 10, - flex: 1, - paddingVertical: 30, - flexDirection: "row-reverse", - alignItems: "center", - justifyContent: "space-around", - textAlign: "right", - margin: 5 - }, - column: { - display: "flex", - flexDirection: "column" - }, - image: { - width: 60, - height: 60 - }, - title: { - fontSize: 21, - fontWeight: '600', - marginBottom: 5, - color: "white" - }, - subTitle: { - fontSize: 14, - color: "white" - } -}); - -export default FlexAround; diff --git a/src/screens/Home/components/shop.js b/src/screens/Home/components/shop.js index 8b90160..8cf68ec 100644 --- a/src/screens/Home/components/shop.js +++ b/src/screens/Home/components/shop.js @@ -1,55 +1,113 @@ -import React from "react"; -import {StyleSheet, View, Text, Image, TouchableOpacity} from "react-native"; +import React from 'react'; +import {View, Text, ScrollView, Image, Dimensions} from 'react-native'; +import zist11Image from '../assets/zist11.png'; +import arrowIcon from '../assets/arrow.png'; +import tw from 'tailwind-react-native-classnames'; -const Shop = ({ item, navigation }) => { +const width = Dimensions.get('window').width; +const height = Dimensions.get('window').height; +export default function Shop({books}) { return ( - navigation.navigate('Products')} + - {item.title} - - - {item.items.map((item1) => ( - - - - ))} + tw.style('flex flex-col shadow-sm rounded-md pt-6 px-2 items-start'), + { + direction: 'rtl', + }, + ]}> + + + فروشگاه + + - - ); -}; -const styles = StyleSheet.create({ - container: { - borderRadius: 10, - flex: 1, - paddingVertical: 5, - paddingHorizontal: 10, - flexDirection: "column", - textAlign: "right", - margin: 5 - }, - list: { - display: "flex", - flexDirection: "row", - justifyContent: "space-around", - marginTop: 10 - }, - product: { - width: 50, - height: 65, - borderRadius: 10 - }, - title: { - fontSize: 18, - fontWeight: '600', - marginBottom: 5, - color: "white" - } -}); + + + {books.map((book, index) => ( + + + + ))} + + + + ); +} -export default Shop; +Shop.defaultProps = { + books: [ + { + name: 'علوم تجربی', + imageUrl: zist11Image, + grade: 3, + progress: 70, + }, + { + name: 'زیست شناسی', + imageUrl: zist11Image, + grade: 4, + progress: 60, + }, + { + name: 'علوم اجتماعی', + imageUrl: zist11Image, + grade: 12, + progress: 90, + }, + { + name: 'علوم تجربی', + imageUrl: zist11Image, + grade: 3, + progress: 70, + }, + { + name: 'زیست شناسی', + imageUrl: zist11Image, + grade: 4, + progress: 60, + }, + { + name: 'علوم اجتماعی', + imageUrl: zist11Image, + grade: 12, + progress: 90, + }, + ], +}; diff --git a/src/screens/Home/data.js b/src/screens/Home/data.js deleted file mode 100644 index aa4e695..0000000 --- a/src/screens/Home/data.js +++ /dev/null @@ -1,140 +0,0 @@ -const data = [ - { - name: "carousel", - list: [ - { - id: 0, - imageUrl: "https://dnvn.ir/api/v1/file/5299" - }, - { - id: 1, - imageUrl: "https://dnvn.ir/api/v1/file/6581" - }, - { - id: 2, - imageUrl: "https://dnvn.ir/api/v1/file/6586" - } - ] - }, - { - name: "2d", - flexDirection: "row-reverse", - items: [ - { - name: "flex-around", - title: "qr خوان", - subTitle: "در صفحات کتاب هوشمند", - imageUrl: "https://dnvn.ir/api/v1/file/1855", - backgroundColor: "blue", - flex: 1 - }, - { - name: "flex-around", - title: "واقعیت افزوده", - subTitle: "فعال شده و دیجیتال", - imageUrl: "https://dnvn.ir/api/v1/file/1851", - backgroundColor: "green", - flex: 1 - } - ] - }, - { - name: "2d", - flexDirection: "row-reverse", - items: [ - { - name: "flex-around", - title: "qr خوان", - subTitle: "در صفحات کتاب هوشمند", - imageUrl: "https://dnvn.ir/api/v1/file/1855", - backgroundColor: "blue", - flex: 1.6 - }, - { - name: "background-tile", - title: "کتاب های من", - subTitle: "فعال شده و دیجیتال", - imageUrl: "https://dnvn.ir/api/v1/file/1860", - backgroundColor: "#ff00ff77", - flex: 1, - alignItems: "flex-end" - } - ] - }, - { - name: "2d", - flexDirection: "row-reverse", - items: [ - { - name: "background-tile", - title: "بلاگ", - subTitle: "", - imageUrl: "https://dnvn.ir/api/v1/file/1852", - backgroundColor: "#00ff0066", - flex: 1, - alignItems: "center" - }, - { - name: "shop", - title: "فروشگاه", - backgroundColor: "#8888ff", - flex: 1.6, - items: [ - { - id: 0, - imageUrl: "https://dnvn.ir/api/v1/file/1857" - }, - { - id: 1, - imageUrl: "https://dnvn.ir/api/v1/file/1858" - }, - { - id: 2, - imageUrl: "https://dnvn.ir/api/v1/file/1859" - } - ] - } - ] - }, - { - name: "3d", - items: [ - { - name: "2d", - flexDirection: "column", - items: [ - { - name: "background-tile", - title: "پیگیری سفارشات", - subTitle: "", - imageUrl: "", - backgroundColor: "#ff5555", - flex: 1, - alignItems: "center" - }, - { - name: "background-tile", - title: "پشتیبانی", - subTitle: "", - imageUrl: "", - backgroundColor: "#ffaa00", - flex: 1, - alignItems: "center" - } - ] - }, - { - name: "background-tile", - title: "بلاگ", - subTitle: "", - imageUrl: "https://dnvn.ir/api/v1/file/1853", - backgroundColor: "#00ffff66", - flex: 1, - alignItems: "center" - } - ] - } - ]; - - export default data; - \ No newline at end of file diff --git a/src/screens/Home/index.js b/src/screens/Home/index.js index a022342..6fe704a 100644 --- a/src/screens/Home/index.js +++ b/src/screens/Home/index.js @@ -1,15 +1,18 @@ import React from "react"; import { View, StyleSheet, Dimensions, ScrollView } from "react-native"; -import data from "./data"; -import Identifier from "./components/Identifier"; +import MyBooks from './components/MyBooks'; +import Shop from './components/Shop'; +import MyVideos from './components/MyVideos'; +import Blogs from './components/Blogs'; // Within your render function function Home(props) { return ( - {data?.map((item, i) => ( - - ))} + + + + ); } @@ -23,7 +26,8 @@ const styles = StyleSheet.create({ width: Dimensions.get("window").width, backgroundColor: "white", flexDirection: "column", - padding: 5, + paddingVertical : 5, + paddingHorizontal : 10 } }); diff --git a/src/screens/Home/navbar.js b/src/screens/Home/navbar.js deleted file mode 100644 index be461ec..0000000 --- a/src/screens/Home/navbar.js +++ /dev/null @@ -1,46 +0,0 @@ -import React from "react"; - -import { Button, StyleSheet, Text, View, Dimensions } from "react-native"; - -function App() { - return ( - - - دانوین - -