@magmamath/students-features 0.4.4 → 0.5.0-rc.0

package/src/features/endOfAssignment/components/Modal/Modal.tsx

@@ -1,121 +0,0 @@
-import React, { ReactNode, useEffect, useState } from 'react'
-import {
-  Animated,
-  GestureResponderEvent,
-  StyleProp,
-  StyleSheet,
-  TextStyle,
-  TouchableWithoutFeedback,
-  View,
-  ViewStyle,
-} from 'react-native'
-
-import {
-  ButtonVariant,
-  CrossIcon,
-  COLORS,
-  BORDER_RADIUS,
-  SPACING,
-  SHADOWS,
-  Button,
-} from '@magmamath/react-native-ui'
-
-import { ModalModel } from './model'
-import { ModalBackground } from './ModalBackground'
-
-const stopPropagation = {
-  onTouchStart: (event: GestureResponderEvent) => {
-    event.stopPropagation()
-  },
-  onMouseDown: (event: MouseEvent) => {
-    event.stopPropagation()
-  },
-}
-
-export type ModalProps = {
-  isVisible: boolean
-  content: ReactNode
-  isDismissable: boolean
-  onClose?: () => void
-  hideCloseButton?: boolean
-  withBackground?: boolean
-  style?: {
-    overlay?: StyleProp<ViewStyle>
-    container?: StyleProp<ViewStyle>
-    header?: StyleProp<TextStyle> | StyleProp<ViewStyle>
-    content?: StyleProp<TextStyle> | StyleProp<ViewStyle>
-    footer?: StyleProp<ViewStyle>
-    closeButton?: StyleProp<ViewStyle>
-  }
-}
-
-export const Modal = ({
-  isVisible,
-  isDismissable = true,
-  onClose,
-  style,
-  content,
-  withBackground,
-}: ModalProps) => {
-  const [modalModel] = useState(() => new ModalModel())
-
-  useEffect(() => {
-    if (isVisible) {
-      modalModel.animation.show()
-    }
-  }, [isVisible])
-
-  if (!isVisible) return null
-  return (
-    <TouchableWithoutFeedback onPress={() => isDismissable && onClose?.()}>
-      <Animated.View style={[styles.overlay, style?.overlay, modalModel.animatedStyle]}>
-        <TouchableWithoutFeedback {...stopPropagation}>
-          <View style={[styles.container, style?.container]}>
-            {withBackground && <View style={styles.backgroundWrapper}>{<ModalBackground />}</View>}
-            {isDismissable && (
-              <View style={[styles.closeButton, style?.closeButton]}>
-                <Button
-                  variant={ButtonVariant.TERTIARY}
-                  icon={<CrossIcon size={18} color={COLORS.NEUTRAL_7} />}
-                  onPress={onClose}
-                />
-              </View>
-            )}
-            {content}
-          </View>
-        </TouchableWithoutFeedback>
-      </Animated.View>
-    </TouchableWithoutFeedback>
-  )
-}
-
-const styles = StyleSheet.create({
-  overlay: {
-    ...StyleSheet.absoluteFillObject,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: 'rgba(0, 0, 0, 0.2)',
-    zIndex: 10001,
-  },
-  container: {
-    position: 'relative',
-    justifyContent: 'space-between',
-    backgroundColor: COLORS.NEUTRAL_1,
-    minWidth: 300,
-    maxWidth: 957,
-    borderRadius: BORDER_RADIUS['400'],
-    paddingHorizontal: SPACING['1600'],
-    paddingVertical: SPACING['800'],
-    gap: SPACING['600'],
-    ...SHADOWS['5'],
-  },
-  closeButton: {
-    position: 'absolute',
-    top: SPACING['400'],
-    right: SPACING['400'],
-  },
-  backgroundWrapper: {
-    ...StyleSheet.absoluteFillObject,
-    zIndex: -1,
-  },
-})

package/src/features/endOfAssignment/components/Modal/ModalBackground.tsx

@@ -1,33 +0,0 @@
-import React from 'react'
-import { View, StyleSheet } from 'react-native'
-import { BORDER_RADIUS } from '@magmamath/react-native-ui'
-
-import { TrophyIcon } from './assets/TrophyIcon'
-import { SunrisingIcon } from './assets/SunrisingIcon'
-
-export const ModalBackground = () => (
-  <View style={[StyleSheet.absoluteFill, styles.backgroundContainer]}>
-    <View style={styles.bgImageLeft}>
-      <TrophyIcon size={466} />
-    </View>
-    <View style={styles.bgImageRight}>
-      <SunrisingIcon size={909} />
-    </View>
-  </View>
-)
-
-const styles = StyleSheet.create({
-  backgroundContainer: {
-    borderRadius: BORDER_RADIUS[400],
-    overflow: 'hidden',
-  },
-  bgImageLeft: {
-    position: 'absolute',
-    bottom: 0,
-    zIndex: -1,
-  },
-  bgImageRight: {
-    position: 'absolute',
-    zIndex: -2,
-  },
-})

package/src/features/endOfAssignment/components/Modal/assets/SunrisingIcon.tsx

@@ -1,196 +0,0 @@
-import * as React from 'react'
-import { IconProps } from '@magmamath/react-native-ui'
-import Svg, { G, Path, Defs, LinearGradient, Stop } from 'react-native-svg'
-
-export const SunrisingIcon = (props: IconProps) => {
-  const height = (props.size ?? 0) * 0.606
-
-  return (
-    <Svg width={props.size} height={height} viewBox='0 0 909 551' fill='none' {...props}>
-      <G opacity={0.1}>
-        <Path
-          d='M164.04-598.854a893.984 893.984 0 01222.319 28.085L164.04 295.106v-893.96z'
-          fill='url(#paint0_linear_3505_1308)'
-        />
-        <Path
-          d='M-282.94-479.086a893.954 893.954 0 01206.577-86.837L164.04 295.106l-446.98-774.192z'
-          fill='url(#paint1_linear_3505_1308)'
-        />
-        <Path
-          d='M-610.152-151.874A893.997 893.997 0 01-474.67-330.365l638.71 625.471-774.192-446.98z'
-          fill='url(#paint2_linear_3505_1308)'
-        />
-        <Path
-          d='M-729.92 295.106a893.938 893.938 0 0128.086-222.319L164.04 295.106h-893.96z'
-          fill='url(#paint3_linear_3505_1308)'
-        />
-        <Path
-          d='M-610.152 742.086a893.994 893.994 0 01-86.837-206.577L164.04 295.106l-774.192 446.98z'
-          fill='url(#paint4_linear_3505_1308)'
-        />
-        <Path
-          d='M-282.94 1069.3a894.157 894.157 0 01-178.491-135.484l625.471-638.71-446.98 774.194z'
-          fill='url(#paint5_linear_3505_1308)'
-        />
-        <Path
-          d='M611.02-479.086a893.96 893.96 0 01178.491 135.482L164.04 295.106l446.98-774.192z'
-          fill='url(#paint6_linear_3505_1308)'
-        />
-        <Path
-          d='M938.232-151.874a894.096 894.096 0 0186.838 206.577L164.04 295.106l774.192-446.98z'
-          fill='url(#paint7_linear_3505_1308)'
-        />
-        <Path
-          d='M1058 295.106c0 74.991-9.44 149.684-28.09 222.319L164.04 295.106H1058z'
-          fill='url(#paint8_linear_3505_1308)'
-        />
-        <Path
-          d='M938.232 742.086A893.96 893.96 0 01802.75 920.577L164.04 295.106l774.192 446.98z'
-          fill='url(#paint9_linear_3505_1308)'
-        />
-        <Path
-          d='M611.02 1069.3a893.885 893.885 0 01-206.577 86.83L164.04 295.106 611.02 1069.3z'
-          fill='url(#paint10_linear_3505_1308)'
-        />
-        <Path
-          d='M164.04 1189.07a893.941 893.941 0 01-222.319-28.09L164.04 295.106v893.964z'
-          fill='url(#paint11_linear_3505_1308)'
-        />
-      </G>
-      <Defs>
-        <LinearGradient
-          id='paint0_linear_3505_1308'
-          x1={164.04}
-          y1={383.036}
-          x2={930.076}
-          y2={383.036}
-          gradientUnits='userSpaceOnUse'
-        >
-          <Stop stopColor='#FF245F' />
-          <Stop offset={1} stopColor='#FF7917' stopOpacity={0} />
-        </LinearGradient>
-        <LinearGradient
-          id='paint1_linear_3505_1308'
-          x1={164.04}
-          y1={383.036}
-          x2={930.076}
-          y2={383.036}
-          gradientUnits='userSpaceOnUse'
-        >
-          <Stop stopColor='#FF245F' />
-          <Stop offset={1} stopColor='#FF7917' stopOpacity={0} />
-        </LinearGradient>
-        <LinearGradient
-          id='paint2_linear_3505_1308'
-          x1={164.04}
-          y1={383.036}
-          x2={930.076}
-          y2={383.036}
-          gradientUnits='userSpaceOnUse'
-        >
-          <Stop stopColor='#FF245F' />
-          <Stop offset={1} stopColor='#FF7917' stopOpacity={0} />
-        </LinearGradient>
-        <LinearGradient
-          id='paint3_linear_3505_1308'
-          x1={164.04}
-          y1={383.036}
-          x2={930.076}
-          y2={383.036}
-          gradientUnits='userSpaceOnUse'
-        >
-          <Stop stopColor='#FF245F' />
-          <Stop offset={1} stopColor='#FF7917' stopOpacity={0} />
-        </LinearGradient>
-        <LinearGradient
-          id='paint4_linear_3505_1308'
-          x1={164.04}
-          y1={383.036}
-          x2={930.076}
-          y2={383.036}
-          gradientUnits='userSpaceOnUse'
-        >
-          <Stop stopColor='#FF245F' />
-          <Stop offset={1} stopColor='#FF7917' stopOpacity={0} />
-        </LinearGradient>
-        <LinearGradient
-          id='paint5_linear_3505_1308'
-          x1={164.04}
-          y1={383.036}
-          x2={930.076}
-          y2={383.036}
-          gradientUnits='userSpaceOnUse'
-        >
-          <Stop stopColor='#FF245F' />
-          <Stop offset={1} stopColor='#FF7917' stopOpacity={0} />
-        </LinearGradient>
-        <LinearGradient
-          id='paint6_linear_3505_1308'
-          x1={164.04}
-          y1={383.036}
-          x2={930.076}
-          y2={383.036}
-          gradientUnits='userSpaceOnUse'
-        >
-          <Stop stopColor='#FF245F' />
-          <Stop offset={1} stopColor='#FF7917' stopOpacity={0} />
-        </LinearGradient>
-        <LinearGradient
-          id='paint7_linear_3505_1308'
-          x1={164.04}
-          y1={383.036}
-          x2={930.076}
-          y2={383.036}
-          gradientUnits='userSpaceOnUse'
-        >
-          <Stop stopColor='#FF245F' />
-          <Stop offset={1} stopColor='#FF7917' stopOpacity={0} />
-        </LinearGradient>
-        <LinearGradient
-          id='paint8_linear_3505_1308'
-          x1={164.04}
-          y1={383.036}
-          x2={930.076}
-          y2={383.036}
-          gradientUnits='userSpaceOnUse'
-        >
-          <Stop stopColor='#FF245F' />
-          <Stop offset={1} stopColor='#FF7917' stopOpacity={0} />
-        </LinearGradient>
-        <LinearGradient
-          id='paint9_linear_3505_1308'
-          x1={164.04}
-          y1={383.036}
-          x2={930.076}
-          y2={383.036}
-          gradientUnits='userSpaceOnUse'
-        >
-          <Stop stopColor='#FF245F' />
-          <Stop offset={1} stopColor='#FF7917' stopOpacity={0} />
-        </LinearGradient>
-        <LinearGradient
-          id='paint10_linear_3505_1308'
-          x1={164.04}
-          y1={383.036}
-          x2={930.076}
-          y2={383.036}
-          gradientUnits='userSpaceOnUse'
-        >
-          <Stop stopColor='#FF245F' />
-          <Stop offset={1} stopColor='#FF7917' stopOpacity={0} />
-        </LinearGradient>
-        <LinearGradient
-          id='paint11_linear_3505_1308'
-          x1={164.04}
-          y1={383.036}
-          x2={930.076}
-          y2={383.036}
-          gradientUnits='userSpaceOnUse'
-        >
-          <Stop stopColor='#FF245F' />
-          <Stop offset={1} stopColor='#FF7917' stopOpacity={0} />
-        </LinearGradient>
-      </Defs>
-    </Svg>
-  )
-}

package/src/features/endOfAssignment/components/Modal/assets/TrophyIcon.tsx

@@ -1,62 +0,0 @@
-import { IconProps } from '@magmamath/react-native-ui'
-import * as React from 'react'
-import Svg, { Path } from 'react-native-svg'
-
-export const TrophyIcon = (props: IconProps) => {
-  const height = (props.size ?? 0) * 0.982
-
-  return (
-    <Svg width={props.size} height={height} viewBox='0 0 466 458' fill='none' {...props}>
-      <Path
-        d='M258.454 244.45l-5.731 32.767 16.384 2.86c8.047 1.407 15.796 2.106 23.222 2.106 15.697.011 29.985-3.137 42.766-9.389 6.728-3.292 13.025-7.438 18.9-12.449 44.672-38.12 50.247-115.859 49.604-158.813-.288-18.467-9.466-35.848-24.575-46.49-9.355-6.606-20.23-10.209-31.348-10.575a57.996 57.996 0 00-17.935 2.206c-14.355 4.09-26.36 13.38-33.875 25.994l-32.379-14.332L250.03 88.75l39.162 17.326c6.274 2.771 13.247 2.916 19.632.388 6.374-2.516 11.373-7.382 14.055-13.7a24.56 24.56 0 0115.974-14.112c2.993-.853 6.052-1.13 9.056-.853a24.578 24.578 0 0111.961 4.422c6.44 4.534 10.353 11.95 10.475 19.82 1.164 76.841-18.822 112.224-32.024 127.144-2.195 2.494-4.213 4.412-5.909 5.864-14.632 12.47-33.465 16.483-57.586 12.271l-16.372-2.871zM37.623 282.187c7.429 0 15.173-.703 23.223-2.111l16.379-2.864-5.73-32.757-16.378 2.865c-24.126 4.221-42.953.202-57.575-12.274-11.858-10.119-39.295-43.336-37.936-133.006.119-7.871 4.036-15.28 10.476-19.82a24.601 24.601 0 0121.015-3.57A24.606 24.606 0 017.075 92.764c2.683 6.318 7.675 11.186 14.058 13.709 6.384 2.522 13.355 2.38 19.63-.396l39.152-17.329-13.46-30.41-32.37 14.328C26.57 60.055 14.57 50.762.213 46.67c-16.936-4.828-34.901-1.777-49.293 8.369-15.102 10.647-24.286 28.03-24.565 46.498-.652 42.947 4.926 120.686 49.6 158.806 17.036 14.535 37.71 21.844 61.668 21.844z'
-        fill='#FFD690'
-      />
-      <Path
-        opacity={0.1}
-        d='M335.095 272.795c6.728-3.293 13.025-7.438 18.9-12.449 44.672-38.121 50.247-115.859 49.604-158.813-.288-18.467-9.466-35.848-24.575-46.49-9.355-6.606-20.23-10.209-31.348-10.575 3.326 3.691 14.3 18.057.233 33.332a24.578 24.578 0 0111.961 4.423c6.44 4.534 10.353 11.95 10.475 19.82 1.164 76.84-18.822 112.223-32.024 127.144 0 0 21.659 24.497-3.226 43.608z'
-        fill='#D25B00'
-      />
-      <Path
-        d='M26.153 202.82L46.65 26.089a11.505 11.505 0 0111.429-10.18h213.797a11.504 11.504 0 0111.428 10.18l20.495 176.731c4.463 38.483-10.944 76.387-39.056 96.086l-8.179 5.73c-15.466 10.838-32.135 18.807-49.434 23.744-11.86 3.386-19.699 16.816-18.043 31.209l5.7 49.527h-59.619l5.7-49.527c1.656-14.393-6.182-27.825-18.043-31.209-17.299-4.937-33.967-12.905-49.434-23.744l-8.178-5.73c-28.115-19.699-43.522-57.604-39.059-96.086z'
-        fill='#FFD690'
-      />
-      <Path
-        opacity={0.1}
-        d='M169.03 359.583l1.752 36.868h22.546l-4.245-36.868c-1.652-14.388 6.185-27.823 18.046-31.203 17.293-4.933 33.964-12.903 49.428-23.744l8.18-5.731c28.112-19.698 43.52-57.597 39.063-96.084L283.299 26.086a11.505 11.505 0 00-11.429-10.18h-50.531l12.193 186.914c2.505 38.487-6.152 76.386-21.959 96.084l-4.6 5.731c-8.702 10.841-18.068 18.811-27.801 23.743-6.661 3.382-11.073 16.817-10.142 31.205z'
-        fill='#D25B00'
-      />
-      <Path
-        d='M63.166 437.528l203.607-4.774v-6.731c0-16.335-13.295-29.576-29.63-29.576H92.742c-16.335 0-29.576 13.241-29.576 29.576v11.505z'
-        fill='#FFD690'
-      />
-      <Path
-        opacity={0.1}
-        d='M171.477 396.447c16.328 0 29.574 13.247 29.574 29.575v7.907l65.722-.857v-7.05c0-16.328-13.246-29.575-29.574-29.575h-65.722z'
-        fill='#D25B00'
-      />
-      <Path
-        d='M209.405 432.82c15.086 0 27.324 12.238 27.324 27.336v100.01h42.122c8.43 0 15.264-6.834 15.264-15.264v-84.746c0-15.097-12.239-27.336-27.335-27.336h-57.375z'
-        fill='#2488BB'
-      />
-      <Path
-        opacity={0.5}
-        d='M35.846 543.408a8.835 8.835 0 1017.668 0v-88.343c0-6.569 1.263-10.538 2.59-13.251 1.325-2.713 5.889-7.362 13.25-8.834H66.41c-5.89 0-13.567 0-20.614 5.889-6.683 5.586-9.95 13.376-9.95 22.086v82.453z'
-        fill='#fff'
-      />
-      <Path
-        d='M35.837 460.156v84.489c0 8.57 6.912 15.518 15.483 15.518H278.85c8.43 0 15.264-6.833 15.264-15.263v-84.744c0-15.097-12.239-27.336-27.335-27.336H63.173c-15.097 0-27.336 12.239-27.336 27.336z'
-        fill='#AAD5EF'
-      />
-      <Path
-        opacity={0.1}
-        d='M208.151 432.762c15.309 0 27.727 12.418 27.727 27.739l.004 33.137h42.744c8.555 0 15.489-6.934 15.489-15.489l-.003-17.648c0-15.32-12.419-27.739-27.739-27.739h-58.222z'
-        fill='#D25B00'
-      />
-      <Path
-        opacity={0.3}
-        d='M73.782 17.1c-1.8.654-4.135 2.151-6.083 4.197-2.014 2.118-2.78 3.928-2.901 4.848-3.966 30.145-7.066 56.336-10.696 87.003-3.112 26.288-9.844 72.335-12.788 92.948-2.944 20.613-2.944 23.442-2.944 35.337 0 22.086 10.364 42.197 10.364 42.197-4.634-5.04-14.077-23.056-15.589-26.678-5.247-12.574-9.599-33.753-7.343-51.809 4.73-37.865 7.788-67.529 10.907-93.864 5.03-41.445 4.877-42.092 8.977-77.441 1.785-15.392 1.08-18.069 13.976-18.069h18.25c-1.451.417-2.836.86-4.13 1.33zM35.846 543.249a8.834 8.834 0 008.834 8.834 8.834 8.834 0 008.834-8.834v-88.343c0-6.57 1.263-10.538 2.59-13.251 1.325-2.713 5.889-7.362 13.25-8.835 0 0-1.158-.003-2.94-.003-13.712 0-13.571.004-20.618 5.893-6.683 5.586-9.95 13.376-9.95 22.086v82.453z'
-        fill='#fff'
-      />
-    </Svg>
-  )
-}

package/src/features/endOfAssignment/components/Modal/model.ts

@@ -1,34 +0,0 @@
-import { IS_WEB } from '@magmamath/react-native-ui'
-import { Animated } from 'react-native'
-
-export class ModalModel {
-  private static ANIMATION_DURATION = 200
-  private static INITIAL_OPACITY = 0
-  private static createTimingAnimation(
-    animation: Animated.Value,
-    toValue: number
-  ) {
-    return Animated.timing(animation, {
-      toValue,
-      duration: ModalModel.ANIMATION_DURATION,
-      useNativeDriver: !IS_WEB,
-    })
-  }
-
-  public animation
-  public animatedStyle
-
-  constructor() {
-    const opacity = new Animated.Value(ModalModel.INITIAL_OPACITY)
-    const opacityAnimation = ModalModel.createTimingAnimation(opacity, 1)
-    this.animation = {
-      show: () => {
-        opacityAnimation.reset()
-        opacityAnimation.start()
-      },
-    }
-    this.animatedStyle = {
-      opacity,
-    }
-  }
-}

package/src/features/endOfAssignment/components/NoAnswer/NoAnswer.tsx

@@ -1,103 +0,0 @@
-import React from 'react'
-import { View, StyleSheet } from 'react-native'
-import { useUnit } from 'effector-react'
-import {
-  Button,
-  ButtonColor,
-  ButtonVariant,
-  COLORS,
-  SPACING,
-  Typography,
-} from '@magmamath/react-native-ui'
-
-import { EOAModalContentProps } from '../../types'
-import { NoAnswerContent } from './NoAnswerContent'
-import { PracticeButton } from '../../ui/PracticeButton'
-import { useKeyBoard } from '../../../../shared/hooks/useKeyboard'
-import { KeyboardKeys } from '../../../../lib/constants'
-
-export const NoAnswer = ({ model, textContent, onPracticePress }: EOAModalContentProps) => {
-  const popUpData = useUnit(model.$popUpData)
-
-  const { stats, isExam, user } = popUpData ?? {}
-  const solved = stats?.solvedAmount ?? 0
-  const total = stats?.problemsAmount ?? 0
-  const buttonColorScheme = isExam ? ButtonColor.YELLOW : ButtonColor.BLUE
-
-  const practiceButtonVisible = !isExam || !!user?.practiceMode
-
-  const handlePrimaryButtonPress = () => {
-    isExam ? onPracticePress?.() : model.goToFirstProblemPressed()
-    model.hidePopUp()
-  }
-
-  useKeyBoard((event) => {
-    if (event.key === KeyboardKeys.ENTER) {
-      practiceButtonVisible ? handlePrimaryButtonPress() : model.hidePopUpAndLeave()
-    }
-  })
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.textContainer}>
-        {!!textContent.title && (
-          <Typography variant="h2" style={styles.title}>
-            {textContent.title}
-          </Typography>
-        )}
-        {!!textContent.subtitle && practiceButtonVisible && (
-          <Typography variant="h4" style={styles.subtitle}>
-            {textContent.subtitle}
-          </Typography>
-        )}
-      </View>
-      <NoAnswerContent solvedAmount={solved} problemsAmount={total} />
-      <View style={styles.buttonsContainer}>
-        <Button
-          variant={practiceButtonVisible ? ButtonVariant.TERTIARY : ButtonVariant.PRIMARY}
-          size="large"
-          colorScheme={popUpData?.isExam ? ButtonColor.PURPLE : ButtonColor.BLUE}
-          style={{ text: { textTransform: 'uppercase' } }}
-          onPress={model.hidePopUpAndLeave}
-        >
-          {textContent.leftButtonText ?? ''}
-        </Button>
-
-        {practiceButtonVisible && (
-          <PracticeButton
-            onPress={handlePrimaryButtonPress}
-            text={textContent.rightButtonText}
-            colorScheme={buttonColorScheme}
-          />
-        )}
-      </View>
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    height: '100%',
-    gap: SPACING[400],
-    alignItems: 'center',
-    justifyContent: 'space-between',
-  },
-  buttonsContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'flex-end',
-    gap: SPACING[200],
-  },
-  title: {
-    color: COLORS.NEUTRAL_9,
-    marginBottom: SPACING[400],
-    paddingVertical: SPACING[100],
-  },
-  subtitle: { color: COLORS.NEUTRAL_7, paddingVertical: SPACING[100] },
-  textContainer: {
-    alignItems: 'center',
-  },
-  buttonText: {
-    textTransform: 'uppercase',
-  },
-})

package/src/features/endOfAssignment/components/NoAnswer/NoAnswerContent.tsx

@@ -1,107 +0,0 @@
-import React, { useEffect } from 'react'
-import { View, StyleSheet, Text } from 'react-native'
-
-import {
-  BORDER_RADIUS,
-  COLORS,
-  FONT_FAMILY,
-  IS_MOBILE,
-  SPACING,
-  Typography,
-} from '@magmamath/react-native-ui'
-import Animated, { Easing, useSharedValue, withDelay, withTiming } from 'react-native-reanimated'
-
-import { EOABadge } from '../../ui/EOABadge'
-import { AnimatedCardVariant } from '../../types'
-
-type NoAnswerContentProps = {
-  solvedAmount: number
-  problemsAmount: number
-}
-
-export const NoAnswerContent = ({ solvedAmount, problemsAmount }: NoAnswerContentProps) => {
-  const opacitySv = useSharedValue(0)
-
-  useEffect(() => {
-    opacitySv.value = withDelay(
-      100,
-      withTiming(1, {
-        duration: 300,
-        easing: Easing.inOut(Easing.ease),
-      }),
-    )
-  }, [])
-
-  return (
-    <Animated.View style={[styles.container, { opacity: opacitySv }]}>
-      <View style={styles.content}>
-        <EOABadge
-          color={COLORS.NEUTRAL_5}
-          variant={AnimatedCardVariant.CORRECT_ANSWER}
-          size={70}
-          iconSize={45}
-        />
-
-        <View style={styles.textContainer}>
-          <Typography variant="h4" style={styles.largeText}>
-            {solvedAmount}
-          </Typography>
-          <Typography style={styles.text}>
-            <Text style={styles.slash}>{'/'}</Text>
-            {problemsAmount}
-          </Typography>
-        </View>
-      </View>
-    </Animated.View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    alignSelf: 'center',
-    paddingHorizontal: SPACING[100],
-    paddingTop: SPACING[100],
-    paddingBottom: 38,
-    marginBottom: SPACING[800],
-    backgroundColor: COLORS.NEUTRAL_5,
-    borderRadius: BORDER_RADIUS[400],
-  },
-  content: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: '#fff',
-    borderRadius: BORDER_RADIUS[200],
-    paddingVertical: SPACING[400],
-    paddingHorizontal: SPACING[800],
-    gap: SPACING[500],
-  },
-  iconWrapper: {
-    backgroundColor: COLORS.NEUTRAL_5,
-    borderRadius: 100,
-    width: 70,
-    height: 70,
-    padding: 8,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  textContainer: {
-    flexDirection: 'row',
-    alignItems: 'flex-end',
-  },
-  largeText: {
-    fontSize: 48,
-    fontWeight: '700',
-    fontFamily: FONT_FAMILY.buenosAires,
-    lineHeight: 48,
-    marginBottom: IS_MOBILE ? -7 : 0,
-    color: COLORS.NEUTRAL_5,
-  },
-  text: {
-    fontSize: 16,
-    fontFamily: FONT_FAMILY.buenosAires,
-    fontWeight: '700',
-    color: '#E0E0E0',
-  },
-  slash: { paddingRight: 1 },
-})