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