|
|
|
@ -1,25 +1,29 @@ |
|
|
|
|
import React, { useState } from "react"; |
|
|
|
|
import { View, Text, TouchableOpacity, Dimensions } from "react-native"; |
|
|
|
|
import tw from "tailwind-rn"; |
|
|
|
|
import Colors from "../../../constants/Colors"; |
|
|
|
|
import { connect } from "react-redux"; |
|
|
|
|
|
|
|
|
|
//components
|
|
|
|
|
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} = Dimensions.get("window"); |
|
|
|
|
|
|
|
|
|
//assets
|
|
|
|
|
import tw from "tailwind-rn"; |
|
|
|
|
import Colors from "../../../constants/Colors"; |
|
|
|
|
|
|
|
|
|
const { width } = Dimensions.get("window"); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export default function Tab({ data }) { |
|
|
|
|
function Tab({ data, theme }) { |
|
|
|
|
const [dataType, setDataType] = useState("all"); |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<View |
|
|
|
|
style={[ |
|
|
|
|
tw("w-full flex rounded-md overflow-hidden mt-4"), |
|
|
|
|
{ borderWidth: 1, borderColor: Colors.theme1.light.blue5 }, |
|
|
|
|
{ borderWidth: 1, borderColor: Colors.theme1[theme].blue5 }, |
|
|
|
|
]} |
|
|
|
|
> |
|
|
|
|
<View style={tw("w-full flex flex-row-reverse justify-between px-0.5")}> |
|
|
|
@ -31,24 +35,19 @@ export default function Tab({ data }) { |
|
|
|
|
borderBottomWidth: 1, |
|
|
|
|
borderColor: |
|
|
|
|
dataType === "all" |
|
|
|
|
? Colors.theme1.light.blue3 |
|
|
|
|
: Colors.theme1.light.blue5, |
|
|
|
|
? Colors.theme1[theme].blue3 |
|
|
|
|
: Colors.theme1[theme].blue5, |
|
|
|
|
backgroundColor: |
|
|
|
|
dataType === "all" ? Colors.theme1.light.blue3 : "white", |
|
|
|
|
dataType === "all" ? Colors.theme1[theme].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, |
|
|
|
|
color: Colors.theme1[theme].blue5, |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
تمامی محتوا |
|
|
|
@ -62,10 +61,10 @@ export default function Tab({ data }) { |
|
|
|
|
borderBottomWidth: 1, |
|
|
|
|
borderColor: |
|
|
|
|
dataType === "voice" |
|
|
|
|
? Colors.theme1.light.blue3 |
|
|
|
|
: Colors.theme1.light.blue5, |
|
|
|
|
? Colors.theme1[theme].blue3 |
|
|
|
|
: Colors.theme1[theme].blue5, |
|
|
|
|
backgroundColor: |
|
|
|
|
dataType === "voice" ? Colors.theme1.light.blue3 : "white", |
|
|
|
|
dataType === "voice" ? Colors.theme1[theme].blue3 : "white", |
|
|
|
|
}, |
|
|
|
|
]} |
|
|
|
|
> |
|
|
|
@ -74,7 +73,7 @@ export default function Tab({ data }) { |
|
|
|
|
fontSize: width / 38, |
|
|
|
|
fontFamily: dataType === "voice" ? "bold" : "light", |
|
|
|
|
textAlign: "center", |
|
|
|
|
color: Colors.theme1.light.blue5, |
|
|
|
|
color: Colors.theme1[theme].blue5, |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
صوت |
|
|
|
@ -88,10 +87,10 @@ export default function Tab({ data }) { |
|
|
|
|
borderBottomWidth: 1, |
|
|
|
|
borderColor: |
|
|
|
|
dataType === "video" |
|
|
|
|
? Colors.theme1.light.blue3 |
|
|
|
|
: Colors.theme1.light.blue5, |
|
|
|
|
? Colors.theme1[theme].blue3 |
|
|
|
|
: Colors.theme1[theme].blue5, |
|
|
|
|
backgroundColor: |
|
|
|
|
dataType === "video" ? Colors.theme1.light.blue3 : "white", |
|
|
|
|
dataType === "video" ? Colors.theme1[theme].blue3 : "white", |
|
|
|
|
}, |
|
|
|
|
]} |
|
|
|
|
> |
|
|
|
@ -100,7 +99,7 @@ export default function Tab({ data }) { |
|
|
|
|
fontSize: width / 38, |
|
|
|
|
fontFamily: dataType === "video" ? "bold" : "light", |
|
|
|
|
textAlign: "center", |
|
|
|
|
color: Colors.theme1.light.blue5, |
|
|
|
|
color: Colors.theme1[theme].blue5, |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
ویدئو |
|
|
|
@ -114,10 +113,10 @@ export default function Tab({ data }) { |
|
|
|
|
borderBottomWidth: 1, |
|
|
|
|
borderColor: |
|
|
|
|
dataType === "pdf" |
|
|
|
|
? Colors.theme1.light.blue3 |
|
|
|
|
: Colors.theme1.light.blue5, |
|
|
|
|
? Colors.theme1[theme].blue3 |
|
|
|
|
: Colors.theme1[theme].blue5, |
|
|
|
|
backgroundColor: |
|
|
|
|
dataType === "pdf" ? Colors.theme1.light.blue3 : "white", |
|
|
|
|
dataType === "pdf" ? Colors.theme1[theme].blue3 : "white", |
|
|
|
|
}, |
|
|
|
|
]} |
|
|
|
|
> |
|
|
|
@ -126,7 +125,7 @@ export default function Tab({ data }) { |
|
|
|
|
fontSize: width / 38, |
|
|
|
|
fontFamily: dataType === "pdf" ? "bold" : "light", |
|
|
|
|
textAlign: "center", |
|
|
|
|
color: Colors.theme1.light.blue5, |
|
|
|
|
color: Colors.theme1[theme].blue5, |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
پی دی اف |
|
|
|
@ -140,10 +139,10 @@ export default function Tab({ data }) { |
|
|
|
|
borderBottomWidth: 1, |
|
|
|
|
borderColor: |
|
|
|
|
dataType === "ppt" |
|
|
|
|
? Colors.theme1.light.blue3 |
|
|
|
|
: Colors.theme1.light.blue5, |
|
|
|
|
? Colors.theme1[theme].blue3 |
|
|
|
|
: Colors.theme1[theme].blue5, |
|
|
|
|
backgroundColor: |
|
|
|
|
dataType === "ppt" ? Colors.theme1.light.blue3 : "white", |
|
|
|
|
dataType === "ppt" ? Colors.theme1[theme].blue3 : "white", |
|
|
|
|
}, |
|
|
|
|
]} |
|
|
|
|
> |
|
|
|
@ -152,7 +151,7 @@ export default function Tab({ data }) { |
|
|
|
|
fontSize: width / 38, |
|
|
|
|
fontFamily: dataType === "ppt" ? "bold" : "light", |
|
|
|
|
textAlign: "center", |
|
|
|
|
color: Colors.theme1.light.blue5, |
|
|
|
|
color: Colors.theme1[theme].blue5, |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
پاور پوینت |
|
|
|
@ -166,10 +165,10 @@ export default function Tab({ data }) { |
|
|
|
|
borderBottomWidth: 1, |
|
|
|
|
borderColor: |
|
|
|
|
dataType === "links" |
|
|
|
|
? Colors.theme1.light.blue3 |
|
|
|
|
: Colors.theme1.light.blue5, |
|
|
|
|
? Colors.theme1[theme].blue3 |
|
|
|
|
: Colors.theme1[theme].blue5, |
|
|
|
|
backgroundColor: |
|
|
|
|
dataType === "links" ? Colors.theme1.light.blue3 : "white", |
|
|
|
|
dataType === "links" ? Colors.theme1[theme].blue3 : "white", |
|
|
|
|
}, |
|
|
|
|
]} |
|
|
|
|
> |
|
|
|
@ -178,7 +177,7 @@ export default function Tab({ data }) { |
|
|
|
|
fontSize: width / 38, |
|
|
|
|
fontFamily: dataType === "links" ? "bold" : "light", |
|
|
|
|
textAlign: "center", |
|
|
|
|
color: Colors.theme1.light.blue5, |
|
|
|
|
color: Colors.theme1[theme].blue5, |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
لینک ها |
|
|
|
@ -188,12 +187,8 @@ export default function Tab({ data }) { |
|
|
|
|
<View style={tw("flex w-full p-4")}> |
|
|
|
|
{dataType === "all" && ( |
|
|
|
|
<> |
|
|
|
|
{data.voice && ( |
|
|
|
|
<Voice data={data.voice} /> |
|
|
|
|
)} |
|
|
|
|
{data.video && ( |
|
|
|
|
<Video data={data.video} /> |
|
|
|
|
)} |
|
|
|
|
{data.voice && <Voice data={data.voice} />} |
|
|
|
|
{data.video && <Video data={data.video} />} |
|
|
|
|
{data.ppt && <PPT data={data.ppt} />} |
|
|
|
|
{data.pdf && <PDF data={data.pdf} />} |
|
|
|
|
{data.links && <Links data={data.links} />} |
|
|
|
@ -288,3 +283,9 @@ export default function Tab({ data }) { |
|
|
|
|
</View> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const mapStateToProps = (state) => ({ |
|
|
|
|
theme: state.publicApi.theme, |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
export default connect(mapStateToProps)(Tab); |
|
|
|
|