Reza_ashrafi
3 years ago
parent
50a2817301
commit
2530a593b3
41 changed files with 1126 additions and 375 deletions
@ -0,0 +1,11 @@ |
|||||||
|
> Why do I have a folder named ".expo-shared" in my project? |
||||||
|
|
||||||
|
The ".expo-shared" folder is created when running commands that produce state that is intended to be shared with all developers on the project. For example, "npx expo-optimize". |
||||||
|
|
||||||
|
> What does the "assets.json" file contain? |
||||||
|
|
||||||
|
The "assets.json" file describes the assets that have been optimized through "expo-optimize" and do not need to be processed again. |
||||||
|
|
||||||
|
> Should I commit the ".expo-shared" folder? |
||||||
|
|
||||||
|
Yes, you should share the ".expo-shared" folder with your collaborators. |
||||||
@ -1,4 +1 @@ |
|||||||
{ |
{} |
||||||
"12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true, |
|
||||||
"40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true |
|
||||||
} |
|
||||||
|
|||||||
Binary file not shown.
@ -0,0 +1,186 @@ |
|||||||
|
import React, { useState, useEffect } from "react"; |
||||||
|
import { StyleSheet, TouchableOpacity, View, Image, Text } from "react-native"; |
||||||
|
import { Ionicons } from "@expo/vector-icons"; |
||||||
|
import { Audio } from "expo-av"; |
||||||
|
import sound from '../assets/sound.mp3'; |
||||||
|
|
||||||
|
const audioBookPlaylist = [ |
||||||
|
{ |
||||||
|
title: "Hamlet - Act I", |
||||||
|
author: "William Shakespeare", |
||||||
|
source: "Librivox", |
||||||
|
uri: sound, |
||||||
|
imageSource: |
||||||
|
"http://www.archive.org/download/LibrivoxCdCoverArt8/hamlet_1104.jpg", |
||||||
|
}, |
||||||
|
|
||||||
|
]; |
||||||
|
|
||||||
|
const MusicPlayer = () => { |
||||||
|
const [isPlaying, setIsPlaying] = useState(false); |
||||||
|
const [playbackInstance, setPlaybackInstance] = useState(null); |
||||||
|
const [currentIndex, setCurrentIndex] = useState(0); |
||||||
|
const [volume, setVolume] = useState(1.0); |
||||||
|
const [isBuffering, setIsBuffering] = useState(true); |
||||||
|
|
||||||
|
useEffect( async () => { |
||||||
|
try { |
||||||
|
await Audio.setAudioModeAsync({ |
||||||
|
allowsRecordingIOS: false, |
||||||
|
interruptionModeIOS: Audio.INTERRUPTION_MODE_IOS_DO_NOT_MIX, |
||||||
|
playsInSilentModeIOS: true, |
||||||
|
interruptionModeAndroid: Audio.INTERRUPTION_MODE_ANDROID_DO_NOT_MIX, |
||||||
|
shouldDuckAndroid: true, |
||||||
|
staysActiveInBackground: true, |
||||||
|
playThroughEarpieceAndroid: true, |
||||||
|
}); |
||||||
|
|
||||||
|
loadAudio(); |
||||||
|
} catch (e) { |
||||||
|
console.log(e); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
const loadAudio = async () => { |
||||||
|
try { |
||||||
|
const playbackInstance = new Audio.Sound(); |
||||||
|
const source = { |
||||||
|
uri: audioBookPlaylist[currentIndex].uri, |
||||||
|
}; |
||||||
|
|
||||||
|
const status = { |
||||||
|
shouldPlay: isPlaying, |
||||||
|
volume: volume, |
||||||
|
}; |
||||||
|
|
||||||
|
playbackInstance.setOnPlaybackStatusUpdate(onPlaybackStatusUpdate); |
||||||
|
await playbackInstance.loadAsync(source, status, false); |
||||||
|
setPlaybackInstance(playbackInstance); |
||||||
|
} catch (e) { |
||||||
|
console.log(e); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
const onPlaybackStatusUpdate = (status) => { |
||||||
|
setIsBuffering(status.isBuffering); |
||||||
|
}; |
||||||
|
|
||||||
|
const handlePlayPause = async () => { |
||||||
|
if(isPlaying) { |
||||||
|
await playbackInstance.pauseAsync(); |
||||||
|
}else{ |
||||||
|
await playbackInstance.playAsync(); |
||||||
|
} |
||||||
|
|
||||||
|
setIsPlaying(() => !isPlaying); |
||||||
|
}; |
||||||
|
|
||||||
|
const handlePreviousTrack = async () => { |
||||||
|
let { playbackInstance, currentIndex } = state; |
||||||
|
if (playbackInstance) { |
||||||
|
await playbackInstance.unloadAsync(); |
||||||
|
setCurrentIndex( |
||||||
|
currentIndex === 0 ? audioBookPlaylist.length - 1 : currentIndex - 1 |
||||||
|
); |
||||||
|
loadAudio(); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
const handleNextTrack = async () => { |
||||||
|
if (playbackInstance) { |
||||||
|
await playbackInstance.unloadAsync(); |
||||||
|
setCurrentIndex( |
||||||
|
currentIndex + 1 > audioBookPlaylist.length - 1 ? 0 : currentIndex + 1 |
||||||
|
); |
||||||
|
loadAudio(); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
const renderFileInfo = () => { |
||||||
|
return playbackInstance ? ( |
||||||
|
<View style={styles.trackInfo}> |
||||||
|
<Text style={[styles.trackInfoText, styles.largeText]}> |
||||||
|
{audioBookPlaylist[currentIndex].title} |
||||||
|
</Text> |
||||||
|
<Text style={[styles.trackInfoText, styles.smallText]}> |
||||||
|
{audioBookPlaylist[currentIndex].author} |
||||||
|
</Text> |
||||||
|
<Text style={[styles.trackInfoText, styles.smallText]}> |
||||||
|
{audioBookPlaylist[currentIndex].source} |
||||||
|
</Text> |
||||||
|
</View> |
||||||
|
) : null; |
||||||
|
}; |
||||||
|
return ( |
||||||
|
<View style={styles.container}> |
||||||
|
<Image |
||||||
|
style={styles.albumCover} |
||||||
|
source={{ |
||||||
|
uri: "http://www.archive.org/download/LibrivoxCdCoverArt8/hamlet_1104.jpg", |
||||||
|
}} |
||||||
|
/> |
||||||
|
<View style={styles.controls}> |
||||||
|
<TouchableOpacity |
||||||
|
style={styles.control} |
||||||
|
onPress={() => handlePreviousTrack()} |
||||||
|
> |
||||||
|
<Ionicons name="play-back" size={48} color="#444" /> |
||||||
|
</TouchableOpacity> |
||||||
|
<TouchableOpacity |
||||||
|
style={styles.control} |
||||||
|
onPress={() => handlePlayPause()} |
||||||
|
> |
||||||
|
{isPlaying ? ( |
||||||
|
<Ionicons name="ios-pause" size={48} color="#444" /> |
||||||
|
) : ( |
||||||
|
<Ionicons name="ios-play-circle" size={48} color="#444" /> |
||||||
|
)} |
||||||
|
</TouchableOpacity> |
||||||
|
<TouchableOpacity |
||||||
|
style={styles.control} |
||||||
|
onPress={() => handleNextTrack()} |
||||||
|
> |
||||||
|
<Ionicons name="play-forward" size={48} color="#444" /> |
||||||
|
</TouchableOpacity> |
||||||
|
</View> |
||||||
|
{renderFileInfo()} |
||||||
|
</View> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
const styles = StyleSheet.create({ |
||||||
|
container: { |
||||||
|
flex: 1, |
||||||
|
backgroundColor: "#fff", |
||||||
|
alignItems: "center", |
||||||
|
justifyContent: "center", |
||||||
|
}, |
||||||
|
albumCover: { |
||||||
|
width: 250, |
||||||
|
height: 250, |
||||||
|
}, |
||||||
|
trackInfo: { |
||||||
|
padding: 40, |
||||||
|
backgroundColor: "#fff", |
||||||
|
}, |
||||||
|
|
||||||
|
trackInfoText: { |
||||||
|
textAlign: "center", |
||||||
|
flexWrap: "wrap", |
||||||
|
color: "#550088", |
||||||
|
}, |
||||||
|
largeText: { |
||||||
|
fontSize: 22, |
||||||
|
}, |
||||||
|
smallText: { |
||||||
|
fontSize: 16, |
||||||
|
}, |
||||||
|
control: { |
||||||
|
margin: 20, |
||||||
|
}, |
||||||
|
controls: { |
||||||
|
flexDirection: "row", |
||||||
|
}, |
||||||
|
}); |
||||||
|
|
||||||
|
export default MusicPlayer; |
||||||
@ -1,23 +1,30 @@ |
|||||||
import React from 'react'; |
import React from "react"; |
||||||
import {View, Text, Image, Pressable} from 'react-native'; |
import { View, Text, Image, Pressable, Dimensions } from "react-native"; |
||||||
import tw from 'tailwind-react-native-classnames'; |
import tw from "tailwind-rn"; |
||||||
import linkIcon from '../../../assets/icons/link.png'; |
import linkIcon from "../../../assets/icons/link.png"; |
||||||
|
|
||||||
export default function Links({links}) { |
const { width } = Dimensions.get("window"); |
||||||
|
|
||||||
|
export default function Links({ links }) { |
||||||
return ( |
return ( |
||||||
<View |
<View |
||||||
style={tw.style( |
style={tw( |
||||||
'w-full flex-row-reverse justify-between items-center rounded-md bg-yellow-100 py-3 px-2 mt-5', |
"w-full flex-row-reverse justify-between items-center rounded-md bg-yellow-100 py-3 px-2 mt-5" |
||||||
)}> |
)} |
||||||
<View style={tw.style('flex flex-col items-end')}> |
> |
||||||
<Text>لینک ها</Text> |
<View style={tw("flex flex-col items-end")}> |
||||||
|
<Text style={{ fontSize: width / 31, fontFamily: "bold" }}> |
||||||
|
لینک ها |
||||||
|
</Text> |
||||||
{links.map((link, i) => ( |
{links.map((link, i) => ( |
||||||
<Pressable style={tw.style('')} key={i}> |
<Pressable style={tw("mt-1")} key={i}> |
||||||
<Text>{link}</Text> |
<Text style={{ fontSize: width / 34, fontFamily: "light" }}> |
||||||
|
{link} |
||||||
|
</Text> |
||||||
</Pressable> |
</Pressable> |
||||||
))} |
))} |
||||||
</View> |
</View> |
||||||
<Image source={linkIcon} style={{width: 40, height: 40}} /> |
<Image source={linkIcon} style={{ width: 40, height: 40 }} /> |
||||||
</View> |
</View> |
||||||
); |
); |
||||||
} |
} |
||||||
|
|||||||
@ -1,18 +1,26 @@ |
|||||||
import React from 'react'; |
import React from "react"; |
||||||
import {View, Text, Image} from 'react-native'; |
import { View, Text, Image, Dimensions } from "react-native"; |
||||||
import tw from 'tailwind-react-native-classnames'; |
import tw from "tailwind-rn"; |
||||||
import pdfIcon from '../../../assets/icons/pdf.png'; |
import pdfIcon from "../../../assets/icons/pdf.png"; |
||||||
|
|
||||||
export default function PDF({name, file}) { |
const {width} = Dimensions.get("window"); |
||||||
|
|
||||||
|
export default function PDF({ name, file }) { |
||||||
return ( |
return ( |
||||||
<View |
<View |
||||||
style={tw.style( |
style={tw( |
||||||
'w-full flex-row-reverse justify-between items-center rounded-md bg-red-100 py-3 px-2 mt-5', |
"w-full flex-row-reverse justify-between items-center rounded-md bg-red-100 py-3 px-2 mt-5" |
||||||
)}> |
)} |
||||||
<Text style={tw.style('text-right text-xs text-red-900')}> |
> |
||||||
|
<Text |
||||||
|
style={[ |
||||||
|
tw("text-right text-red-900"), |
||||||
|
{ fontSize: width / 34, fontFamily: "regular" }, |
||||||
|
]} |
||||||
|
> |
||||||
{name} |
{name} |
||||||
</Text> |
</Text> |
||||||
<Image source={pdfIcon} style={{width: 40, height: 40}} /> |
<Image source={pdfIcon} style={{ width: 40, height: 40 }} /> |
||||||
</View> |
</View> |
||||||
); |
); |
||||||
} |
} |
||||||
|
|||||||
@ -1,18 +1,26 @@ |
|||||||
import React from 'react'; |
import React from "react"; |
||||||
import {View, Text, Image} from 'react-native'; |
import { View, Text, Image, Dimensions } from "react-native"; |
||||||
import tw from 'tailwind-react-native-classnames'; |
import tw from "tailwind-rn"; |
||||||
import pptIcon from '../../../assets/icons/ppt.png'; |
import pptIcon from "../../../assets/icons/ppt.png"; |
||||||
|
|
||||||
export default function PPT({name, file}) { |
const { width } = Dimensions.get("window"); |
||||||
|
|
||||||
|
export default function PPT({ name, file }) { |
||||||
return ( |
return ( |
||||||
<View |
<View |
||||||
style={tw.style( |
style={tw( |
||||||
'w-full flex-row-reverse justify-between items-center rounded-md bg-green-100 py-3 px-2 mt-5', |
"w-full flex-row-reverse justify-between items-center rounded-md bg-green-100 py-3 px-2 mt-5" |
||||||
)}> |
)} |
||||||
<Text style={tw.style('text-right text-xs text-green-900')}> |
> |
||||||
|
<Text |
||||||
|
style={[ |
||||||
|
tw("text-right text-green-900"), |
||||||
|
{ fontSize: width / 34, fontFamily: "regular" }, |
||||||
|
]} |
||||||
|
> |
||||||
{name} |
{name} |
||||||
</Text> |
</Text> |
||||||
<Image source={pptIcon} style={{width: 40, height: 40}} /> |
<Image source={pptIcon} style={{ width: 40, height: 40 }} /> |
||||||
</View> |
</View> |
||||||
); |
); |
||||||
} |
} |
||||||
|
|||||||
@ -1,14 +1,23 @@ |
|||||||
import React from 'react'; |
import React from "react"; |
||||||
import {View, Text} from 'react-native'; |
import { View, Text, Dimensions } from "react-native"; |
||||||
import tw from 'tailwind-react-native-classnames'; |
import tw from "tailwind-rn"; |
||||||
|
|
||||||
export default function Video({name, file}) { |
const {width} = Dimensions.get("window"); |
||||||
return ( |
|
||||||
<View style={tw.style('w-full flex-col mt-5')}> |
|
||||||
<Text style={tw.style('w-full text-right text-xs text-green-900 mb-2')}>{name}</Text> |
|
||||||
<View style={[tw.style('w-full bg-blue-200 rounded-md'), {minHeight : 200}]}> |
|
||||||
|
|
||||||
</View> |
export default function Video({ name, file }) { |
||||||
|
return ( |
||||||
|
<View style={tw("w-full flex-col mt-5")}> |
||||||
|
<Text |
||||||
|
style={[ |
||||||
|
tw("w-full text-right text-green-900 mb-2"), |
||||||
|
{ fontSize: width / 34, fontFamily: "bold" }, |
||||||
|
]} |
||||||
|
> |
||||||
|
{name} |
||||||
|
</Text> |
||||||
|
<View |
||||||
|
style={[tw("w-full bg-blue-200 rounded-md"), { minHeight: 200 }]} |
||||||
|
></View> |
||||||
</View> |
</View> |
||||||
); |
); |
||||||
} |
} |
||||||
|
|||||||
@ -1,11 +1,22 @@ |
|||||||
import React from 'react'; |
import React from "react"; |
||||||
import {View, Text} from 'react-native'; |
import { View, Text, Dimensions } from "react-native"; |
||||||
import tw from 'tailwind-react-native-classnames'; |
import tw from "tailwind-rn"; |
||||||
|
import MusicPlayer from "../../../components/MusicPlayer"; |
||||||
|
|
||||||
export default function Voice({name, file}) { |
const { width } = Dimensions.get("window"); |
||||||
|
|
||||||
|
export default function Voice({ name, file }) { |
||||||
return ( |
return ( |
||||||
<View style={tw.style('w-full flex-col rounded-md bg-green-200 py-3 px-2 mt-4')}> |
<View style={tw("w-full flex-col rounded-md bg-green-200 py-3 px-2 mt-4")}> |
||||||
<Text style={tw.style('w-full text-right text-xs text-green-900')}>{name}</Text> |
<Text |
||||||
|
style={[ |
||||||
|
tw("w-full text-right text-xs text-green-900"), |
||||||
|
{ fontSize: width / 34, fontFamily: "regular" }, |
||||||
|
]} |
||||||
|
> |
||||||
|
{name} |
||||||
|
</Text> |
||||||
|
<MusicPlayer /> |
||||||
</View> |
</View> |
||||||
); |
); |
||||||
} |
} |
||||||
|
|||||||
@ -1,44 +1,83 @@ |
|||||||
import React from 'react'; |
import React from "react"; |
||||||
import {View, Text, ScrollView, SafeAreaView, Image} from 'react-native'; |
import { View, Text, Image, Dimensions } from "react-native"; |
||||||
import tw from 'tailwind-react-native-classnames'; |
import tw from "tailwind-rn"; |
||||||
|
import Tab from "../Tab"; |
||||||
|
import Colors from "../../../constants/Colors"; |
||||||
|
const { width, height } = Dimensions.get("window"); |
||||||
|
|
||||||
|
export default function Content({ data }) { |
||||||
export default function Content({data}) { |
|
||||||
return ( |
return ( |
||||||
<SafeAreaView> |
<View style={tw("flex-1 flex flex-col px-4 pb-20")}> |
||||||
<ScrollView> |
<View style={tw("flex flex-1 flex-col")}> |
||||||
<View style={tw.style('flex flex-1 flex-col px-3')}> |
<View style={tw("flex w-full flex-row-reverse justify-between")}> |
||||||
<View |
<View style={tw("flex flex-row-reverse")}> |
||||||
style={tw.style('flex w-full flex-row-reverse justify-between')}> |
<Image |
||||||
<View style={tw.style('flex flex-row-reverse')}> |
source={{ uri: "https://dnvn.ir/api/v1/file/2105" }} |
||||||
<Image |
style={[{ width: 80, height: 120 }, tw("rounded-md")]} |
||||||
source={{uri: 'https://dnvn.ir/api/v1/file/2094'}} |
/> |
||||||
style={{width: 80, height: 120}} |
<View style={tw("flex flex-col items-end mr-3")}> |
||||||
/> |
<Text |
||||||
<View style={tw.style('flex flex-col items-end')}> |
style={{ |
||||||
<Text>{data.name}</Text> |
fontFamily: "bold", |
||||||
<Text>{data.grade}</Text> |
fontSize: width / 27, |
||||||
<Text>{`شما در حال مشاهده `}</Text> |
color: Colors.theme1.light.blue6, |
||||||
</View> |
}} |
||||||
|
> |
||||||
|
{data.name} |
||||||
|
</Text> |
||||||
|
<Text |
||||||
|
style={[ |
||||||
|
tw("mt-1"), |
||||||
|
{ |
||||||
|
fontFamily: "regular", |
||||||
|
fontSize: width / 34, |
||||||
|
color: Colors.theme1.light.blue5, |
||||||
|
}, |
||||||
|
]} |
||||||
|
> |
||||||
|
{data.grade} |
||||||
|
</Text> |
||||||
|
<Text |
||||||
|
style={[ |
||||||
|
tw("mt-1"), |
||||||
|
{ |
||||||
|
fontFamily: "regular", |
||||||
|
fontSize: width / 34, |
||||||
|
color: Colors.theme1.light.blue5, |
||||||
|
}, |
||||||
|
]} |
||||||
|
>{`شما در حال مشاهده صفحه ${data.page} هستید.`}</Text> |
||||||
</View> |
</View> |
||||||
{/* <Image source={} /> */} |
|
||||||
</View> |
</View> |
||||||
</View> |
</View> |
||||||
</ScrollView> |
</View> |
||||||
</SafeAreaView> |
<Tab |
||||||
|
data={{ |
||||||
|
voice: data.voice, |
||||||
|
video: data.video, |
||||||
|
pdf: data.pdf, |
||||||
|
ppt: data.ppt, |
||||||
|
links: data.links, |
||||||
|
}} |
||||||
|
/> |
||||||
|
</View> |
||||||
); |
); |
||||||
} |
} |
||||||
|
|
||||||
Content.defaultProps = { |
Content.defaultProps = { |
||||||
data: { |
data: { |
||||||
name: 'ریاضیات گسسته خیلی پیشرفته', |
name: "ریاضیات گسسته خیلی پیشرفته", |
||||||
grade: 'پایه هفتم ابتدایی', |
grade: "پایه هفتم ابتدایی", |
||||||
page: '67', |
page: "67", |
||||||
percent: '62', |
percent: "62", |
||||||
voice: null, |
voice: { name: "استاد رضایی: فصل پنجم توضیح در مورد آتش فشان ها", file: 1 }, |
||||||
video: null, |
video: { name: "ویدئوی آزمایش آتشفشان سرکه ای", file: 1 }, |
||||||
pdf: null, |
pdf: { name: "فایل پاورپوینت ارائه درس آتشفشان ها", file: 1 }, |
||||||
ppt: null, |
ppt: { name: "فایل پاورپوینت ارائه درس آتشفشان ها", file: 1 }, |
||||||
links: null, |
links: [ |
||||||
|
"وبسایت آموزشی دانوین", |
||||||
|
"وبسایت رسمی مدیریت راهبردی کشور", |
||||||
|
"سازمان تبلیغات صنایع سبک ", |
||||||
|
], |
||||||
}, |
}, |
||||||
}; |
}; |
||||||
|
|||||||
@ -0,0 +1,86 @@ |
|||||||
|
import React, { useState, useEffect } from "react"; |
||||||
|
import { |
||||||
|
View, |
||||||
|
Text, |
||||||
|
Image, |
||||||
|
TouchableOpacity, |
||||||
|
Dimensions, |
||||||
|
ImageBackground, |
||||||
|
} from "react-native"; |
||||||
|
import { useNavigation } from "@react-navigation/native"; |
||||||
|
import tw from "tailwind-rn"; |
||||||
|
import { BarCodeScanner } from "expo-barcode-scanner"; |
||||||
|
import Colors from "../../../constants/Colors"; |
||||||
|
|
||||||
|
const { width, height } = Dimensions.get("window"); |
||||||
|
|
||||||
|
//assets
|
||||||
|
import laptopImage from "../assets/laptop.png"; |
||||||
|
|
||||||
|
export default function Scan({}) { |
||||||
|
const navigation = useNavigation(); |
||||||
|
const [hasPermission, setHasPermission] = useState(null); |
||||||
|
const [scanned, setScanned] = useState(false); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
(async () => { |
||||||
|
const { status } = await BarCodeScanner.requestPermissionsAsync(); |
||||||
|
setHasPermission(status === "granted"); |
||||||
|
})(); |
||||||
|
}, []); |
||||||
|
|
||||||
|
const handleBarCodeScanned = ({ type, data }) => { |
||||||
|
setScanned(true); |
||||||
|
alert(`Bar code with type ${type} and data ${data} has been scanned!`); |
||||||
|
}; |
||||||
|
|
||||||
|
if (hasPermission === null) { |
||||||
|
return <Text>Requesting for camera permission</Text>; |
||||||
|
} |
||||||
|
if (hasPermission === false) { |
||||||
|
return <Text>No access to camera</Text>; |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<ImageBackground |
||||||
|
source={laptopImage} |
||||||
|
resizeMode="cover" |
||||||
|
style={[tw("w-full"), { height: height - 78 }]} |
||||||
|
> |
||||||
|
<View |
||||||
|
style={tw( |
||||||
|
"flex-1 flex flex-col justify-evenly items-center bg-gray-800 bg-opacity-80" |
||||||
|
)} |
||||||
|
> |
||||||
|
{/* <View style={{width : '100%', height : 300}}> |
||||||
|
<BarCodeScanner |
||||||
|
onBarCodeScanned={scanned ? undefined : handleBarCodeScanned} |
||||||
|
style={{ width: "100%", height: '100%' }} |
||||||
|
/> |
||||||
|
</View> */} |
||||||
|
|
||||||
|
<View |
||||||
|
style={[ |
||||||
|
{ width: height / 2.5, height: height / 2.5 }, |
||||||
|
tw("bg-white rounded-2xl"), |
||||||
|
]} |
||||||
|
></View> |
||||||
|
{/* {scanned && ( */} |
||||||
|
<TouchableOpacity |
||||||
|
onPress={() => navigation.goBack()} |
||||||
|
style={[ |
||||||
|
tw("py-2.5 rounded-full flex justify-center flex-row"), |
||||||
|
{ |
||||||
|
width: height / 3.5, |
||||||
|
borderWidth: 1, |
||||||
|
borderColor: Colors.theme1.light.blue8, |
||||||
|
}, |
||||||
|
]} |
||||||
|
> |
||||||
|
<Text style={{ color: "white", fontSize: width / 27 }}>بازگشت</Text> |
||||||
|
</TouchableOpacity> |
||||||
|
</View> |
||||||
|
{/* )} */} |
||||||
|
</ImageBackground> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,289 @@ |
|||||||
|
import React, { useState } from "react"; |
||||||
|
import { View, Text, TouchableOpacity, Dimensions } from "react-native"; |
||||||
|
import tw from "tailwind-rn"; |
||||||
|
import Colors from "../../../constants/Colors"; |
||||||
|
import Voice from "../Content/Voice"; |
||||||
|
import Video from "../Content/Video"; |
||||||
|
import PPT from "../Content/PPT"; |
||||||
|
import PDF from "../Content/PDF"; |
||||||
|
import Links from "../Content/Links"; |
||||||
|
|
||||||
|
const { width, height } = Dimensions.get("window"); |
||||||
|
|
||||||
|
//assets
|
||||||
|
|
||||||
|
export default function Tab({ data }) { |
||||||
|
const [dataType, setDataType] = useState("all"); |
||||||
|
return ( |
||||||
|
<View |
||||||
|
style={[ |
||||||
|
tw("w-full flex flex-col rounded-md overflow-hidden mt-4"), |
||||||
|
{ borderWidth: 1, borderColor: Colors.theme1.light.blue5 }, |
||||||
|
]} |
||||||
|
> |
||||||
|
<View style={tw("w-full flex flex-row-reverse justify-between px-0.5")}> |
||||||
|
<TouchableOpacity |
||||||
|
onPress={() => setDataType("all")} |
||||||
|
style={[ |
||||||
|
tw("py-2 w-1/6"), |
||||||
|
{ |
||||||
|
borderBottomWidth: 1, |
||||||
|
borderColor: |
||||||
|
dataType === "all" |
||||||
|
? Colors.theme1.light.blue3 |
||||||
|
: Colors.theme1.light.blue5, |
||||||
|
backgroundColor: |
||||||
|
dataType === "all" ? Colors.theme1.light.blue3 : "white", |
||||||
|
}, |
||||||
|
]} |
||||||
|
> |
||||||
|
<Text |
||||||
|
style={{ |
||||||
|
fontSize: width / 31, |
||||||
|
color: "#707070", |
||||||
|
fontFamily: "light", |
||||||
|
}} |
||||||
|
style={{ |
||||||
|
fontSize: width / 38, |
||||||
|
fontFamily: dataType === "all" ? "bold" : "light", |
||||||
|
textAlign: "center", |
||||||
|
color: Colors.theme1.light.blue5, |
||||||
|
}} |
||||||
|
> |
||||||
|
تمامی محتوا |
||||||
|
</Text> |
||||||
|
</TouchableOpacity> |
||||||
|
<TouchableOpacity |
||||||
|
onPress={() => setDataType("voice")} |
||||||
|
style={[ |
||||||
|
tw("py-2 w-1/6"), |
||||||
|
{ |
||||||
|
borderBottomWidth: 1, |
||||||
|
borderColor: |
||||||
|
dataType === "voice" |
||||||
|
? Colors.theme1.light.blue3 |
||||||
|
: Colors.theme1.light.blue5, |
||||||
|
backgroundColor: |
||||||
|
dataType === "voice" ? Colors.theme1.light.blue3 : "white", |
||||||
|
}, |
||||||
|
]} |
||||||
|
> |
||||||
|
<Text |
||||||
|
style={{ |
||||||
|
fontSize: width / 38, |
||||||
|
fontFamily: dataType === "voice" ? "bold" : "light", |
||||||
|
textAlign: "center", |
||||||
|
color: Colors.theme1.light.blue5, |
||||||
|
}} |
||||||
|
> |
||||||
|
صوت |
||||||
|
</Text> |
||||||
|
</TouchableOpacity> |
||||||
|
<TouchableOpacity |
||||||
|
onPress={() => setDataType("video")} |
||||||
|
style={[ |
||||||
|
tw("py-2 w-1/6"), |
||||||
|
{ |
||||||
|
borderBottomWidth: 1, |
||||||
|
borderColor: |
||||||
|
dataType === "video" |
||||||
|
? Colors.theme1.light.blue3 |
||||||
|
: Colors.theme1.light.blue5, |
||||||
|
backgroundColor: |
||||||
|
dataType === "video" ? Colors.theme1.light.blue3 : "white", |
||||||
|
}, |
||||||
|
]} |
||||||
|
> |
||||||
|
<Text |
||||||
|
style={{ |
||||||
|
fontSize: width / 38, |
||||||
|
fontFamily: dataType === "video" ? "bold" : "light", |
||||||
|
textAlign: "center", |
||||||
|
color: Colors.theme1.light.blue5, |
||||||
|
}} |
||||||
|
> |
||||||
|
ویدئو |
||||||
|
</Text> |
||||||
|
</TouchableOpacity> |
||||||
|
<TouchableOpacity |
||||||
|
onPress={() => setDataType("pdf")} |
||||||
|
style={[ |
||||||
|
tw("py-2 w-1/6"), |
||||||
|
{ |
||||||
|
borderBottomWidth: 1, |
||||||
|
borderColor: |
||||||
|
dataType === "pdf" |
||||||
|
? Colors.theme1.light.blue3 |
||||||
|
: Colors.theme1.light.blue5, |
||||||
|
backgroundColor: |
||||||
|
dataType === "pdf" ? Colors.theme1.light.blue3 : "white", |
||||||
|
}, |
||||||
|
]} |
||||||
|
> |
||||||
|
<Text |
||||||
|
style={{ |
||||||
|
fontSize: width / 38, |
||||||
|
fontFamily: dataType === "pdf" ? "bold" : "light", |
||||||
|
textAlign: "center", |
||||||
|
color: Colors.theme1.light.blue5, |
||||||
|
}} |
||||||
|
> |
||||||
|
پی دی اف |
||||||
|
</Text> |
||||||
|
</TouchableOpacity> |
||||||
|
<TouchableOpacity |
||||||
|
onPress={() => setDataType("ppt")} |
||||||
|
style={[ |
||||||
|
tw("py-2 w-1/6"), |
||||||
|
{ |
||||||
|
borderBottomWidth: 1, |
||||||
|
borderColor: |
||||||
|
dataType === "ppt" |
||||||
|
? Colors.theme1.light.blue3 |
||||||
|
: Colors.theme1.light.blue5, |
||||||
|
backgroundColor: |
||||||
|
dataType === "ppt" ? Colors.theme1.light.blue3 : "white", |
||||||
|
}, |
||||||
|
]} |
||||||
|
> |
||||||
|
<Text |
||||||
|
style={{ |
||||||
|
fontSize: width / 38, |
||||||
|
fontFamily: dataType === "ppt" ? "bold" : "light", |
||||||
|
textAlign: "center", |
||||||
|
color: Colors.theme1.light.blue5, |
||||||
|
}} |
||||||
|
> |
||||||
|
پاور پوینت |
||||||
|
</Text> |
||||||
|
</TouchableOpacity> |
||||||
|
<TouchableOpacity |
||||||
|
onPress={() => setDataType("links")} |
||||||
|
style={[ |
||||||
|
tw("py-2 w-1/6"), |
||||||
|
{ |
||||||
|
borderBottomWidth: 1, |
||||||
|
borderColor: |
||||||
|
dataType === "links" |
||||||
|
? Colors.theme1.light.blue3 |
||||||
|
: Colors.theme1.light.blue5, |
||||||
|
backgroundColor: |
||||||
|
dataType === "links" ? Colors.theme1.light.blue3 : "white", |
||||||
|
}, |
||||||
|
]} |
||||||
|
> |
||||||
|
<Text |
||||||
|
style={{ |
||||||
|
fontSize: width / 38, |
||||||
|
fontFamily: dataType === "links" ? "bold" : "light", |
||||||
|
textAlign: "center", |
||||||
|
color: Colors.theme1.light.blue5, |
||||||
|
}} |
||||||
|
> |
||||||
|
لینک ها |
||||||
|
</Text> |
||||||
|
</TouchableOpacity> |
||||||
|
</View> |
||||||
|
<View style={tw("flex flex-col w-full p-4")}> |
||||||
|
{dataType === "all" && ( |
||||||
|
<> |
||||||
|
{data.voice && ( |
||||||
|
<Voice name={data.voice.name} file={data.voice.file} /> |
||||||
|
)} |
||||||
|
{data.video && ( |
||||||
|
<Video name={data.video.name} file={data.voice.file} /> |
||||||
|
)} |
||||||
|
{data.ppt && <PPT name={data.ppt.name} file={data.ppt.file} />} |
||||||
|
{data.pdf && <PDF name={data.ppt.name} file={data.ppt.file} />} |
||||||
|
{data.links && <Links links={data.links} />} |
||||||
|
</> |
||||||
|
)} |
||||||
|
{dataType === "voice" && ( |
||||||
|
<> |
||||||
|
{data.voice ? ( |
||||||
|
<Voice name={data.voice.name} file={data.voice.file} /> |
||||||
|
) : ( |
||||||
|
<Text |
||||||
|
style={{ |
||||||
|
fontSize: width / 31, |
||||||
|
color: "#707070", |
||||||
|
fontFamily: "light", |
||||||
|
}} |
||||||
|
> |
||||||
|
فایل صدا یافت نشد. |
||||||
|
</Text> |
||||||
|
)} |
||||||
|
</> |
||||||
|
)} |
||||||
|
{dataType === "video" && ( |
||||||
|
<> |
||||||
|
{data.video ? ( |
||||||
|
<Video name={data.video.name} file={data.voice.file} /> |
||||||
|
) : ( |
||||||
|
<Text |
||||||
|
style={{ |
||||||
|
fontSize: width / 31, |
||||||
|
color: "#707070", |
||||||
|
fontFamily: "light", |
||||||
|
}} |
||||||
|
> |
||||||
|
فایل تصویری یافت نشد. |
||||||
|
</Text> |
||||||
|
)} |
||||||
|
</> |
||||||
|
)} |
||||||
|
{dataType === "ppt" && ( |
||||||
|
<> |
||||||
|
{data.ppt ? ( |
||||||
|
<PPT name={data.ppt.name} file={data.ppt.file} /> |
||||||
|
) : ( |
||||||
|
<Text |
||||||
|
style={{ |
||||||
|
fontSize: width / 31, |
||||||
|
color: "#707070", |
||||||
|
fontFamily: "light", |
||||||
|
}} |
||||||
|
> |
||||||
|
فایل پاورپوینت یافت نشد. |
||||||
|
</Text> |
||||||
|
)} |
||||||
|
</> |
||||||
|
)} |
||||||
|
{dataType === "pdf" && ( |
||||||
|
<> |
||||||
|
{data.pdf ? ( |
||||||
|
<PDF name={data.pdf.name} file={data.pdf.file} /> |
||||||
|
) : ( |
||||||
|
<Text |
||||||
|
style={{ |
||||||
|
fontSize: width / 31, |
||||||
|
color: "#707070", |
||||||
|
fontFamily: "light", |
||||||
|
}} |
||||||
|
> |
||||||
|
فایل پی دی اف یافت نشد. |
||||||
|
</Text> |
||||||
|
)} |
||||||
|
</> |
||||||
|
)} |
||||||
|
{dataType === "links" && ( |
||||||
|
<> |
||||||
|
{data.links ? ( |
||||||
|
<Links name={data.links.name} links={data.links} /> |
||||||
|
) : ( |
||||||
|
<Text |
||||||
|
style={{ |
||||||
|
fontSize: width / 31, |
||||||
|
color: "#707070", |
||||||
|
fontFamily: "light", |
||||||
|
}} |
||||||
|
> |
||||||
|
لینکی پیدا نشد. |
||||||
|
</Text> |
||||||
|
)} |
||||||
|
</> |
||||||
|
)} |
||||||
|
</View> |
||||||
|
</View> |
||||||
|
); |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 1.1 MiB |
@ -1,36 +1,54 @@ |
|||||||
import React from 'react'; |
import React from "react"; |
||||||
import {View, Text, Pressable, TextInput, Dimensions} from 'react-native'; |
import { |
||||||
import tw from 'tailwind-react-native-classnames'; |
View, |
||||||
const width = Dimensions.get('window').width; |
Text, |
||||||
|
Pressable, |
||||||
|
TextInput, |
||||||
|
Dimensions, |
||||||
|
KeyboardAvoidingView, |
||||||
|
} from "react-native"; |
||||||
|
import tw from "tailwind-react-native-classnames"; |
||||||
|
const width = Dimensions.get("window").width; |
||||||
|
|
||||||
export default function Code({}) { |
export default function Code({}) { |
||||||
return ( |
return ( |
||||||
<View |
<KeyboardAvoidingView |
||||||
style={tw.style('flex w-full flex-col items-end mt-5 overflow-hidden')}> |
enabled |
||||||
|
style={tw.style("flex w-full flex-col items-end mt-5 overflow-hidden")} |
||||||
|
> |
||||||
<View |
<View |
||||||
style={tw.style( |
style={tw.style( |
||||||
'flex w-full flex-row-reverse border border-blue-300 rounded-md mt-3', |
"flex w-full flex-row-reverse border border-blue-300 rounded-md mt-3" |
||||||
)}> |
)} |
||||||
|
> |
||||||
<TextInput |
<TextInput |
||||||
style={[ |
style={[ |
||||||
tw.style('border-0 flex-1 text-right pr-4'), |
tw.style("border-0 flex-1 text-right pr-4"), |
||||||
{fontSize: width / 36, fontFamily: 'light'}, |
{ fontSize: width / 36, fontFamily: "light" }, |
||||||
]} |
]} |
||||||
placeholder={'کد تخفیف دارید ؟'} |
placeholder={"کد تخفیف دارید ؟"} |
||||||
placeholderTextColor="#707070" |
placeholderTextColor="#707070" |
||||||
/> |
/> |
||||||
<Pressable |
<Pressable |
||||||
style={[ |
style={[ |
||||||
tw.style('py-2 px-5'), |
tw.style("py-2 px-5"), |
||||||
{ |
{ |
||||||
backgroundColor: '#196EC0', |
backgroundColor: "#196EC0", |
||||||
borderTopLeftRadius: 5, |
borderTopLeftRadius: 5, |
||||||
borderBottomLeftRadius: 5, |
borderBottomLeftRadius: 5, |
||||||
}, |
}, |
||||||
]}> |
]} |
||||||
<Text style={[tw.style('text-white'), {fontSize: width / 31, fontFamily: 'regular'}]}>ثبت کد</Text> |
> |
||||||
|
<Text |
||||||
|
style={[ |
||||||
|
tw.style("text-white"), |
||||||
|
{ fontSize: width / 31, fontFamily: "regular" }, |
||||||
|
]} |
||||||
|
> |
||||||
|
ثبت کد |
||||||
|
</Text> |
||||||
</Pressable> |
</Pressable> |
||||||
</View> |
</View> |
||||||
</View> |
</KeyboardAvoidingView> |
||||||
); |
); |
||||||
} |
} |
||||||
|
|||||||
Loading…
Reference in new issue