Skip to content

Commit 91faa73

Browse files
katsuhira02Danil
katsuhira02
and
Danil
authored
Review Card component add (#94)
Co-authored-by: Danil <[email protected]>
1 parent df3f5d7 commit 91faa73

3 files changed

Lines changed: 120 additions & 14 deletions

File tree

‎src/UI.tsx‎

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useState } from 'react'
22
import { StyleSheet, View } from 'react-native'
33
import { BLACK, WHITE } from './constants'
4-
import { Space, Text, CardProductBag, CardProductCatalog, CardProductOrderInfo } from './components'
4+
import { Space, Text, ReviewCard } from './components'
55

66
const styles = StyleSheet.create({
77
container: {
@@ -34,19 +34,9 @@ function Home({ navigation, route }: HomeT) {
3434

3535
return (
3636
<View style={container}>
37-
<Text title="CardProduct" h0 />
37+
<Text title="ReviewCard" h0 />
3838
<Space height={15} />
39-
<Text title="CardProductBag" h1 textStyle={textStyle} />
40-
<Space height={10} />
41-
<CardProductBag />
42-
<Space height={15} />
43-
<Text title="CardProductCatalog" h1 textStyle={textStyle} />
44-
<Space height={10} />
45-
<CardProductCatalog />
46-
<Space height={15} />
47-
<Text title="CardProductOrderInfo" h1 textStyle={textStyle} />
48-
<Space height={10} />
49-
<CardProductOrderInfo />
39+
<ReviewCard />
5040
</View>
5141
)
5242
}

‎src/components/ReviewCard/index.tsx‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
import React from 'react'
2+
import { Image, Pressable, StyleSheet, View } from 'react-native'
3+
import MateralCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
4+
import { DARK, GRAY, WHITE } from '../../constants'
5+
import { Rating, Text, Space } from '../index'
6+
7+
const styles = StyleSheet.create({
8+
container: {
9+
width: 311,
10+
height: 297,
11+
borderRadius: 8,
12+
backgroundColor: DARK
13+
},
14+
imageStyle: {
15+
width: 32,
16+
height: 32,
17+
borderRadius: 100
18+
},
19+
imageContainer: {
20+
alignSelf: 'flex-start',
21+
bottom: 15,
22+
right: 15
23+
},
24+
textStyleReview: {
25+
color: WHITE,
26+
alignSelf: 'flex-start',
27+
marginLeft: 24
28+
},
29+
textStyleName: {
30+
color: WHITE,
31+
alignSelf: 'flex-start',
32+
marginLeft: 24
33+
},
34+
container1: {
35+
flexDirection: 'row',
36+
justifyContent: 'space-between',
37+
paddingRight: 24,
38+
paddingLeft: 24
39+
},
40+
textStyleDate: {
41+
color: GRAY
42+
},
43+
textStyleHelpful: {
44+
color: GRAY
45+
},
46+
iconStyle: {
47+
color: GRAY,
48+
fontSize: 20
49+
},
50+
helpfulTextContainer: {
51+
justifyContent: 'center'
52+
},
53+
helpfulContainer: {
54+
flexDirection: 'row',
55+
justifyContent: 'flex-end',
56+
paddingTop: 160,
57+
paddingRight: 24
58+
}
59+
})
60+
61+
interface ReviewCardT {
62+
name: string
63+
review: string
64+
date: string
65+
avatarUri: string
66+
ratingList: number[]
67+
onPress: () => void
68+
}
69+
70+
function ReviewCard({
71+
name = 'Example Name',
72+
review = 'Example Review',
73+
date = 'June 5, 2019',
74+
avatarUri = 'https://avatars.mds.yandex.net/i?id=b7b3d8f92f4a603fda85c4e53e6e63e2-4518497-images-thumbs&n=13',
75+
ratingList = [2, 4, 5],
76+
onPress
77+
}: ReviewCardT) {
78+
const {
79+
container,
80+
imageStyle,
81+
textStyleName,
82+
textStyleReview,
83+
container1,
84+
textStyleDate,
85+
textStyleHelpful,
86+
iconStyle,
87+
helpfulTextContainer,
88+
imageContainer,
89+
helpfulContainer
90+
} = styles
91+
92+
const filterName = name.slice(0, 300)
93+
return (
94+
<View style={container}>
95+
<View style={imageContainer}>
96+
<Image source={{ uri: avatarUri }} style={imageStyle} />
97+
</View>
98+
<Text title={filterName} textStyle={textStyleName} h3 />
99+
<View style={container1}>
100+
<Rating ratingList={ratingList} />
101+
<Text title={date} textStyle={textStyleDate} />
102+
</View>
103+
<Text title={review} h6 textStyle={textStyleReview} />
104+
<Pressable onPress={onPress} style={helpfulContainer}>
105+
<View style={helpfulTextContainer}>
106+
<Text title={'Helpful'} textStyle={textStyleHelpful} h6 />
107+
</View>
108+
<Space width={10} height={0} />
109+
<MateralCommunityIcons name="thumb-up" style={iconStyle} />
110+
</Pressable>
111+
</View>
112+
)
113+
}
114+
115+
export { ReviewCard }

‎src/components/index.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,4 +17,5 @@ export * from './CardImage'
1717
export * from './FilterBottom'
1818
export * from './CardProductCover'
1919
export * from './Rating'
20-
export * from './CardProduct'
20+
export * from './CardProduct'
21+
export * from './ReviewCard'

0 commit comments

Comments
 (0)