Obanana_test/app/components/product/CustomerReview.jsx

import {
  faArrowLeft,
  faEllipsis,
  faStar,
  faThumbsUp,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { useNavigation } from "@react-navigation/native";
import React from "react";
import {
  Dimensions,
  Image,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from "react-native";
import coming from "../.././../assets/comingsoon.png";
const height = Dimensions.get("window").height;
const width = Dimensions.get("window").width;

const CustomerReview = () => {
  const navigation = useNavigation();

  return (
    <View style={styles.container}>
      <View style={styles.wrapper}>
        {/* <Text style={styles.text}>Content</Text> */}
        {/* <Image
          style={{ width: width, height: height - 30, resizeMode: "cover" }}
          source={coming}
        /> */}
        <View style={styles.wrapCon}>
          {/* <Text style={styles.text}>Content</Text> */}
          <View style={styles.rateCon}>
            {/* <Text style={styles.text}>Content</Text> */}
            <View style={styles.rateWrapper}>
              <Text style={styles.text}>Rating     </Text>
              <View style={styles.rateWrapperLeft}>
                {/* <Text style={styles.text}>Content</Text> */}
                <View style={styles.rateWrapperLeftWrap}>
                  <Text style={styles.rateText}>4.5</Text>
                  <Text style={styles.rateText2}>/5</Text>
                  <FontAwesomeIcon icon={faStar} color={"#eede00"} size={25} />
                  <FontAwesomeIcon icon={faStar} color={"#eede00"} size={25} />
                  <FontAwesomeIcon icon={faStar} color={"#eede00"} size={25} />
                  <FontAwesomeIcon icon={faStar} color={"#eede00"} size={25} />
                  <FontAwesomeIcon icon={faStar} color={"#afaa66"} size={25} />
                </View>
              </View>
              <View style={styles.rateWrapperRight}>
                {/* <Text style={styles.text}>right</Text> */}
                <View style={styles.rateWrapperRightWrap}>
                  <Text style={styles.text}> </Text>
                </View>
              </View>
            </View>
          </View>

          <View style={styles.commentCon}>
            {/* <Text style={styles.text}>Content</Text> */}
            <View style={styles.commentConWrap}>
              {/* <Text style={styles.text}>Content</Text> */}
              <View style={styles.commentConCard}>
                {/* <Text style={styles.text}>Content</Text> */}
                <View style={styles.commentConCardWrap}>
                  <View style={styles.commentConCardLeft}>
                    {/* <Text style={styles.text}>Content</Text> */}
                    <View style={styles.commentConCardLeftWrap}>
                      {/* <Text style={styles.text}>Content</Text> */}
                      <View style={styles.commentConCardLeftWrapRow}>
                        <Image
                          style={{
                            width: 50,
                            height: 50,
                            resizeMode: "cover",
                            borderWidth: 1,
                            borderColor: "black",
                            borderRadius: 100,
                          }}
                          source={coming}
                        />
                        <Text style={styles.commentUser}> M*** </Text>

                        <View style={styles.starRateWrap}>
                          <FontAwesomeIcon
                            icon={faStar}
                            color={"#eede00"}
                            size={15}
                          />
                          <FontAwesomeIcon
                            icon={faStar}
                            color={"#eede00"}
                            size={15}
                          />
                          <FontAwesomeIcon
                            icon={faStar}
                            color={"#eede00"}
                            size={15}
                          />
                          <FontAwesomeIcon
                            icon={faStar}
                            color={"#eede00"}
                            size={15}
                          />
                          <FontAwesomeIcon
                            icon={faStar}
                            color={"#faf6bf"}
                            size={15}
                          />
                        </View>
                      </View>
                      <Text style={styles.commentText}>
                        Pagka deliver na pagka deliver ginamit ko agad hehe..
                        ganda niya.. thank you seller! kaso d working ung remote
                        control??
                      </Text>
                    </View>
                  </View>
                  <View style={styles.commentConCardRight}>
                    {/* <Text style={styles.text}>Content</Text> */}
                    <View style={styles.commentConCardRightWrap}>
                      {/* <Text style={styles.text}>Content</Text> */}

                      <FontAwesomeIcon
                        icon={faEllipsis}
                        color={"#faf6bf"}
                        size={25}
                        style={styles.ellipse}
                      />
                      <FontAwesomeIcon
                        icon={faThumbsUp}
                        color={"#faf6bf"}
                        size={25}
                        style={styles.like}
                      />
                      <Text style={styles.text}>reply</Text>
                    </View>
                  </View>
                </View>
              </View>
            </View>
          </View>
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#ffff",
    width: "100%",
    height: "100%",
  },
  wrapper: {
    height: "100%",
    width: "100%",
    // padding: 15,
  },
  header: {
    alignItems: "center",
    width: "100%",
    top: 0,
    paddingLeft: 15,
    flexDirection: "row",
    borderColor: "#ddd",
    paddingBottom: 15,
    borderBottomWidth: 1,
  },
  headerText: {
    fontSize: 16,
    fontWeight: "600",
    marginLeft: 25,
  },
  wrapCon: {
    borderColor: "#ddd",
    paddingVertical: 15,
    borderBottomWidth: 1,
    borderTopWidth: 1,
    backgroundColor: "#f8f8f8",
  },
  rateCon: {},
  rateText: {
    fontSize: 21,
    fontWeight: "600",
  },
  rateText2: {
    fontSize: 15,
    paddingTop: 6,
    paddingRight: 10,
  },

  rateWrapper: {
    alignItems: "center",
    width: "100%",
    top: 0,
    paddingLeft: 15,
    flexDirection: "row",
    borderColor: "#ddd",
    paddingBottom: 15,
    borderBottomWidth: 1,
  },
  rateWrapperLeft: {},
  rateWrapperLeftWrap: {
    flexDirection: "row",
  },
  rateWrapperRight: {},
  rateWrapperRightWrap: {},
  commentCon: {},
  commentText: {
    color: "#3b3b3b",
    marginTop: 15,
  },
  commentUser: {
    color: "#3b3b3b",
    marginLeft: 15,
  },
  commentConWrap: {},
  commentConCard: {
    backgroundColor: "#fff",
  },
  commentConCardWrap: {
    flexDirection: "row",
    padding: 10,
  },
  starRateWrap: {
    flexDirection: "row",
    padding: 10,
  },
  ellipse: {
    // position: "absolute",
    // top: 0,
    marginTop: 15,
  },
  like: { marginVertical: 15 },
  commentConCardLeft: {
    width: "88%",
    justifyContent: "center",
    alignItems: "center",
  },
  commentConCardLeftWrap: {
    alignItems: "center",
    width: "100%",
    top: 0,
    // paddingLeft: 15,
    flexDirection: "column",
    borderColor: "#ddd",
    // paddingBottom: 15,
    // borderBottomWidth: 1,
  },
  commentConCardLeftWrapRow: {
    alignItems: "center",
    width: "100%",
    top: 0,
    // paddingLeft: 15,
    flexDirection: "row",
    // justifyContent: "space-between",
    borderColor: "#ddd",
    // paddingBottom: 15,
    // borderBottomWidth: 1,
  },
  commentConCardRight: {
    // justifyContent: "center",
    alignItems: "center",
    bottom: 10,
  },
  commentConCardRightWrap: {
    // height: "100%",
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center",
  },
});

export default CustomerReview;