|
|
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; |
|
|
|
|
|
function Faq(props) { |
|
|
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 ( |
|
|
<SafeAreaView |
|
|
style={{ |
|
|
paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0, |
|
|
position: "relative", |
|
|
}} |
|
|
> |
|
|
<Navbar |
|
|
setBoxPosition={setBoxPosition} |
|
|
headerOptions={{ |
|
|
logo: true, |
|
|
menu: false, |
|
|
hamburgerMenu: true, |
|
|
title: "", |
|
|
bookmark: false, |
|
|
qr: true, |
|
|
back: false, |
|
|
backgroundColor: "#E9F0F7", |
|
|
}} |
|
|
/> |
|
|
<Drawer setBoxPosition={setBoxPosition} position={position} /> |
|
|
<ScrollView |
|
|
contentContainerStyle={styles.contentContainerStyle} |
|
|
style={[tw.style("bg-white flex flex-col"), { width: width }]} |
|
|
> |
|
|
<Header |
|
|
background={bgFaq} |
|
|
title={"پرسشهای متداول"} |
|
|
description={"تیم پشتیبانی ما اینجاست تا شما رو کمک کنه"} |
|
|
// icon={} |
|
|
/> |
|
|
<View style={styles.container}> |
|
|
<Search |
|
|
value={search} |
|
|
onChange={setSearch} |
|
|
placeholder={"بخشی از پرسش خود را اینجا بنویسید"} |
|
|
/> |
|
|
<View style={tw.style("mt-2 w-full")}></View> |
|
|
{[0, 1, 2, 3, 4].map((item, index) => ( |
|
|
<Instance key={index} /> |
|
|
))} |
|
|
</View> |
|
|
</ScrollView> |
|
|
</SafeAreaView> |
|
|
); |
|
|
} |
|
|
|
|
|
// Later on in your styles.. |
|
|
const styles = StyleSheet.create({ |
|
|
contentContainerStyle: { |
|
|
paddingBottom: 100, |
|
|
alignItems: "flex-end", |
|
|
}, |
|
|
container: { |
|
|
width: Dimensions.get("window").width, |
|
|
backgroundColor: "white", |
|
|
flexDirection: "column", |
|
|
paddingVertical: 0, |
|
|
paddingHorizontal: 16, |
|
|
}, |
|
|
}); |
|
|
|
|
|
export default Faq;
|
|
|
|