@magmamath/students-features 0.1.3 → 0.2.0-fix-teacher-feedback-button3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magmamath/students-features",
-  "version": "0.1.3",
+  "version": "0.2.0-fix-teacher-feedback-button3",
   "description": "Magmamath features library",
   "source": "src/index.ts",
   "main": "dist/commonjs/index.js",
@@ -17,17 +17,17 @@
     "release": "release-it"
   },
   "dependencies": {
+    "@magmamath/react-native-ui": "0.2.15",
     "effector": "^23.2.3",
     "effector-react": "^23.2.1"
   },
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
-    "react-native-svg": "^15.10.0",
-    "@magmamath/react-native-ui": "*"
+    "react-native-svg": "^15.10.0"
   },
   "devDependencies": {
-    "@magmamath/react-native-ui": "0.3.0",
+    "@magmamath/react-native-ui": "0.2.15",
     "@react-native/eslint-config": "^0.73.1",
     "@release-it/conventional-changelog": "^9.0.2",
     "@types/jest": "^29.5.5",

package/src/features/chatbot/components/ChatControls/ChatControls.tsx

@@ -1,14 +1,7 @@
 import React from 'react'
 import { ComponentType, PropsWithChildren } from 'react'
 import { ActivityIndicator, Pressable, StyleSheet, View } from 'react-native'
-import {
-  Button,
-  ButtonColor,
-  ButtonSize,
-  ButtonStates,
-  ButtonVariant,
-  COLORS,
-} from '@magmamath/react-native-ui'
+import { Button } from '@magmamath/react-native-ui'
 import { useUnit } from 'effector-react'
 import { ChatbotModel } from '../../model/model'
 import { ChatbotIcon } from '../../../../shared/icons/ChatbotIcon'
@@ -56,24 +49,12 @@ export const ChatControls = ({
         <Button
           onPress={onPressClose}
           style={{
-            button: styles.buttonClose,
-          }}
-          variant={ButtonVariant.PRIMARY}
-          size={ButtonSize.LARGE}
-          colorScheme={ButtonColor.GRAY}
-          raiseLevel={5}
-          customColorScheme={{
-            [ButtonStates.DEFAULT]: {
+            container: styles.buttonClose,
+            button: {
               backgroundColor: '#FFF',
-              borderColor: COLORS.NEUTRAL_5,
-              raiseColor: COLORS.NEUTRAL_5,
-            },
-            [ButtonStates.PRESSED]: {
-              backgroundColor: COLORS.NEUTRAL_4,
-              borderColor: COLORS.NEUTRAL_5,
-              raiseColor: COLORS.NEUTRAL_5,
             },
           }}
+          raiseLevel={5}
         >
           <CloseIcon />
         </Button>
@@ -103,10 +84,6 @@ const styles = StyleSheet.create({
   buttonClose: {
     width: 50,
     height: 50,
-    borderRadius: 50,
-    paddingHorizontal: 0,
-    borderWidth: 1.5,
-    borderColor: COLORS.NEUTRAL_5,
   },
   buttonTranslate: {
     alignItems: 'center',

package/src/features/chatbot/model/api.ts

@@ -4,62 +4,25 @@ import { createControllerEffect } from '../../../lib/effector'
 import { ControlledEffect } from '../../../lib/effector/createControllerEffect'
 import { ChatbotModelProps } from '../types/model.types'
 import {
-  GetAlternativesResponse,
-  PostMessagePayload,
-  PostMessageResponse,
-  GoogleTranslatePayload,
-  GoogleTranslateResponse,
-  GoogleText2SpeechPayload,
-  GoogleText2SpeechResponse,
+    GetAlternativesResponse,
+    PostMessagePayload,
+    PostMessageResponse,
+    GoogleTranslatePayload,
+    GoogleTranslateResponse,
+    GoogleText2SpeechPayload,
+    GoogleText2SpeechResponse,
 } from '../types/api.types'
 
 export class ChatbotAPI {
-  postMessageFx: ControlledEffect<PostMessagePayload, PostMessageResponse>
-  getAlternativesFx: Effect<void, GetAlternativesResponse>
-  translateTextFx: Effect<GoogleTranslatePayload, GoogleTranslateResponse>
-  textToSpeechTextFx: Effect<GoogleText2SpeechPayload, GoogleText2SpeechResponse>
-
-  private KATEX_REPLACEMENTS = {
-    '\\$': '__KATEX_DOLLAR_SYMBOL__',
-  } as const
-
-  private KATEX_REPLACEMENTS_REVERSE = {
-    __KATEX_DOLLAR_SYMBOL__: '$',
-  } as const
-
-  private replaceKatexSyntax(texts: string[], reverse = false) {
-    const replacements = reverse
-      ? Object.entries(this.KATEX_REPLACEMENTS_REVERSE)
-      : Object.entries(this.KATEX_REPLACEMENTS)
-
-    return texts.map(text =>
-      replacements.reduce(
-        (newText, [pattern, placeholder]) => newText.replace(new RegExp(pattern, 'g'), placeholder),
-        text,
-      ),
-    )
-  }
-
-  constructor(api: ChatbotModelProps['api']) {
-    this.postMessageFx = createControllerEffect(api.postMessage)
-    this.getAlternativesFx = createEffect(api.getAlternatives)
-    this.translateTextFx = createEffect(async (payload: GoogleTranslatePayload) => {
-      const response = await api.postTranslateText({
-        ...payload,
-        text: this.replaceKatexSyntax(payload.text),
-      })
-
-      return {
-        ...response,
-        data: {
-          ...response.data,
-          translations: response.data.translations.map(translation => ({
-            ...translation,
-            translatedText: this.replaceKatexSyntax([translation.translatedText], true)[0],
-          })),
-        },
-      }
-    })
-    this.textToSpeechTextFx = createEffect(api.postTextToSpeech)
-  }
+    postMessageFx: ControlledEffect<PostMessagePayload, PostMessageResponse>
+    getAlternativesFx: Effect<void, GetAlternativesResponse>
+    translateTextFx: Effect<GoogleTranslatePayload, GoogleTranslateResponse>
+    textToSpeechTextFx: Effect<GoogleText2SpeechPayload, GoogleText2SpeechResponse>
+
+    constructor(api: ChatbotModelProps['api']) {
+        this.postMessageFx = createControllerEffect(api.postMessage)
+        this.getAlternativesFx = createEffect(api.getAlternatives)
+        this.translateTextFx = createEffect(api.postTranslateText)
+        this.textToSpeechTextFx = createEffect(api.postTextToSpeech)
+    }
 }

package/src/features/feedback/components/EmptyComment/EmptyComment.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import { COLORS } from '@magmamath/react-native-ui'
+import { BUENOS_AIRES_FONT, NO_COMMENTS_SWE, NO_COMMENTS_ENG } from '../../constants'
+import { Locale } from '../../types/teacherFeedback.types'
+
+type EmptyCommentProps = {
+  locale: Locale | null
+}
+
+export const EmptyComment = ({ locale }: EmptyCommentProps) => {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.text}>{locale === Locale.SV ? NO_COMMENTS_SWE : NO_COMMENTS_ENG}</Text>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 8,
+    gap: 10,
+    borderTopLeftRadius: 8,
+    borderTopRightRadius: 8,
+    borderBottomRightRadius: 8,
+    shadowColor: COLORS.PRIMARY_SHADOW,
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.25,
+    shadowRadius: 3,
+    elevation: 3,
+    backgroundColor: COLORS.NEUTRAL_3,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    fontSize: 24,
+    fontFamily: BUENOS_AIRES_FONT,
+    fontWeight: '600',
+    color: COLORS.NEUTRAL_7,
+    padding: 8,
+    lineHeight: 20,
+  },
+})

package/src/features/feedback/components/ListCardCommentsCount/ListCardCommentsCount.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { Text, View, StyleSheet } from 'react-native'
+import { MessageBubbleIcon } from '../icons/MessageBubbleIcon'
+import { COLORS } from '@magmamath/react-native-ui'
+import { BUENOS_AIRES_FONT } from '../../constants'
+
+type ListCardCommentsCountProps = {
+  count: number
+}
+
+export const ListCardCommentsCount = ({ count }: ListCardCommentsCountProps) => {
+  return (
+    <View style={styles.container}>
+      <MessageBubbleIcon size={23} color={COLORS.NEUTRAL_7} />
+      <Text style={styles.text}>{count}</Text>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: 64,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  text: {
+    fontSize: 14,
+    fontFamily: BUENOS_AIRES_FONT,
+    color: COLORS.NEUTRAL_7,
+    fontWeight: 400,
+  },
+})

package/src/features/feedback/components/TeacherFeedback.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import { useStoreMap, useUnit } from 'effector-react'
+import { View, StyleSheet } from 'react-native'
+import { TeacherFeedbackButton } from './TeacherFeedbackButton/TeacherFeedbackButton'
+import { TeacherFeedbackComments } from './TeacherFeedbackComments/TeacherFeedbackComments'
+import { TeacherFeedbackModel } from '../model/teacherFeedback.model'
+import { TEACHER_FEEDBACK_BUTTON_ID } from '../constants'
+
+type TeacherFeedbackProps = {
+  model: TeacherFeedbackModel
+  mode: 'regular' | 'simple'
+}
+
+export const TeacherFeedback = ({ model, mode }: TeacherFeedbackProps) => {
+  const isOpen = useUnit(model.$isOpened)
+  const assignmentId = useUnit(model.$assignmentId)
+  const problemId = useUnit(model.$currentProblemId)
+  const locale = useUnit(model.$locale)
+  const isLoading = useUnit(model.getCommentsByAssignmentIdFx.pending)
+  const teacherFeedback = useStoreMap({
+    store: model.$comments,
+    fn: (feedback, [assignmentId, problemId]) => feedback.get(assignmentId)?.[problemId] ?? null,
+    keys: [assignmentId, problemId],
+  })
+
+  if (!problemId || !teacherFeedback) return null
+
+  return (
+    <View style={styles.container}>
+      {isOpen && <TeacherFeedbackComments comments={teacherFeedback.comments} locale={locale} mode={mode} />}
+
+      <TeacherFeedbackButton
+        onPress={() => model.setIsOpened(!isOpen)}
+        unreadCommentsCount={teacherFeedback.unreadMessagesCount}
+        isOpen={isOpen}
+        isLoading={isLoading}
+        size={mode === 'regular' ? 'small' : 'large'}
+      />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'flex-end',
+    gap: 11,
+  },
+})

package/src/features/feedback/components/TeacherFeedbackButton/TeacherFeedbackButton.tsx

@@ -0,0 +1,115 @@
+import React from 'react'
+import { GestureResponderEvent, StyleSheet, View } from 'react-native'
+import { Button, COLORS } from '@magmamath/react-native-ui'
+import { UnreadMessagesBadge } from '../UnreadMessagesBadge'
+import { MessageBubbleIcon } from '../icons/MessageBubbleIcon'
+import { XCloseIcon } from '../icons/XCloseIcon'
+import { COLOR_SCHEMES } from './colorSchemes'
+import { TEACHER_FEEDBACK_BUTTON_ID } from '../../constants'
+
+type TeacherFeedbackButtonProps = {
+  isOpen: boolean
+  isLoading: boolean
+  onPress?: () => void
+  unreadCommentsCount?: number
+  size?: 'small' | 'large'
+}
+
+export const TeacherFeedbackButton = ({
+  isOpen,
+  onPress,
+  unreadCommentsCount,
+  isLoading,
+  size = 'large',
+}: TeacherFeedbackButtonProps) => {
+  const handlePress = (event: GestureResponderEvent) => {
+    event.stopPropagation()
+    onPress?.()
+  }
+
+  if (isOpen) {
+    return (
+      <Button
+        key='open'
+        id={TEACHER_FEEDBACK_BUTTON_ID}
+        onPress={handlePress}
+        size='large'
+        variant='primary'
+        disabled={isLoading}
+        isLoading={isLoading}
+        style={{
+          container: styles.container,
+          button: [styles.button, { borderColor: COLORS.NEUTRAL_5 }, styles[size]],
+        }}
+        data-skip-confetti='true'
+        customColorScheme={COLOR_SCHEMES.GREY}
+        icon={<XCloseIcon size={size === 'large' ? 37 : 26} />}
+      />
+    )
+  }
+
+  return (
+    <Button
+      key='closed'
+      id={TEACHER_FEEDBACK_BUTTON_ID}
+      onPress={handlePress}
+      size='large'
+      variant='primary'
+      disabled={isLoading}
+      isLoading={isLoading}
+      style={{
+        container: styles.container,
+        button: [
+          styles.button,
+          { borderColor: !!unreadCommentsCount ? COLORS.BLUE_6 : COLORS.NEUTRAL_5 },
+          styles[size],
+        ],
+      }}
+      customColorScheme={!!unreadCommentsCount ? COLOR_SCHEMES.BLUE : COLOR_SCHEMES.GREY}
+      icon={
+        <View style={styles.iconContainer}>
+          <MessageBubbleIcon
+            color={!!unreadCommentsCount ? COLORS.NEUTRAL_1 : COLORS.NEUTRAL_9}
+            size={size === 'large' ? 37 : 26}
+          />
+          {!!unreadCommentsCount && (
+            <View style={styles.badgeContainer}>
+              <UnreadMessagesBadge badgeContent={unreadCommentsCount} />
+            </View>
+          )}
+        </View>
+      }
+    />
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: 54,
+    height: 54,
+  },
+  small: {
+    width: 50,
+    height: 50,
+  },
+  large: {
+    width: 75,
+    height: 75,
+  },
+  button: {
+    borderWidth: 2,
+  },
+  buttonLarge: {
+    width: 75,
+    height: 75,
+    borderWidth: 2,
+  },
+  iconContainer: {
+    position: 'relative',
+  },
+  badgeContainer: {
+    position: 'absolute',
+    top: -17,
+    right: -17,
+  },
+})

package/src/features/feedback/components/TeacherFeedbackButton/colorSchemes.ts

@@ -0,0 +1,38 @@
+import { ButtonStates, COLORS } from '@magmamath/react-native-ui'
+
+export const COLOR_SCHEMES = {
+  BLUE: {
+    [ButtonStates.DEFAULT]: {
+      borderColor: COLORS.BLUE_6,
+      raiseColor: COLORS.BLUE_6,
+      backgroundColor: COLORS.PRIMARY_BLUE,
+    },
+    [ButtonStates.PRESSED]: {
+      borderColor: COLORS.BLUE_6,
+      raiseColor: COLORS.BLUE_6,
+      backgroundColor: COLORS.PRIMARY_BLUE,
+    },
+    [ButtonStates.HOVER]: {
+      borderColor: COLORS.BLUE_6,
+      raiseColor: COLORS.BLUE_6,
+      backgroundColor: COLORS.PRIMARY_BLUE,
+    },
+  },
+  GREY: {
+    [ButtonStates.DEFAULT]: {
+      borderColor: COLORS.NEUTRAL_5,
+      raiseColor: COLORS.NEUTRAL_5,
+      backgroundColor: COLORS.NEUTRAL_1,
+    },
+    [ButtonStates.PRESSED]: {
+      borderColor: COLORS.NEUTRAL_5,
+      raiseColor: COLORS.NEUTRAL_5,
+      backgroundColor: COLORS.NEUTRAL_1,
+    },
+    [ButtonStates.HOVER]: {
+      borderColor: COLORS.NEUTRAL_5,
+      raiseColor: COLORS.NEUTRAL_5,
+      backgroundColor: COLORS.NEUTRAL_1,
+    },
+  },
+}

package/src/features/feedback/components/TeacherFeedbackComments/TeacherComment.tsx

@@ -0,0 +1,80 @@
+import React from 'react'
+import { View, Text, StyleSheet } from 'react-native'
+import { COLORS } from '@magmamath/react-native-ui'
+import { getRelativeTime } from '../../helpers'
+import { BUENOS_AIRES_FONT } from '../../constants'
+import { Locale } from '../../types/teacherFeedback.types'
+
+type TeacherCommentProps = {
+  content: string
+  teacherName: string
+  createdAt: Date
+  locale: Locale | null
+  isLastComment: boolean
+}
+
+export const TeacherComment = ({ content, teacherName, createdAt, locale, isLastComment }: TeacherCommentProps) => {
+  return (
+    <View style={{ marginBottom: isLastComment ? 8 : 0 }}>
+      <View style={styles.authorInfo}>
+        <Text style={styles.teacherName} numberOfLines={1}>
+          {teacherName}
+        </Text>
+        <View style={styles.spacer} />
+        <Text style={styles.dateAdded} numberOfLines={1}>
+          {getRelativeTime(createdAt, locale ?? Locale.US)}
+        </Text>
+      </View>
+
+      <View style={styles.container}>
+        <Text style={styles.text}>{content}</Text>
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 8,
+    gap: 8,
+    borderTopLeftRadius: 8,
+    borderTopRightRadius: 8,
+    borderBottomRightRadius: 8,
+    shadowColor: COLORS.PRIMARY_SHADOW,
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.25,
+    shadowRadius: 3,
+    elevation: 3,
+    backgroundColor: COLORS.NEUTRAL_3,
+  },
+  text: {
+    fontSize: 20,
+    fontFamily: BUENOS_AIRES_FONT,
+    color: COLORS.NEUTRAL_10,
+    lineHeight: 20,
+  },
+  authorInfo: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  teacherName: {
+    maxWidth: 200,
+    fontSize: 16,
+    fontWeight: '600',
+    fontFamily: BUENOS_AIRES_FONT,
+    color: COLORS.NEUTRAL_9,
+  },
+  dateAdded: {
+    maxWidth: 140,
+    fontSize: 16,
+    fontFamily: BUENOS_AIRES_FONT,
+    fontWeight: '400',
+    color: COLORS.NEUTRAL_7,
+  },
+  spacer: {
+    height: 14,
+    width: 2,
+    backgroundColor: COLORS.NEUTRAL_6,
+  },
+})

package/src/features/feedback/components/TeacherFeedbackComments/TeacherFeedbackComments.tsx

@@ -0,0 +1,69 @@
+import React, { useEffect, useRef } from 'react'
+import { Platform, ScrollView, StyleSheet, useWindowDimensions, View } from 'react-native'
+import { Locale, TeacherComment as FeedbackComment } from '../../types/teacherFeedback.types'
+import { TeacherComment } from './TeacherComment'
+import { EmptyComment } from '../EmptyComment/EmptyComment'
+import { EMPTY_COMMENT_ID } from '../../constants'
+import { COLORS } from '@magmamath/react-native-ui'
+
+const TOOLBAR_HEIGHT = 140
+const BOTTOM_OFFSET = Platform.OS === 'web' ? 270 : 304
+const SIMPLE_MODE_OFFSET = 70
+
+type TeacherFeedbackCommentsProps = {
+  comments: FeedbackComment[] | null
+  locale: Locale | null
+  mode: 'regular' | 'simple'
+}
+
+export const TeacherFeedbackComments = ({ comments, locale, mode }: TeacherFeedbackCommentsProps) => {
+  const ref = useRef<ScrollView | null>(null)
+  const dimensions = useWindowDimensions()
+  const MAX_HEIGHT = dimensions.height - TOOLBAR_HEIGHT - BOTTOM_OFFSET
+
+  useEffect(() => {
+    ref.current?.scrollToEnd({ animated: false })
+  }, [])
+
+  if (!comments) return null
+
+  return (
+    <View style={[styles.container, { maxHeight: MAX_HEIGHT - (mode === 'simple' ? SIMPLE_MODE_OFFSET : 0) }]}>
+      <ScrollView
+        ref={ref}
+        contentContainerStyle={styles.commentsList}
+        onContentSizeChange={() => ref.current?.scrollToEnd()}
+      >
+        {comments.length === 1 && comments[0]._id === EMPTY_COMMENT_ID ? (
+          <EmptyComment locale={locale} />
+        ) : (
+          comments.map((comment, index) => (
+            <TeacherComment
+              key={comment._id}
+              teacherName={comment.teacherName}
+              content={comment.content}
+              createdAt={comment.createdAt}
+              locale={locale}
+              isLastComment={index === comments.length - 1}
+            />
+          ))
+        )}
+      </ScrollView>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: 368,
+    backgroundColor: COLORS.NEUTRAL_1,
+    paddingTop: 8,
+    paddingLeft: 8,
+    paddingRight: 8,
+    paddingBottom: 0,
+    borderRadius: 8,
+  },
+  commentsList: {
+    gap: 8,
+  },
+})

package/src/features/feedback/components/UnreadMessagesBadge.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import { Text, View, StyleSheet, Platform, StyleProp, ViewStyle } from 'react-native'
+import { COLORS } from '@magmamath/react-native-ui'
+
+type UnreadMessagesBadgeProps = {
+  badgeContent?: number
+  withBorder?: boolean
+  style?: StyleProp<ViewStyle>
+}
+
+export const UnreadMessagesBadge = ({ badgeContent, withBorder = false, style }: UnreadMessagesBadgeProps) => {
+  return (
+    <View
+      style={[
+        styles.container,
+        style,
+        !badgeContent && styles.emptyBadge,
+        withBorder && styles.border,
+        withBorder && (badgeContent ? styles.withBorderSize : styles.withBorderSizeEmpty),
+      ]}
+    >
+      <Text style={styles.text}>{badgeContent && badgeContent > 99 ? '99+' : badgeContent}</Text>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    backgroundColor: COLORS.PRIMARY_RED,
+  },
+  emptyBadge: {
+    width: 10,
+    height: 10,
+  },
+  border: {
+    borderWidth: 1.5,
+    borderColor: COLORS.NEUTRAL_1,
+  },
+  withBorderSize: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+  },
+  withBorderSizeEmpty: {
+    width: 11.5,
+    height: 11.5,
+    borderRadius: 5.75,
+  },
+  text: {
+    fontSize: 12,
+    lineHeight: 16,
+    fontWeight: '600',
+    fontFamily: Platform.OS === 'web' ? 'Open Sans, sans-serif' : 'OpenSans-SemiBold',
+    color: COLORS.NEUTRAL_1,
+  },
+})

package/src/features/feedback/components/icons/MessageBubbleIcon.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import { IconProps, COLORS } from '@magmamath/react-native-ui'
+
+export const MessageBubbleIcon = ({ size = 26, color = COLORS.NEUTRAL_1 }: IconProps) => {
+  return (
+    <Svg width={size} height={size} viewBox='0 0 26 26' fill='none'>
+      <Path
+        d='M1.46731 10.0594C0.934026 14.231 2.94959 17.0124 4.72827 18.403C5.15473 20.0717 4.90596 21.8796 4.72827 22.5749C6.86227 22.1577 8.40099 20.946 8.93496 20.2507C12.6702 21.2937 23.0923 21.063 24.4129 14.7527C25.5097 9.51166 22.2158 5.12788 15.3416 3.80165C7.2255 2.23582 2.01279 5.79234 1.46731 10.0594Z'
+        stroke={color}
+        strokeWidth='2'
+        strokeLinejoin='round'
+      />
+    </Svg>
+  )
+}

package/src/features/feedback/components/icons/XCloseIcon.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import { IconProps, COLORS } from '@magmamath/react-native-ui'
+
+export const XCloseIcon = ({ size = 26, color = COLORS.NEUTRAL_9 }: IconProps) => {
+  return (
+    <Svg width={size} height={size} viewBox='0 0 26 26' fill='none'>
+      <Path
+        d='M4.38388 2.61612C3.89573 2.12796 3.10427 2.12796 2.61612 2.61612C2.12796 3.10427 2.12796 3.89573 2.61612 4.38388L11.2322 13L2.61612 21.6161C2.12796 22.1043 2.12796 22.8957 2.61612 23.3839C3.10427 23.872 3.89573 23.872 4.38388 23.3839L13 14.7678L21.6161 23.3839C22.1043 23.872 22.8957 23.872 23.3839 23.3839C23.872 22.8957 23.872 22.1043 23.3839 21.6161L14.7678 13L23.3839 4.38388C23.872 3.89573 23.872 3.10427 23.3839 2.61612C22.8957 2.12796 22.1043 2.12796 21.6161 2.61612L13 11.2322L4.38388 2.61612Z'
+        fill={color}
+      />
+    </Svg>
+  )
+}