Reza_ashrafi
3 years ago
parent
d13297bd6f
commit
dbd05f287a
11 changed files with 622 additions and 35 deletions
@ -0,0 +1,65 @@ |
||||
import React from "react"; |
||||
import { View, Text, FlatList, Appearance } from "react-native"; |
||||
import { connect } from "react-redux"; |
||||
import Svg, { Path } from "react-native-svg"; |
||||
|
||||
//style
|
||||
import tw from "tailwind-rn"; |
||||
import fontSize from "../../../constants/fontSize"; |
||||
import Colors from "../../../constants/Colors"; |
||||
|
||||
export const Hashtags = ({ hashtags }) => { |
||||
const colorScheme = Appearance.getColorScheme(); |
||||
const Hashtag = ({ hashtag }) => { |
||||
return ( |
||||
<Text |
||||
style={{ |
||||
fontFamily: "bold", |
||||
fontSize: fontSize.base, |
||||
color: hashtag.color, |
||||
marginHorizontal: 8, |
||||
}} |
||||
> |
||||
{"#" + " " + hashtag.title} |
||||
</Text> |
||||
); |
||||
}; |
||||
return ( |
||||
<View |
||||
style={[ |
||||
tw( |
||||
"flex flex-row-reverse py-1 pl-3 rounded-full items-center w-full mb-7" |
||||
), |
||||
{borderWidth : 2, borderColor : Colors.theme1[colorScheme].greenFF1} |
||||
]} |
||||
> |
||||
<Svg xmlns="http://www.w3.org/2000/svg" width={31.486} height={19.692}> |
||||
<Path |
||||
d="M29.012 2.475 16.628 14.859 11.91 7.782l-9.435 9.436" |
||||
fill="none" |
||||
stroke="#5db916" |
||||
strokeLinecap="round" |
||||
strokeLinejoin="round" |
||||
strokeWidth={3.5} |
||||
/> |
||||
</Svg> |
||||
<FlatList |
||||
showsHorizontalScrollIndicator={false} |
||||
horizontal={true} |
||||
inverted={true} |
||||
style={[tw("flex flex-row mt-3 pb-3 mr-2")]} |
||||
data={hashtags} |
||||
renderItem={({ item }) => <Hashtag hashtag={item} />} |
||||
keyExtractor={(item) => item.id} |
||||
/> |
||||
</View> |
||||
); |
||||
}; |
||||
|
||||
const mapStateToProps = (state) => ({ |
||||
hashtags: state.blog.hashtags, |
||||
}); |
||||
|
||||
const mapDispatchToProps = {}; |
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(Hashtags); |
||||
@ -0,0 +1,36 @@ |
||||
import React from "react"; |
||||
import { View, Text, Appearance } from "react-native"; |
||||
import { connect } from "react-redux"; |
||||
|
||||
//style
|
||||
import tw from "tailwind-rn"; |
||||
import fontSize from "../../../constants/fontSize"; |
||||
import Colors from "../../../constants/Colors"; |
||||
|
||||
export const Header = ({ title }) => { |
||||
const colorScheme = Appearance.getColorScheme(); |
||||
return ( |
||||
<View style={tw("flex flex-row-reverse w-full items-center mt-5 mb-4")}> |
||||
<Text |
||||
style={[ |
||||
tw("py-2.5 pr-2.5 pl-5"), |
||||
{ |
||||
fontSize: fontSize.base, |
||||
color: Colors.theme1[colorScheme].white, |
||||
backgroundColor: Colors.theme1[colorScheme].black, |
||||
fontFamily : 'bold' |
||||
}, |
||||
]} |
||||
> |
||||
{title} |
||||
</Text> |
||||
<View style={{ width : '100%', backgroundColor : Colors.theme1[colorScheme].grayE3, height : 2 }}></View> |
||||
</View> |
||||
); |
||||
}; |
||||
|
||||
const mapStateToProps = (state) => ({}); |
||||
|
||||
const mapDispatchToProps = {}; |
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(Header); |
||||
@ -0,0 +1,164 @@ |
||||
import React from "react"; |
||||
import { |
||||
View, |
||||
Text, |
||||
Dimensions, |
||||
Pressable, |
||||
Image, |
||||
Appearance, |
||||
Platform, |
||||
} from "react-native"; |
||||
import { connect } from "react-redux"; |
||||
import { useNavigation } from "@react-navigation/native"; |
||||
import { LinearGradient } from "expo-linear-gradient"; |
||||
|
||||
//style
|
||||
import tw from "tailwind-rn"; |
||||
import fontSize from "../../../constants/fontSize"; |
||||
import Colors from "../../../constants/Colors"; |
||||
|
||||
const { height, width } = Dimensions.get("window"); |
||||
const ios = Platform.OS === "ios"; |
||||
|
||||
const Target = ({ blogs }) => { |
||||
const navigation = useNavigation(); |
||||
const colorScheme = Appearance.getColorScheme(); |
||||
const Large = ({ blog }) => { |
||||
return ( |
||||
<Pressable style={tw("flex flex-col w-full")}> |
||||
<View |
||||
className="relative w-full rounded-md overflow-hidden" |
||||
style={{ height: ((width - 32) / 4) * 3 }} |
||||
> |
||||
<Image |
||||
source={{ uri: `https://dnvn.ir/api/v1/file/${blog?.fileIds}` }} |
||||
style={tw("w-full h-full absolute left-0 top-0 rounded-md")} |
||||
/> |
||||
<LinearGradient |
||||
colors={["transparent", "rgba(0,0,0,0.8)"]} |
||||
start={{ x: 0.0, y: 0.0 }} |
||||
end={{ x: 0.0, y: 1.1 }} |
||||
style={tw( |
||||
"flex flex-col justify-end rounded-md absolute top-0 left-0 z-10 w-full h-full pb-2 px-2" |
||||
)} |
||||
></LinearGradient> |
||||
</View> |
||||
<Text |
||||
style={[ |
||||
tw("my-3"), |
||||
{ |
||||
fontFamily: "bold", |
||||
fontSize: fontSize.xl, |
||||
textAlign: ios ? "right" : "", |
||||
}, |
||||
]} |
||||
> |
||||
{blog?.title} |
||||
</Text> |
||||
<View style={tw("w-full flex flex-row-reverse justify-between")}> |
||||
<View style={tw("flex flex-row-reverse")}> |
||||
<View |
||||
style={[ |
||||
{ width: 40, height: 40, backgroundColor: "#ddd" }, |
||||
tw("rounded-full ml-1"), |
||||
]} |
||||
></View> |
||||
<View |
||||
style={tw( |
||||
`flex flex-col py-2 justify-center ${ios ? "items-end" : ""}` |
||||
)} |
||||
> |
||||
<Text |
||||
style={[ |
||||
{ |
||||
fontFamily: "bold", |
||||
color: Colors.theme1[colorScheme].gray20, |
||||
fontSize: fontSize.tiny, |
||||
}, |
||||
]} |
||||
> |
||||
{"نوشته از:" + " " + "کامران ایزدی"} |
||||
</Text> |
||||
<Text |
||||
style={[ |
||||
{ |
||||
fontFamily: "regular", |
||||
color: Colors.theme1[colorScheme].gray20, |
||||
fontSize: fontSize.xs, |
||||
}, |
||||
]} |
||||
> |
||||
{"سردبیر بخش وبلاگ دانوین"} |
||||
</Text> |
||||
</View> |
||||
</View> |
||||
<View style={tw("flex flex-col justify-center items-start")}> |
||||
<Text |
||||
style={[ |
||||
{ |
||||
fontFamily: "bold", |
||||
color: Colors.theme1[colorScheme].gray20, |
||||
fontSize: fontSize.sm, |
||||
}, |
||||
]} |
||||
> |
||||
{"زمان مطالعه" + " " + "۳۰ دقیقه"} |
||||
</Text> |
||||
<Text |
||||
style={[ |
||||
tw("mt-0"), |
||||
{ |
||||
fontFamily: "bold", |
||||
color: Colors.theme1[colorScheme].gray20, |
||||
fontSize: fontSize.sm, |
||||
}, |
||||
]} |
||||
> |
||||
{"1400/11/24"} |
||||
</Text> |
||||
</View> |
||||
</View> |
||||
</Pressable> |
||||
); |
||||
}; |
||||
|
||||
const Small = ({ blog }) => { |
||||
return ( |
||||
<Pressable style={[tw("flex flex-col"), { width: "48%" }]}> |
||||
<Image |
||||
source={{ uri: `https://dnvn.ir/api/v1/file/${blog?.fileIds}` }} |
||||
style={[ |
||||
tw("w-full rounded-md"), |
||||
{ height: ((((width - 32) * 48) / 100) * 3) / 4 }, |
||||
]} |
||||
/> |
||||
<View style={tw("flex flex-col justify-center")}> |
||||
<Text |
||||
style={[ |
||||
tw("my-2"), |
||||
{ |
||||
fontFamily: "bold", |
||||
fontSize: fontSize.lg, |
||||
textAlign: ios ? "right" : "", |
||||
}, |
||||
]} |
||||
> |
||||
{blog?.title} |
||||
</Text> |
||||
</View> |
||||
</Pressable> |
||||
); |
||||
}; |
||||
return ( |
||||
<View style={tw("flex flex-col")}> |
||||
<Large blog={blogs[0]} /> |
||||
<View style={tw("flex flex-row justify-between mt-3")}> |
||||
{blogs?.slice(1, 3).map((blog, index) => ( |
||||
<Small blog={blog} key={index} /> |
||||
))} |
||||
</View> |
||||
</View> |
||||
); |
||||
}; |
||||
|
||||
export default Target; |
||||
Loading…
Reference in new issue