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 {View, Text, Image, Pressable} from 'react-native'; |
||||
import tw from 'tailwind-react-native-classnames'; |
||||
import linkIcon from '../../../assets/icons/link.png'; |
||||
import React from "react"; |
||||
import { View, Text, Image, Pressable, Dimensions } from "react-native"; |
||||
import tw from "tailwind-rn"; |
||||
import linkIcon from "../../../assets/icons/link.png"; |
||||
|
||||
export default function Links({links}) { |
||||
const { width } = Dimensions.get("window"); |
||||
|
||||
export default function Links({ links }) { |
||||
return ( |
||||
<View |
||||
style={tw.style( |
||||
'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> |
||||
style={tw( |
||||
"w-full flex-row-reverse justify-between items-center rounded-md bg-yellow-100 py-3 px-2 mt-5" |
||||
)} |
||||
> |
||||
<View style={tw("flex flex-col items-end")}> |
||||
<Text style={{ fontSize: width / 31, fontFamily: "bold" }}> |
||||
لینک ها |
||||
</Text> |
||||
{links.map((link, i) => ( |
||||
<Pressable style={tw.style('')} key={i}> |
||||
<Text>{link}</Text> |
||||
<Pressable style={tw("mt-1")} key={i}> |
||||
<Text style={{ fontSize: width / 34, fontFamily: "light" }}> |
||||
{link} |
||||
</Text> |
||||
</Pressable> |
||||
))} |
||||
</View> |
||||
<Image source={linkIcon} style={{width: 40, height: 40}} /> |
||||
<Image source={linkIcon} style={{ width: 40, height: 40 }} /> |
||||
</View> |
||||
); |
||||
} |
||||
|
||||
@ -1,18 +1,26 @@ |
||||
import React from 'react'; |
||||
import {View, Text, Image} from 'react-native'; |
||||
import tw from 'tailwind-react-native-classnames'; |
||||
import pdfIcon from '../../../assets/icons/pdf.png'; |
||||
import React from "react"; |
||||
import { View, Text, Image, Dimensions } from "react-native"; |
||||
import tw from "tailwind-rn"; |
||||
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 ( |
||||
<View |
||||
style={tw.style( |
||||
'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')}> |
||||
style={tw( |
||||
"w-full flex-row-reverse justify-between items-center rounded-md bg-red-100 py-3 px-2 mt-5" |
||||
)} |
||||
> |
||||
<Text |
||||
style={[ |
||||
tw("text-right text-red-900"), |
||||
{ fontSize: width / 34, fontFamily: "regular" }, |
||||
]} |
||||
> |
||||
{name} |
||||
</Text> |
||||
<Image source={pdfIcon} style={{width: 40, height: 40}} /> |
||||
<Image source={pdfIcon} style={{ width: 40, height: 40 }} /> |
||||
</View> |
||||
); |
||||
} |
||||
@ -1,18 +1,26 @@ |
||||
import React from 'react'; |
||||
import {View, Text, Image} from 'react-native'; |
||||
import tw from 'tailwind-react-native-classnames'; |
||||
import pptIcon from '../../../assets/icons/ppt.png'; |
||||
import React from "react"; |
||||
import { View, Text, Image, Dimensions } from "react-native"; |
||||
import tw from "tailwind-rn"; |
||||
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 ( |
||||
<View |
||||
style={tw.style( |
||||
'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')}> |
||||
style={tw( |
||||
"w-full flex-row-reverse justify-between items-center rounded-md bg-green-100 py-3 px-2 mt-5" |
||||
)} |
||||
> |
||||
<Text |
||||
style={[ |
||||
tw("text-right text-green-900"), |
||||
{ fontSize: width / 34, fontFamily: "regular" }, |
||||
]} |
||||
> |
||||
{name} |
||||
</Text> |
||||
<Image source={pptIcon} style={{width: 40, height: 40}} /> |
||||
<Image source={pptIcon} style={{ width: 40, height: 40 }} /> |
||||
</View> |
||||
); |
||||
} |
||||
@ -1,14 +1,23 @@ |
||||
import React from 'react'; |
||||
import {View, Text} from 'react-native'; |
||||
import tw from 'tailwind-react-native-classnames'; |
||||
import React from "react"; |
||||
import { View, Text, Dimensions } from "react-native"; |
||||
import tw from "tailwind-rn"; |
||||
|
||||
export default function Video({name, file}) { |
||||
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}]}> |
||||
const {width} = Dimensions.get("window"); |
||||
|
||||
</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> |
||||
); |
||||
} |
||||
|
||||
@ -1,11 +1,22 @@ |
||||
import React from 'react'; |
||||
import {View, Text} from 'react-native'; |
||||
import tw from 'tailwind-react-native-classnames'; |
||||
import React from "react"; |
||||
import { View, Text, Dimensions } from "react-native"; |
||||
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 ( |
||||
<View style={tw.style('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> |
||||
<View style={tw("w-full flex-col rounded-md bg-green-200 py-3 px-2 mt-4")}> |
||||
<Text |
||||
style={[ |
||||
tw("w-full text-right text-xs text-green-900"), |
||||
{ fontSize: width / 34, fontFamily: "regular" }, |
||||
]} |
||||
> |
||||
{name} |
||||
</Text> |
||||
<MusicPlayer /> |
||||
</View> |
||||
); |
||||
} |
||||
|
||||
@ -1,44 +1,83 @@ |
||||
import React from 'react'; |
||||
import {View, Text, ScrollView, SafeAreaView, Image} from 'react-native'; |
||||
import tw from 'tailwind-react-native-classnames'; |
||||
import React from "react"; |
||||
import { View, Text, Image, Dimensions } from "react-native"; |
||||
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 ( |
||||
<SafeAreaView> |
||||
<ScrollView> |
||||
<View style={tw.style('flex flex-1 flex-col px-3')}> |
||||
<View |
||||
style={tw.style('flex w-full flex-row-reverse justify-between')}> |
||||
<View style={tw.style('flex flex-row-reverse')}> |
||||
<Image |
||||
source={{uri: 'https://dnvn.ir/api/v1/file/2094'}} |
||||
style={{width: 80, height: 120}} |
||||
/> |
||||
<View style={tw.style('flex flex-col items-end')}> |
||||
<Text>{data.name}</Text> |
||||
<Text>{data.grade}</Text> |
||||
<Text>{`شما در حال مشاهده `}</Text> |
||||
</View> |
||||
<View style={tw("flex-1 flex flex-col px-4 pb-20")}> |
||||
<View style={tw("flex flex-1 flex-col")}> |
||||
<View style={tw("flex w-full flex-row-reverse justify-between")}> |
||||
<View style={tw("flex flex-row-reverse")}> |
||||
<Image |
||||
source={{ uri: "https://dnvn.ir/api/v1/file/2105" }} |
||||
style={[{ width: 80, height: 120 }, tw("rounded-md")]} |
||||
/> |
||||
<View style={tw("flex flex-col items-end mr-3")}> |
||||
<Text |
||||
style={{ |
||||
fontFamily: "bold", |
||||
fontSize: width / 27, |
||||
color: Colors.theme1.light.blue6, |
||||
}} |
||||
> |
||||
{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> |
||||
{/* <Image source={} /> */} |
||||
</View> |
||||
</View> |
||||
</ScrollView> |
||||
</SafeAreaView> |
||||
</View> |
||||
<Tab |
||||
data={{ |
||||
voice: data.voice, |
||||
video: data.video, |
||||
pdf: data.pdf, |
||||
ppt: data.ppt, |
||||
links: data.links, |
||||
}} |
||||
/> |
||||
</View> |
||||
); |
||||
} |
||||
|
||||
Content.defaultProps = { |
||||
data: { |
||||
name: 'ریاضیات گسسته خیلی پیشرفته', |
||||
grade: 'پایه هفتم ابتدایی', |
||||
page: '67', |
||||
percent: '62', |
||||
voice: null, |
||||
video: null, |
||||
pdf: null, |
||||
ppt: null, |
||||
links: null, |
||||
name: "ریاضیات گسسته خیلی پیشرفته", |
||||
grade: "پایه هفتم ابتدایی", |
||||
page: "67", |
||||
percent: "62", |
||||
voice: { name: "استاد رضایی: فصل پنجم توضیح در مورد آتش فشان ها", file: 1 }, |
||||
video: { name: "ویدئوی آزمایش آتشفشان سرکه ای", file: 1 }, |
||||
pdf: { name: "فایل پاورپوینت ارائه درس آتشفشان ها", file: 1 }, |
||||
ppt: { name: "فایل پاورپوینت ارائه درس آتشفشان ها", file: 1 }, |
||||
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 {View, Text, Pressable, TextInput, Dimensions} from 'react-native'; |
||||
import tw from 'tailwind-react-native-classnames'; |
||||
const width = Dimensions.get('window').width; |
||||
import React from "react"; |
||||
import { |
||||
View, |
||||
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({}) { |
||||
return ( |
||||
<View |
||||
style={tw.style('flex w-full flex-col items-end mt-5 overflow-hidden')}> |
||||
<KeyboardAvoidingView |
||||
enabled |
||||
style={tw.style("flex w-full flex-col items-end mt-5 overflow-hidden")} |
||||
> |
||||
<View |
||||
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 |
||||
style={[ |
||||
tw.style('border-0 flex-1 text-right pr-4'), |
||||
{fontSize: width / 36, fontFamily: 'light'}, |
||||
tw.style("border-0 flex-1 text-right pr-4"), |
||||
{ fontSize: width / 36, fontFamily: "light" }, |
||||
]} |
||||
placeholder={'کد تخفیف دارید ؟'} |
||||
placeholder={"کد تخفیف دارید ؟"} |
||||
placeholderTextColor="#707070" |
||||
/> |
||||
<Pressable |
||||
style={[ |
||||
tw.style('py-2 px-5'), |
||||
tw.style("py-2 px-5"), |
||||
{ |
||||
backgroundColor: '#196EC0', |
||||
backgroundColor: "#196EC0", |
||||
borderTopLeftRadius: 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> |
||||
</View> |
||||
</View> |
||||
</KeyboardAvoidingView> |
||||
); |
||||
} |
||||
|
||||
Loading…
Reference in new issue