Skip to content

Commit a98b765

Browse files
markdrrrmarkdrrr
authored
Added component PromoCard (#100)
* Added component PromoCard * Fix component PromoCard
1 parent af5d58f commit a98b765

File tree

4 files changed

+208
-0
lines changed

4 files changed

+208
-0
lines changed

‎src/components/CardPromo/buttons/index.tsx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import React from 'react'
2+
import { StyleSheet, Text, Pressable, StyleProp, ViewStyle } from 'react-native'
3+
import { s } from 'react-native-size-matters'
4+
import { PRIMARY, WHITE } from '../../../constants'
5+
6+
const styles = StyleSheet.create({
7+
container: {
8+
justifyContent: 'center',
9+
borderRadius: s(25),
10+
width: '80%',
11+
height: s(28),
12+
marginHorizontal: 20,
13+
backgroundColor: PRIMARY
14+
},
15+
textStyle: {
16+
alignItems: 'center',
17+
alignSelf: 'center',
18+
color: WHITE
19+
}
20+
})
21+
22+
interface ButtonT {
23+
title: string
24+
viewStyle?: StyleProp<ViewStyle>
25+
onPress: () => void
26+
}
27+
28+
function ButtonApply({ title, onPress, viewStyle }: ButtonT) {
29+
const { container, textStyle } = styles
30+
31+
return (
32+
<Pressable
33+
style={({ pressed }) => [
34+
{
35+
opacity: pressed ? 0.9 : 1
36+
},
37+
container,
38+
viewStyle
39+
]}
40+
onPress={onPress}
41+
>
42+
<Text style={textStyle}>{title}</Text>
43+
</Pressable>
44+
)
45+
}
46+
47+
export { ButtonApply }

‎src/components/CardPromo/index.tsx‎

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
import React from 'react'
2+
import { StyleSheet, View, ImageBackground } from 'react-native'
3+
import { Text, Space, Button } from '../index'
4+
import { DARK, GRAY, WHITE, RED, BLACK } from '../../constants'
5+
import { s, vs } from 'react-native-size-matters'
6+
import { ButtonApply } from './buttons'
7+
8+
const styles = StyleSheet.create({
9+
container: {
10+
width: '90%',
11+
height: vs(80),
12+
borderRadius: 8,
13+
backgroundColor: DARK,
14+
flexDirection: 'row',
15+
overflow: 'hidden'
16+
},
17+
percentContainer: {
18+
width: s(80),
19+
backgroundColor: RED,
20+
flexDirection: 'row',
21+
alignItems: 'center',
22+
justifyContent: 'center'
23+
},
24+
percentImageContainer: {
25+
color: BLACK,
26+
width: s(80),
27+
flexDirection: 'row',
28+
alignItems: 'center',
29+
justifyContent: 'center'
30+
},
31+
infoPercentAdded: {
32+
flexDirection: 'column'
33+
},
34+
infoContainer: {
35+
flex: 1,
36+
marginHorizontal: s(5),
37+
flexDirection: 'row',
38+
justifyContent: 'space-around'
39+
},
40+
containerMid: {
41+
flex: 1.3,
42+
flexDirection: 'column',
43+
justifyContent: 'center'
44+
},
45+
containerRight: {
46+
flex: 1,
47+
flexDirection: 'column',
48+
alignItems: 'center',
49+
justifyContent: 'center'
50+
},
51+
percentNumberStyle: {
52+
color: WHITE,
53+
fontSize: 34
54+
},
55+
percentTextStyle: {
56+
color: WHITE,
57+
fontSize: 14
58+
},
59+
personalTextStyle: {
60+
color: WHITE,
61+
fontSize: 14,
62+
fontWeight: 'bold'
63+
},
64+
prmocodeTextStyle: {
65+
color: WHITE,
66+
fontSize: 11
67+
},
68+
remainTextStyle: {
69+
color: GRAY,
70+
fontSize: 11
71+
},
72+
imageContainer: {
73+
width: 80,
74+
height: 80,
75+
justifyContent: 'center'
76+
},
77+
text: {
78+
color: 'white',
79+
fontSize: 12,
80+
fontWeight: 'bold',
81+
textAlign: 'center'
82+
},
83+
blackTextStyle: {
84+
color: BLACK
85+
}
86+
})
87+
interface CardProductBagT {
88+
percentNumber: string
89+
promocodeText: string
90+
daysRemainNumber: string
91+
imagePromo: string
92+
}
93+
94+
const {
95+
container,
96+
percentContainer,
97+
infoContainer,
98+
containerMid,
99+
containerRight,
100+
percentNumberStyle,
101+
percentTextStyle,
102+
infoPercentAdded,
103+
personalTextStyle,
104+
prmocodeTextStyle,
105+
remainTextStyle,
106+
imageContainer,
107+
percentImageContainer,
108+
blackTextStyle
109+
} = styles
110+
111+
function CardPromo({
112+
percentNumber = '10',
113+
promocodeText = 'mypromocode2020',
114+
daysRemainNumber = '6',
115+
imagePromo
116+
}: CardProductBagT) {
117+
// imagePromo = 'https://demotivation.ru/wp-content/uploads/2020/05/255095-Sepik-2048x1383.jpg'
118+
const image = { uri: imagePromo }
119+
120+
return (
121+
<View style={container}>
122+
{imagePromo ? (
123+
<ImageBackground source={image} resizeMode="cover" style={imageContainer}>
124+
<View style={percentImageContainer}>
125+
<Text title={`${percentNumber}`} textStyle={[percentNumberStyle, blackTextStyle]} />
126+
<View style={infoPercentAdded}>
127+
<Text title={'%'} textStyle={[percentTextStyle, blackTextStyle]} />
128+
<Text title={'off'} textStyle={[percentTextStyle, blackTextStyle]} />
129+
</View>
130+
</View>
131+
</ImageBackground>
132+
) : (
133+
<View style={percentContainer}>
134+
<Text title={`${percentNumber}`} textStyle={percentNumberStyle} />
135+
<View style={infoPercentAdded}>
136+
<Text title={'%'} textStyle={percentTextStyle} />
137+
<Text title={'off'} textStyle={percentTextStyle} />
138+
</View>
139+
</View>
140+
)}
141+
<Space width={11} height={0} />
142+
<View style={infoContainer}>
143+
<View style={containerMid}>
144+
<Text title={'Personal offer'} numberOfLines={1} textStyle={personalTextStyle} />
145+
<Space height={4} />
146+
<Text title={promocodeText} textStyle={prmocodeTextStyle} />
147+
</View>
148+
<Space width={20} height={0} />
149+
<View style={containerRight}>
150+
<Text title={`${daysRemainNumber} days remaining`} textStyle={remainTextStyle} />
151+
<Space height={10} />
152+
<ButtonApply onPress={() => {}} title={'Apply'} />
153+
</View>
154+
</View>
155+
</View>
156+
)
157+
}
158+
159+
export { CardPromo }

‎src/components/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ export * from './ButtonPhoto'
1818
export * from './CardOrder'
1919
export * from './CardProduct'
2020
export * from './CardProductCover'
21+
export * from './CardPromo'
2122
export * from './CategoryCard'
2223
export * from './CheckBox'
2324
export * from './Filter'

‎src/constants.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export const GRAY_OPACITY = 'rgba(171, 180, 189, 0.1)'
99
export const SUCCESS = '#55D85A'
1010
export const ERROR = '#EF3651'
1111
export const SALE = '#FF3E3E'
12+
export const RED = '#FF3E3E'
1213

1314
const winWidth = Dimensions.get('window').width
1415
const winHeight = Dimensions.get('window').height

0 commit comments

Comments
 (0)