diff --git a/navigation/index.js b/navigation/index.js index 0621251..1e3003e 100644 --- a/navigation/index.js +++ b/navigation/index.js @@ -12,7 +12,9 @@ import Products from "../src/screens/Products"; import Login from "../src/screens/Login"; import Otp from "../src/screens/Otp"; import Product from "../src/screens/Product"; -import QR from "../src/screens/QR/index"; +import QR from "../src/screens/QR"; +import Faq from "../src/screens/Faq" +import Activation from "../src/screens/Activation"; import { connect } from "react-redux"; import i18n from "../src/services/i18n"; import { useTranslation } from "react-i18next"; @@ -102,6 +104,8 @@ const HomeStackScreen = () => { + + ); }; @@ -117,6 +121,8 @@ const ProductsStackScreen = () => { + + ); }; diff --git a/src/components/Drawer.js b/src/components/Drawer.js index 4252b78..3e024ea 100644 --- a/src/components/Drawer.js +++ b/src/components/Drawer.js @@ -58,6 +58,13 @@ const Drawer = ({ position, setBoxPosition }) => { icon: , toast: "", message: "", + }, + { + name: "سوالات متداول", + route: "Faq", + icon: , + toast: "", + message: "", } ]); const navigation = useNavigation(); diff --git a/src/components/Header.js b/src/components/Header.js index 693d7fc..4ae3e9f 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -16,14 +16,14 @@ export default function Header({icon, title, description, background}) { {title} {description} diff --git a/src/screens/Activation/index.js b/src/screens/Activation/index.js index 12b545c..f1f2a00 100644 --- a/src/screens/Activation/index.js +++ b/src/screens/Activation/index.js @@ -1,4 +1,4 @@ -import React, {useState} from 'react'; +import React, { useState } from "react"; import { View, StyleSheet, @@ -8,17 +8,25 @@ import { Pressable, Image, TextInput, -} from 'react-native'; -import tw from 'tailwind-react-native-classnames'; -import Header from '../../components/Header'; -import CustomPressable from '../../components/Pressable'; -import Or from '../../components/Or'; -import bgQr from './assets/bgQr.png'; -import qrIcon from './assets/qr.png'; -import alertIcon from './assets/alert.png'; -import bookIcon from './assets/book.png'; + SafeAreaView, + StatusBar, + Platform, + LayoutAnimation +} from "react-native"; +import tw from "tailwind-react-native-classnames"; +import Header from "../../components/Header"; +import Navbar from "../../components/Navbar"; +import Drawer from "../../components/Drawer"; +import CustomPressable from "../../components/Pressable"; +import Or from "../../components/Or"; -const width = Dimensions.get('window').width; +//assets +import bgQr from "./assets/bgQr.png"; +import qrIcon from "./assets/qr.png"; +import alertIcon from "./assets/alert.png"; +import bookIcon from "./assets/book.png"; + +const width = Dimensions.get("window").width; function Activation(props) { const [formData, setFormData] = useState({ @@ -27,79 +35,98 @@ function Activation(props) { message: null, file: null, }); + const [position, setPosition] = useState("100%"); + + const setBoxPosition = () => { + LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); + setPosition(position === "100%" ? "0%" : "100%"); + }; const onChange = (name, value) => { - setFormData({...formData, [name]: value}); + setFormData({ ...formData, [name]: value }); }; return ( - + + +
- - - - - - - دانش آموز گرامی پس از خرید فیزیکی کتاب، یک کارت فعالسازی در درون - کتاب قرار داده شده که شما می‌توانید با وارد کردن کد در قسمت زیر و یا - اسکن کد QR با دوربین موبایل خود اقدام به فعالسازی امکانات ویژه برای - کتاب خود نمائید - - - - - - - - - - - + + + + + + {/* + + دانش آموز گرامی پس از خرید فیزیکی کتاب، یک کارت فعالسازی در درون + کتاب قرار داده شده که شما می‌توانید با وارد کردن کد در قسمت زیر و + یا اسکن کد QR با دوربین موبایل خود اقدام به فعالسازی امکانات ویژه + برای کتاب خود نمائید + + + + + */} + + + + + + + ); } @@ -107,14 +134,14 @@ function Activation(props) { const styles = StyleSheet.create({ contentContainerStyle: { paddingBottom: 50, - alignItems: 'flex-end', + alignItems: "flex-end", }, container: { - width: Dimensions.get('window').width, - backgroundColor: 'white', - flexDirection: 'column', + width: Dimensions.get("window").width, + backgroundColor: "white", + flexDirection: "column", paddingVertical: 5, - paddingHorizontal: 10, + paddingHorizontal: 16, }, }); diff --git a/src/screens/Faq/components/Instance.js b/src/screens/Faq/components/Instance.js index 25a0b11..41ee679 100644 --- a/src/screens/Faq/components/Instance.js +++ b/src/screens/Faq/components/Instance.js @@ -12,7 +12,7 @@ function Instance(props) { setActive(!active)} style={[ - tw.style('w-full flex flex-col my-1.5 rounded-md px-4 py-3'), + tw.style('w-full flex flex-col my-1.5 rounded-md px-4 py-2'), { backgroundColor: !active ? '#F9F9F9' : '#F6F9FD', borderColor: !active ? '#DBDBDB' : '#196EC0', @@ -27,22 +27,22 @@ function Instance(props) { width: '90%', textAlign: 'right', color: '#196EC0', - fontSize: width / 27, + fontSize: width / 34, + fontFamily: 'bold' }, - tw.style('font-medium'), ]}> نحوه خرید از سایت چگونه است ؟ {active && ( هر نفسی که فرو می‌ بریم، مرگی را که مدام به ما دستاندازی می‌کند پس diff --git a/src/screens/Faq/index.js b/src/screens/Faq/index.js index 02ad8c7..7cdb6d6 100644 --- a/src/screens/Faq/index.js +++ b/src/screens/Faq/index.js @@ -1,55 +1,83 @@ -import React, {useState} from 'react'; -import {View, StyleSheet, Dimensions, ScrollView, Text} from 'react-native'; -import tw from 'tailwind-react-native-classnames'; -import Header from '../../components/Header'; -import Search from '../../components/Search'; -import Instance from './components/Instance'; -import bgFaq from './assets/bgFaq.png'; +import React, { useState } from "react"; +import { + View, + StyleSheet, + Dimensions, + ScrollView, + Text, + SafeAreaView, + Platform, + StatusBar, + LayoutAnimation, +} from "react-native"; +import tw from "tailwind-react-native-classnames"; +import Header from "../../components/Header"; +import Navbar from "../../components/Navbar"; +import Drawer from "../../components/Drawer"; +import Search from "../../components/Search"; +import Instance from "./components/Instance"; +import bgFaq from "./assets/bgFaq.png"; -const width = Dimensions.get('window').width; +const width = Dimensions.get("window").width; function Faq(props) { - const [search, setSearch] = useState(''); + const [search, setSearch] = useState(""); + const [position, setPosition] = useState("100%"); + + const setBoxPosition = () => { + LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); + setPosition(position === "100%" ? "0%" : "100%"); + }; + const onChange = (name, value) => {}; return ( - -
- - + + + +
- + + + + {[0, 1, 2, 3, 4].map((item, index) => ( + + ))} - {[0,1,2,3,4].map((item, index) => ( - - ))} - - + + ); } // Later on in your styles.. const styles = StyleSheet.create({ contentContainerStyle: { - paddingBottom: 50, - alignItems: 'flex-end', + paddingBottom: 100, + alignItems: "flex-end", }, container: { - width: Dimensions.get('window').width, - backgroundColor: 'white', - flexDirection: 'column', - paddingVertical: 5, - paddingHorizontal: 10, + width: Dimensions.get("window").width, + backgroundColor: "white", + flexDirection: "column", + paddingVertical: 0, + paddingHorizontal: 16, }, }); diff --git a/src/screens/Product/index.js b/src/screens/Product/index.js index c68f683..44901df 100644 --- a/src/screens/Product/index.js +++ b/src/screens/Product/index.js @@ -1,4 +1,4 @@ -import React from "react"; +import React, {useState} from "react"; import { View, StyleSheet, @@ -6,6 +6,7 @@ import { ScrollView, SafeAreaView, StatusBar, + LayoutAnimation } from "react-native"; import Book from "./components/Book"; import Video from "./components/Video"; @@ -13,6 +14,7 @@ import { connect } from "react-redux"; import userImage from "./assets/user.png"; import poster from "./assets/poster.png"; import Navbar from "../../components/Navbar"; +import Drawer from "../../components/Drawer"; function Product({ product = { @@ -58,13 +60,21 @@ function Product({ ], }, }) { + const [position, setPosition] = useState("100%"); + + const setBoxPosition = () => { + LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); + setPosition(position === "100%" ? "0%" : "100%"); + }; return ( - + + { + LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); + setPosition(position === "100%" ? "0%" : "100%"); + }; const [productType, setProductType] = useState(""); const [grade, setGrade] = useState(""); const [search, setSearch] = useState(""); @@ -26,9 +34,11 @@ function Products({ grades, productTypes }) { - + + { }; function ShoppingCart({}) { + const [position, setPosition] = useState("100%"); + + const setBoxPosition = () => { + LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); + setPosition(position === "100%" ? "0%" : "100%"); + }; + return ( - + +