Skip to content
GitLab
Explore
Sign in
Primary navigation
Search or go to…
Project
M
map_UT
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Wiki
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Snippets
Build
Pipelines
Jobs
Pipeline schedules
Artifacts
Deploy
Releases
Package Registry
Container Registry
Model registry
Operate
Environments
Terraform modules
Monitor
Incidents
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
Anael Lacour
map_UT
Commits
8e43ecea
Commit
8e43ecea
authored
2 years ago
by
Anael Lacour
Browse files
Options
Downloads
Patches
Plain Diff
add review
parent
da0686cb
No related branches found
Branches containing commit
No related tags found
No related merge requests found
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
frontend/package.json
+1
-0
1 addition, 0 deletions
frontend/package.json
frontend/src/components/review.js
+131
-3
131 additions, 3 deletions
frontend/src/components/review.js
frontend/src/components/star.js
+15
-0
15 additions, 0 deletions
frontend/src/components/star.js
with
147 additions
and
3 deletions
frontend/package.json
+
1
−
0
View file @
8e43ecea
...
...
@@ -43,6 +43,7 @@
"react-native-safe-area-context"
:
"4.2.4"
,
"react-native-screens"
:
"~3.13.1"
,
"react-native-snap-carousel"
:
"^3.9.1"
,
"react-native-svg"
:
"^12.3.0"
,
"react-native-vector-icons"
:
"^9.1.0"
,
"react-native-web"
:
"0.17.7"
,
"react-redux"
:
"^8.0.1"
,
...
...
This diff is collapsed.
Click to expand it.
frontend/src/components/review.js
+
131
−
3
View file @
8e43ecea
import
React
from
"
react
"
;
import
{
StyleSheet
,
Text
,
View
}
from
"
react-native
"
;
import
React
,
{
useState
,
useEffect
}
from
"
react
"
;
import
{
StyleSheet
,
Text
,
View
,
Animated
,
}
from
"
react-native
"
;
import
Star
from
"
./star
"
const
PercentageBar
=
({
starText
,
percentage
})
=>
{
const
[
animation
]
=
useState
(
new
Animated
.
Value
(
0
));
useEffect
(()
=>
{
Animated
.
timing
(
animation
,
{
toValue
:
percentage
,
duration
:
500
,
}).
start
();
},
[
percentage
]);
return
(
<
View
style
=
{{
flexDirection
:
"
row
"
,
}}
>
<
Text
style
=
{
styles
.
progressText
}
>
{
starText
}
<
/Text
>
<
View
style
=
{
styles
.
progressMiddle
}
>
<
View
style
=
{
styles
.
progressWrap
}
>
<
Animated
.
View
style
=
{[
styles
.
progressBar
,
{
width
:
animation
.
interpolate
({
inputRange
:
[
0
,
100
],
outputRange
:
[
"
0%
"
,
"
100%
"
],
}),
},
]}
/
>
<
/View
>
<
/View
>
<
Text
style
=
{
styles
.
progressPercentText
}
>
{
percentage
}
%<
/Text
>
<
/View
>
);
};
export
default
function
Review
()
{
return
(
<
View
style
=
{
styles
.
container
}
>
<
View
style
=
{
styles
.
reviewContainer
}
>
<
Text
style
=
{
styles
.
title
}
>
reviews
<
/Text
>
<
Text
style
=
{
styles
.
title
}
>
Customer
reviews
<
/Text
>
<
View
style
=
{
styles
.
totalWrap
}
>
<
View
style
=
{{
flexDirection
:
"
row
"
,
}}
>
<
Star
/>
<
Star
/>
<
Star
/>
<
Star
/>
<
Star
/>
<
/View
>
<
Text
>
4.7
out
of
5
<
/Text
>
<
/View
>
<
Text
style
=
{
styles
.
amountText
}
>
40
customer
ratings
<
/Text
>
<
View
style
=
{{
marginTop
:
40
}}
>
<
View
style
=
{
styles
.
spacer
}
>
<
PercentageBar
starText
=
"
5 star
"
percentage
=
{
84
}
/
>
<
/View
>
<
View
style
=
{
styles
.
spacer
}
>
<
PercentageBar
starText
=
"
4 star
"
percentage
=
{
9
}
/
>
<
/View
>
<
View
style
=
{
styles
.
spacer
}
>
<
PercentageBar
starText
=
"
3 star
"
percentage
=
{
4
}
/
>
<
/View
>
<
View
style
=
{
styles
.
spacer
}
>
<
PercentageBar
starText
=
"
2 star
"
percentage
=
{
2
}
/
>
<
/View
>
<
View
style
=
{
styles
.
spacer
}
>
<
PercentageBar
starText
=
"
1 star
"
percentage
=
{
1
}
/
>
<
/View
>
<
/View
>
<
/View
>
<
/View
>
);
}
const
styles
=
StyleSheet
.
create
({
container
:
{
flex
:
1
,
...
...
@@ -36,4 +109,59 @@ const styles = StyleSheet.create({
color
:
"
#323357
"
,
textAlign
:
"
center
"
,
},
totalWrap
:
{
marginTop
:
20
,
marginBottom
:
5
,
backgroundColor
:
"
#F5F8FF
"
,
borderRadius
:
40
,
alignItems
:
"
center
"
,
justifyContent
:
"
space-between
"
,
flexDirection
:
"
row
"
,
paddingHorizontal
:
15
,
paddingVertical
:
10
,
},
amountText
:
{
fontSize
:
16
,
color
:
"
#595B71
"
,
textAlign
:
"
center
"
,
},
howWeCalculate
:
{
fontSize
:
15
,
color
:
"
#2A5BDA
"
,
textAlign
:
"
center
"
,
},
spacer
:
{
marginBottom
:
14
,
},
progressText
:
{
width
:
50
,
fontSize
:
14
,
color
:
"
#2A5BDA
"
,
},
progressPercentText
:
{
width
:
40
,
fontSize
:
14
,
color
:
"
#323357
"
},
progressMiddle
:
{
height
:
15
,
flex
:
1
,
marginHorizontal
:
10
,
},
progressWrap
:
{
backgroundColor
:
"
#F5F8FF
"
,
borderRadius
:
18
,
position
:
"
absolute
"
,
top
:
0
,
left
:
0
,
bottom
:
0
,
right
:
0
,
padding
:
2
,
},
progressBar
:
{
flex
:
1
,
shadowOffset
:
{
width
:
0
,
height
:
0
},
shadowColor
:
"
#ffcc48
"
,
shadowOpacity
:
1.0
,
shadowRadius
:
4
,
backgroundColor
:
"
#FFCC48
"
,
borderRadius
:
18
,
minWidth
:
5
,
},
});
This diff is collapsed.
Click to expand it.
frontend/src/components/star.js
0 → 100644
+
15
−
0
View file @
8e43ecea
import
React
from
"
react
"
;
import
Svg
,
{
Path
}
from
"
react-native-svg
"
;
const
Star
=
(
props
)
=>
{
return
(
<
Svg
width
=
{
24
}
height
=
{
22
}
viewBox
=
"
0 0 33 30
"
fill
=
"
none
"
{...
props
}
>
<
Path
d
=
"
M16.5 0l4.849 9.826 10.843 1.575-7.846 7.648 1.852 10.8-9.698-5.1-9.698 5.1 1.852-10.8-7.846-7.648L11.65 9.826 16.5 0z
"
fill
=
"
#FFCC48
"
/>
<
/Svg
>
);
};
export
default
Star
;
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment