vds_quiz/vds-app/App/components/Results.js

import React from "react"
import { View, StyleSheet, Dimensions, Text } from "react-native"
import { colors, texts } from "../components/Variables"

const screen = Dimensions.get("window")

const styles = StyleSheet.create({
  container: {
    position: "absolute",
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },
  box: {
    backgroundColor: colors.green_alpha,
    width: screen.width / 1.1,
    height: 320,
    borderRadius: 15,
    borderColor: colors.white_alpha,
    borderWidth: 5,
    alignItems: "center",
    justifyContent: "center"
  },
  boxWrong: {
    backgroundColor: colors.red_alpha,
    width: screen.width / 1.1,
    height: 320,
    borderRadius: 15,
    borderColor: colors.white_alpha,
    borderWidth: 5,
    alignItems: "center",
    justifyContent: "center"
  },
  boxUnsafe: {
    backgroundColor: colors.orange,
    width: screen.width / 1.1,
    height: 320,
    borderRadius: 15,
    borderColor: colors.white_alpha,
    borderWidth: 5,
    alignItems: "center",
    justifyContent: "center"
  },
  text: {
    color: colors.white,
    fontSize: 25,
    textAlign: "center",
    letterSpacing: -0.02,
    fontWeight: "500",
    lineHeight: 50
  },
  textLabel: {
    paddingHorizontal: 20,
    paddingVertical: 20
  },
  correct: {
    color: colors.green
  },
  wrong: {
    color: colors.red
  },
  unsafe: {
    color: colors.yellow
  }
})

export const Results = ({ total, correct, wrong, visible }) => {
  if (!visible) return null

  const percentage = total ? (100/total) * correct : 0
  const boxStyle = percentage >= 80 ? percentage >= 85 ? styles.box : styles.boxUnsafe : styles.boxWrong
  const percentStyle = percentage >= 80 ? percentage >= 85 ? styles.correct : styles.unsafe : styles.wrong

  return (
    <View style={styles.container}>
      <View style={boxStyle}>
        <Text style={styles.text}>
          <Text style={styles.textLabel}>{`${texts.corrects}: ${correct}`}</Text>
        </Text>
        <Text style={styles.text}>
          <Text style={styles.textLabel}>{`${texts.wrongs}: ${wrong}`}</Text>
        </Text>
        <Text style={styles.text}>
          <Text style={styles.textLabel}>{`${texts.percentage}: ${Math.round(percentage)}%`}</Text>
        </Text>
      </View>
    </View>
  )
}