@wasto/cms-components 1.5.10 → 1.5.12

package/src/components/challenge/ResultModal.tsx

@@ -1,144 +1,144 @@
-import type { ReactNode } from "react";
-import { Modal, StyleSheet, Text, View } from "react-native";
-import { Star } from "lucide-react-native";
-import { useTheme } from "../../contexts/ThemeContext";
-import { Theme } from "../../types/Theme";
-import { Title } from "../title/Title";
-import { Button } from "../button/Button";
-import { quizResultMessage, quizStarCount } from "../../helpers/generateQuizQuestions";
-
-export type ResultModalProps = {
-    visible: boolean;
-    correct: number;
-    incorrect: number;
-    total: number;
-    onClose: () => void;
-};
-
-export function ResultModal({
-    visible,
-    correct,
-    incorrect,
-    total,
-    onClose,
-}: ResultModalProps): ReactNode {
-    const { theme } = useTheme();
-    const themedStyles = createThemedStyles(theme);
-    const stars = quizStarCount(correct, total);
-    const percentage = total > 0 ? Math.round((correct / total) * 100) : 0;
-
-    return (
-        <Modal visible={visible} animationType="fade" transparent onRequestClose={onClose}>
-            <View style={styles.overlay}>
-                <View style={[styles.card, themedStyles.card]}>
-                    <Title text="Ton score" level="2" />
-                    <Text style={[styles.percentage, themedStyles.percentage]}>{percentage}%</Text>
-
-                    <View style={styles.scores}>
-                        <View style={styles.scoreItem}>
-                            <Text style={[styles.scoreMark, { color: theme.colors.success }]}>✓</Text>
-                            <Text style={[styles.scoreNumber, themedStyles.text]}>{correct}</Text>
-                        </View>
-                        <View style={styles.scoreItem}>
-                            <Text style={[styles.scoreMark, { color: theme.colors.error }]}>×</Text>
-                            <Text style={[styles.scoreNumber, themedStyles.text]}>{incorrect}</Text>
-                        </View>
-                    </View>
-
-                    <View style={[styles.feedback, themedStyles.feedback]}>
-                        <Text style={styles.emoji}>
-                            {percentage >= 80 ? "🎉" : percentage >= 50 ? "😊" : "🐸"}
-                        </Text>
-                        <Text style={[styles.feedbackText, themedStyles.text]}>
-                            {quizResultMessage(correct, total)}
-                        </Text>
-                    </View>
-
-                    <View style={styles.stars}>
-                        {[1, 2, 3, 4, 5].map((star) => (
-                            <Star
-                                key={star}
-                                size={28}
-                                fill={star <= stars ? theme.colors.primary : "none"}
-                                color={star <= stars ? theme.colors.primary : theme.colors.border}
-                                strokeWidth={star <= stars ? 0 : 2}
-                            />
-                        ))}
-                    </View>
-
-                    <Button onPress={onClose}>Terminer</Button>
-                </View>
-            </View>
-        </Modal>
-    );
-}
-
-const createThemedStyles = (theme: Theme) =>
-    StyleSheet.create({
-        card: {
-            backgroundColor: theme.colors.surface,
-            borderRadius: Math.max(theme.radius, 20),
-        },
-        percentage: {
-            color: theme.colors.primary,
-        },
-        text: {
-            color: theme.colors.onSurface,
-        },
-        feedback: {
-            backgroundColor: `${theme.colors.border}66`,
-            borderRadius: theme.radius,
-        },
-    });
-
-const styles = StyleSheet.create({
-    overlay: {
-        flex: 1,
-        backgroundColor: "rgba(15, 23, 42, 0.45)",
-        justifyContent: "center",
-        padding: 24,
-    },
-    card: {
-        padding: 24,
-        gap: 16,
-        alignItems: "center",
-    },
-    percentage: {
-        fontSize: 42,
-        fontWeight: "700",
-    },
-    scores: {
-        flexDirection: "row",
-        gap: 32,
-    },
-    scoreItem: {
-        alignItems: "center",
-        gap: 4,
-    },
-    scoreMark: {
-        fontSize: 22,
-        fontWeight: "700",
-    },
-    scoreNumber: {
-        fontSize: 22,
-        fontWeight: "700",
-    },
-    feedback: {
-        width: "100%",
-        padding: 16,
-        alignItems: "center",
-        gap: 8,
-    },
-    emoji: {
-        fontSize: 32,
-    },
-    feedbackText: {
-        textAlign: "center",
-        fontSize: 16,
-        lineHeight: 22,
-    },
-    stars: {
-        flexDirection: "row",
-        gap: 6,
-    },
-});
+import type { ReactNode } from "react";
+import { Modal, StyleSheet, Text, View } from "react-native";
+import { Star } from "lucide-react-native";
+import { useTheme } from "../../contexts/ThemeContext";
+import { Theme } from "../../types/Theme";
+import { Title } from "../title/Title";
+import { Button } from "../button/Button";
+import { quizResultMessage, quizStarCount } from "../../helpers/generateQuizQuestions";
+
+export type ResultModalProps = {
+    visible: boolean;
+    correct: number;
+    incorrect: number;
+    total: number;
+    onClose: () => void;
+};
+
+export function ResultModal({
+    visible,
+    correct,
+    incorrect,
+    total,
+    onClose,
+}: ResultModalProps): ReactNode {
+    const { theme } = useTheme();
+    const themedStyles = createThemedStyles(theme);
+    const stars = quizStarCount(correct, total);
+    const percentage = total > 0 ? Math.round((correct / total) * 100) : 0;
+
+    return (
+        <Modal visible={visible} animationType="fade" transparent onRequestClose={onClose}>
+            <View style={styles.overlay}>
+                <View style={[styles.card, themedStyles.card]}>
+                    <Title text="Ton score" level="2" />
+                    <Text style={[styles.percentage, themedStyles.percentage]}>{percentage}%</Text>
+
+                    <View style={styles.scores}>
+                        <View style={styles.scoreItem}>
+                            <Text style={[styles.scoreMark, { color: theme.colors.success }]}>✓</Text>
+                            <Text style={[styles.scoreNumber, themedStyles.text]}>{correct}</Text>
+                        </View>
+                        <View style={styles.scoreItem}>
+                            <Text style={[styles.scoreMark, { color: theme.colors.error }]}>×</Text>
+                            <Text style={[styles.scoreNumber, themedStyles.text]}>{incorrect}</Text>
+                        </View>
+                    </View>
+
+                    <View style={[styles.feedback, themedStyles.feedback]}>
+                        <Text style={styles.emoji}>
+                            {percentage >= 80 ? "🎉" : percentage >= 50 ? "😊" : "🐸"}
+                        </Text>
+                        <Text style={[styles.feedbackText, themedStyles.text]}>
+                            {quizResultMessage(correct, total)}
+                        </Text>
+                    </View>
+
+                    <View style={styles.stars}>
+                        {[1, 2, 3, 4, 5].map((star) => (
+                            <Star
+                                key={star}
+                                size={28}
+                                fill={star <= stars ? theme.colors.primary : "none"}
+                                color={star <= stars ? theme.colors.primary : theme.colors.border}
+                                strokeWidth={star <= stars ? 0 : 2}
+                            />
+                        ))}
+                    </View>
+
+                    <Button onPress={onClose}>Terminer</Button>
+                </View>
+            </View>
+        </Modal>
+    );
+}
+
+const createThemedStyles = (theme: Theme) =>
+    StyleSheet.create({
+        card: {
+            backgroundColor: theme.colors.surface,
+            borderRadius: Math.max(theme.radius, 20),
+        },
+        percentage: {
+            color: theme.colors.primary,
+        },
+        text: {
+            color: theme.colors.onSurface,
+        },
+        feedback: {
+            backgroundColor: `${theme.colors.border}66`,
+            borderRadius: theme.radius,
+        },
+    });
+
+const styles = StyleSheet.create({
+    overlay: {
+        flex: 1,
+        backgroundColor: "rgba(15, 23, 42, 0.45)",
+        justifyContent: "center",
+        padding: 24,
+    },
+    card: {
+        padding: 24,
+        gap: 16,
+        alignItems: "center",
+    },
+    percentage: {
+        fontSize: 42,
+        fontWeight: "700",
+    },
+    scores: {
+        flexDirection: "row",
+        gap: 32,
+    },
+    scoreItem: {
+        alignItems: "center",
+        gap: 4,
+    },
+    scoreMark: {
+        fontSize: 22,
+        fontWeight: "700",
+    },
+    scoreNumber: {
+        fontSize: 22,
+        fontWeight: "700",
+    },
+    feedback: {
+        width: "100%",
+        padding: 16,
+        alignItems: "center",
+        gap: 8,
+    },
+    emoji: {
+        fontSize: 32,
+    },
+    feedbackText: {
+        textAlign: "center",
+        fontSize: 16,
+        lineHeight: 22,
+    },
+    stars: {
+        flexDirection: "row",
+        gap: 6,
+    },
+});