From 0815f6bed8e939d74b1e013b29e5435a214a834b Mon Sep 17 00:00:00 2001
From: L <l@ls-macbook-pro.mynet>
Date: Mon, 22 Nov 2021 17:20:01 +0200
Subject: [PATCH] #1 - Add reply suggestions

---
 .../components/src/components/ReviewCard.tsx  |  2 +-
 .../components/src/features/review/Review.tsx | 50 +++++++++++++++++--
 2 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/components/ReviewCard.tsx b/packages/components/src/components/ReviewCard.tsx
index 6c7eff2..8996af0 100644
--- a/packages/components/src/components/ReviewCard.tsx
+++ b/packages/components/src/components/ReviewCard.tsx
@@ -7,7 +7,7 @@ import {
   TouchableOpacity,
   GestureResponderEvent,
 } from 'react-native'
-import { Stars } from '.'
+import { Stars } from './Stars'
 
 const cardHeaderHeight = 50
 
diff --git a/packages/components/src/features/review/Review.tsx b/packages/components/src/features/review/Review.tsx
index f546452..fe642cd 100644
--- a/packages/components/src/features/review/Review.tsx
+++ b/packages/components/src/features/review/Review.tsx
@@ -1,5 +1,12 @@
 import React, { Component } from 'react'
-import { View, TextInput } from 'react-native'
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  TextInput,
+  StyleSheet,
+  ScrollView,
+} from 'react-native'
 import { useSelector, useDispatch } from 'react-redux'
 import { BottomTabNavigationProp } from '@react-navigation/bottom-tabs'
 
@@ -17,12 +24,49 @@ export default ({ navigation }: Props) => {
   return (
     <View>
       <ReviewCard
-        title="John Doe 222222"
+        title="John Doe"
         subtitle="2 days ago"
         description="Food was great as always, highly recommend this place! Will definitely come back soon. Only note is to keep the music a little less loud."
         fullscreen
       />
-      <TextInput />
+      <ScrollView style={styles.replyOptions} horizontal>
+        <TouchableOpacity style={styles.replyOption}>
+          <Text style={styles.replyOptionText}>Thank you John!</Text>
+        </TouchableOpacity>
+        <TouchableOpacity style={styles.replyOption}>
+          <Text style={styles.replyOptionText}>Thanks John!</Text>
+        </TouchableOpacity>
+        <TouchableOpacity style={styles.replyOption}>
+          <Text style={styles.replyOptionText}>Many thanks John!</Text>
+        </TouchableOpacity>
+        <TouchableOpacity style={styles.replyOption}>
+          <Text style={styles.replyOptionText}>Appreciate it John!</Text>
+        </TouchableOpacity>
+      </ScrollView>
+      <TextInput placeholder="Reply.." style={styles.textInput} multiline />
     </View>
   )
 }
+
+const styles = StyleSheet.create({
+  textInput: {
+    fontSize: 14,
+    backgroundColor: 'white',
+    padding: 15,
+  },
+  replyOptions: {
+    flexDirection: 'row',
+    padding: 15,
+  },
+  replyOption: {
+    flexDirection: 'row',
+    backgroundColor: '#A9A9A9',
+    borderRadius: 8,
+    padding: 8,
+    marginHorizontal: 5,
+  },
+  replyOptionText: {
+    fontWeight: 'bold',
+    color: 'white',
+  },
+})