@magmamath/students-features 1.3.4-rc.2 → 1.3.4

package/src/features/pmProgress/shared/pmProgress.types.ts

@@ -0,0 +1,217 @@
+import { DOMAIN_COLORS, SolvingFlow } from './pmProgress.constants'
+import type { SkillsToPracticeDto } from '@matteappen/skills-utils/enhanceProgressData/types'
+
+type StatsSkill = {
+  userId: string
+  skillId: string
+  achievedSkills: number
+  failedSkills: number
+  totalSkills: number
+}
+
+export type StatsPayload = {
+  entityIds: string[]
+}
+
+export type StatsResponse = {
+  entityId: string
+  skills: StatsSkill[]
+}[]
+
+export type GetRecommendationsPayload = {
+  limit?: number
+}
+
+type Ability = {
+  functionName: string
+  problemCount: number
+  sectionId: string
+  visibility: unknown[]
+}
+
+export type Skill = {
+  _id: string
+  nameTranslations: string
+  shortDescriptionTranslations: string
+  descriptionTranslations: string
+  ability: Ability
+  theory: {
+    languageCode: string
+    theory: string
+  }[]
+  type?: SolvingFlow
+}
+
+type MappingTree = {
+  _id: string
+  parents: string[]
+  type: string
+  nameTranslations: string
+  shortDescriptionTranslations: string
+  descriptionTranslations: string
+  order: number
+  children: string[]
+  skills: string[]
+  originalId: string
+  originalPath: string
+  attributes: { grade: number }
+}
+
+export type TreeId = string
+
+export type SkillsMapping = Record<string, Skill & { difficulty: number }>
+
+export type TreeMappingResponse = {
+  rootId: string
+  skillsMapping: SkillsMapping
+  treeMapping: Record<string, MappingTree>
+}
+
+export enum RecommendationType {
+  MAGMA = 'magma',
+  TEACHER = 'teacher',
+}
+
+type Recommendation<T extends string = RecommendationType> = {
+  _id: string
+  type: T
+  skillId: string
+  teacherId: string
+  studentId: string
+  exerciseIds: string[]
+  failedAttempts: string[]
+  refreshedAt: string
+  createdAt: string
+  updatedAt: string
+}
+
+export type RecsResponse<T extends RecommendationType = RecommendationType.MAGMA> = {
+  offset: number
+  limit: number
+  total: number
+  items: Recommendation<T>[]
+}
+
+export type Recommendations = {
+  items: Skill[]
+  offset: number
+  limit: number
+  total: number
+}
+
+export type UserTimeframeStats = {
+  studentId: string
+  practiceModeStatsByTimeFrame: {
+    all: {
+      timeInPracticeMs: number
+      numberOfStars: number
+    }
+    week: {
+      timeInPracticeMs: number
+      numberOfStars: number
+    }
+    lastWeek: {
+      timeInPracticeMs: number
+      numberOfStars: number
+    }
+  }
+}
+
+export type SkillsCount = {
+  total: number
+  achieved: number
+  failed: number
+}
+
+export type DomainStandard = {
+  standardId: string
+  title: string
+  subtitle: string
+  skillIds: string[]
+  skillsToPractice?: SkillsToPracticeDto
+  skillsCount: SkillsCount
+  isCompleted: boolean
+  skillsLeft: number
+  scorePercentage: number
+}
+
+export type Domain = {
+  domainId: string
+  title: string
+  color: string
+  borderColor: string
+  backgroundColor: string
+  standards: DomainStandard[]
+  scorePercentage: number
+}
+
+export type User = {
+  _id: string
+  fullName: string
+  grade: number | null
+  enrolledGrades: number[]
+  setting: {
+    practiceModeTreeId: string
+    practiceModeLockedGrades: number[]
+  }
+}
+
+export type Grade = {
+  name: string
+  value: number
+  isLocked: boolean
+}
+
+export type GradeLabel = {
+  name: string
+  noPrefix?: boolean
+}
+
+export type GradeLabelsMap = Record<string, GradeLabel>
+
+export type PmProgressGateProps = {
+  user: User
+}
+
+export type SetupInitialGradeProps = { tree: TreeMappingResponse; user: User }
+
+export type GetTreeContextFxParams = {
+  tree: TreeMappingResponse
+  stats: StatsResponse
+  user: User
+  grade: number
+}
+
+export type TreeContext = {
+  tree: TreeMappingResponse
+  stats: StatsResponse
+  user: User
+  treeWithStats: unknown
+}
+
+export type QueueBuilderData<T extends StartSolvingProps = StartSolvingProps> = {
+  domains: Domain[]
+  context: TreeContext
+} & T
+
+export type TeacherQueueData = QueueBuilderData<StartSolvingTeacher>
+export type MagmaQueueData = QueueBuilderData<StartSolvingMagma>
+export type StandardQueueData = QueueBuilderData<StartSolvingStandard>
+
+export type StartSolvingTeacher = {
+  type: SolvingFlow.TEACHER
+  skillId?: string
+}
+
+export type StartSolvingMagma = {
+  type: SolvingFlow.MAGMA
+}
+
+export type StartSolvingStandard = {
+  type: SolvingFlow.STANDARD
+  standardId: string
+}
+
+export type StartSolvingProps = StartSolvingTeacher | StartSolvingMagma | StartSolvingStandard
+
+export type DomainColor = (typeof DOMAIN_COLORS)[number]

package/src/features/voice/constants.ts

@@ -1,12 +1,6 @@
 export const VOICE_RECORDER_CONTAINER_SIZES = {
-  COLLAPSED: {
-    default: 61,
-    advanced: 52,
-  },
-  EXPANDED: {
-    default: 152,
-    advanced: 136,
-  },
+  COLLAPSED: 61,
+  EXPANDED: 152,
 }
 export const VOICE_RECORDER_MAX_DURATION_MS = 60000 // 1 minute
 export const VOICE_RECORDER_MIN_DURATION_MS = 300
@@ -19,8 +13,3 @@ export const DROPDOWN_MAX_CONTENT_HEIGHT = 330
 export const TRANSCRIPT_RETRY_INTERVAL_MS = 4000
 export const TRANSCRIPT_MAX_RETRIES = 15
 export const NO_AUDIO_BE_MESSAGE = 'No audio'
-
-export const VOICE_RECORD_SHAWODS = {
-  default: '0 1px 3px 0 rgba(51, 51, 51, 0.10), 0 0 1px 0 rgba(51, 51, 51, 0.40)',
-  advanced: '0 0 1px 0 rgba(51, 51, 51, 0.20), 0 3px 10px 0 rgba(51, 51, 51, 0.16)',
-}

package/src/features/voice/recording/components/VoiceRecord.tsx

@@ -1,7 +1,7 @@
 import { StyleProp, ViewStyle, StyleSheet } from 'react-native'
 import { VoiceRecordButton } from './VoiceRecordButton'
 import React, { useEffect } from 'react'
-import { BORDER_RADIUS, COLORS, SPACING } from '@magmamath/react-native-ui'
+import { COLORS, SPACING } from '@magmamath/react-native-ui'
 import { VoiceRecordDeleteButton } from './VoiceRecordDeleteButton'
 import { VoiceRecordDivider } from './VoiceRecordDivider'
 import { VoiceRecordTimer } from './VoiceRecordTimer'
@@ -10,8 +10,6 @@ import { VoiceRecordModel } from '../model/VoiceRecord.model'
 import { useVoiceRecorder } from '../hooks/useVoiceRecorder'
 import { useVoiceRecorderAnimation } from '../hooks/useVoiceRecorderAnimation'
 import { useUnit } from 'effector-react'
-import { RecordButtonVariant } from '../../types'
-import { VOICE_RECORD_SHAWODS } from '../../constants'
 
 type VoiceRecordProps = {
   style?: StyleProp<ViewStyle>
@@ -22,8 +20,7 @@ export const VoiceRecord = ({ style, model }: VoiceRecordProps) => {
   const { recorderState } = useVoiceRecorder(model)
   const [isExpanded, isDisabled] = useUnit([model.$isExpanded, model.$isButtonDisabled])
 
-  const recordButtonVariant = model.recordButtonVariant
-  const { containerAnimatedStyle } = useVoiceRecorderAnimation(isExpanded, recordButtonVariant)
+  const { containerAnimatedStyle } = useVoiceRecorderAnimation(isExpanded)
 
   useEffect(() => {
     return () => {
@@ -32,23 +29,12 @@ export const VoiceRecord = ({ style, model }: VoiceRecordProps) => {
   }, [model])
 
   return (
-    <Animated.View
-      style={[
-        styles.container,
-        recordButtonVariant === RecordButtonVariant.ADVANCED && styles.advancedVariantContainer,
-        { boxShadow: VOICE_RECORD_SHAWODS[recordButtonVariant] },
-        style,
-        containerAnimatedStyle,
-      ]}
-    >
+    <Animated.View style={[styles.container, style, containerAnimatedStyle]}>
       <VoiceRecordButton model={model} />
       {isExpanded && (
         <Animated.View entering={FadeIn} exiting={FadeOut} style={styles.expendedContainer}>
           <VoiceRecordTimer
-            style={[
-              styles.timer,
-              recordButtonVariant === RecordButtonVariant.ADVANCED && styles.advancedVariantTimer,
-            ]}
+            style={styles.timer}
             model={model}
             recordingFileDurationMs={recorderState.durationMillis}
           />
@@ -67,21 +53,12 @@ const styles = StyleSheet.create({
     paddingBottom: 6,
     backgroundColor: COLORS.NEUTRAL_3,
     borderRadius: 32,
-  },
-  advancedVariantContainer: {
-    borderRadius: BORDER_RADIUS[300],
-    padding: 0,
+    boxShadow: '0 1px 3px 0 rgba(51, 51, 51, 0.10), 0 0 1px 0 rgba(51, 51, 51, 0.40)',
     overflow: 'hidden',
   },
   timer: {
     marginTop: SPACING[400],
   },
-  defaultTimer: {
-    marginTop: SPACING[300],
-  },
-  advancedVariantTimer: {
-    marginTop: SPACING[150],
-  },
   expendedContainer: {
     alignItems: 'center',
   },

package/src/features/voice/recording/components/VoiceRecordButton.tsx

@@ -1,35 +1,25 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import {
-  BORDER_RADIUS,
   Button,
   ButtonColor,
   ButtonSize,
   ButtonStyle,
   ButtonVariant,
-  CheckIcon,
-  COLORS,
   IS_WEB,
-  MicrophoneIcon,
 } from '@magmamath/react-native-ui'
-import { Pressable, StyleSheet, View } from 'react-native'
+import { Pressable } from 'react-native'
+import { MicrophoneIcon, CheckIcon } from '@magmamath/react-native-ui'
 import { VoiceRecordModel } from '../model/VoiceRecord.model'
 import { useUnit } from 'effector-react'
-import { VOICE_RECORD_SHAWODS, VoiceRecorderState } from '../../constants'
+import { VoiceRecorderState } from '../../constants'
 import { useText } from '../../../../shared/translation'
-import { RecordButtonVariant } from '../../types'
 
 type VoiceRecordButtonProps = {
+  style?: ButtonStyle
   model: VoiceRecordModel
 }
 
-const defaultButtonStyles: ButtonStyle = {
-  button: {
-    width: 50,
-    height: 50,
-  },
-}
-
-export const VoiceRecordButton = ({ model }: VoiceRecordButtonProps) => {
+export const VoiceRecordButton = ({ style, model }: VoiceRecordButtonProps) => {
   const t = useText()
 
   const availableInputs = useUnit(model.recorderModel.$availableInputs)
@@ -37,97 +27,38 @@ export const VoiceRecordButton = ({ model }: VoiceRecordButtonProps) => {
   const isButtonDisabled = useUnit(model.$isButtonDisabled)
   const isInitializing = useUnit(model.initializeRecording.pending)
 
-  const isRecording = voiceRecordState === VoiceRecorderState.RECORDING
-  const isIdle = voiceRecordState === VoiceRecorderState.IDLE
-  const hasInputs = availableInputs.length > 0
+  const combinedStyles = useMemo((): ButtonStyle => {
+    return {
+      button: [{ width: 50, height: 50 }, style?.button],
+      container: [style?.container],
+      text: [style?.text],
+    }
+  }, [style])
 
   return (
     <Pressable
       onPressIn={(e) => {
-        if (hasInputs) return
+        if (availableInputs.length) return
         e.preventDefault()
         model.notification.warning(t('voice.noMicrophoneFound'))
       }}
-      pointerEvents={!hasInputs || isInitializing ? 'box-only' : 'auto'}
-      style={[isButtonDisabled ? styles.disabledCursor : undefined]}
+      pointerEvents={!availableInputs.length || isInitializing ? 'box-only' : 'auto'}
     >
-      {model.recordButtonVariant === RecordButtonVariant.ADVANCED ? (
-        <AdvancedButton
-          isRecording={isRecording}
-          isIdle={isIdle}
-          disabled={isButtonDisabled}
-          onPressIn={() => model.recorderButtonHandler()}
-        />
-      ) : (
-        <Button
-          disabled={isButtonDisabled}
-          onPressIn={() => model.recorderButtonHandler()}
-          style={defaultButtonStyles}
-          size={ButtonSize.LARGE}
-          variant={ButtonVariant.SECONDARY}
-          colorScheme={ButtonColor.WHITE}
-          icon={
-            isRecording ? (
-              <CheckIcon size={25} />
-            ) : (
-              <MicrophoneIcon style={IS_WEB ? { width: 19 } : { minWidth: 23, minHeight: 23 }} />
-            )
-          }
-        />
-      )}
+      <Button
+        disabled={isButtonDisabled || !availableInputs.length}
+        onPressIn={() => model.recorderButtonHandler()}
+        style={combinedStyles}
+        size={ButtonSize.LARGE}
+        variant={ButtonVariant.SECONDARY}
+        colorScheme={ButtonColor.WHITE}
+        icon={
+          voiceRecordState === VoiceRecorderState.RECORDING ? (
+            <CheckIcon size={25} />
+          ) : (
+            <MicrophoneIcon style={IS_WEB ? { width: 19 } : { minWidth: 23, minHeight: 23 }} />
+          )
+        }
+      />
     </Pressable>
   )
 }
-
-type AdvancedButtonProps = {
-  isRecording: boolean
-  isIdle: boolean
-  disabled: boolean
-  onPressIn: () => void
-}
-
-const AdvancedButton = ({ isRecording, isIdle, disabled, onPressIn }: AdvancedButtonProps) => (
-  <Pressable
-    style={[styles.advancedButtonContainer, disabled && styles.disabledCursor]}
-    onPressIn={onPressIn}
-    disabled={disabled}
-  >
-    <View
-      style={[
-        styles.advancedIconContainer,
-        !isIdle && { borderRadius: 32, backgroundColor: COLORS.PRIMARY_BLUE },
-      ]}
-    >
-      {isRecording ? (
-        <CheckIcon size={18} color={COLORS.NEUTRAL_1} />
-      ) : (
-        <MicrophoneIcon
-          style={{ width: 14, height: 19 }}
-          color={disabled ? COLORS.NEUTRAL_5 : isIdle ? COLORS.NEUTRAL_9 : COLORS.NEUTRAL_1}
-        />
-      )}
-    </View>
-  </Pressable>
-)
-
-const styles = StyleSheet.create({
-  advancedButtonContainer: {
-    width: 52,
-    height: 52,
-    backgroundColor: 'white',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: BORDER_RADIUS[300],
-    boxShadow: VOICE_RECORD_SHAWODS[RecordButtonVariant.ADVANCED],
-  },
-  advancedIconContainer: {
-    width: 36,
-    height: 36,
-    borderRadius: BORDER_RADIUS[300],
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  disabledCursor: {
-    cursor: 'not-allowed' as 'auto',
-  },
-})

package/src/features/voice/recording/components/VoiceRecordDeleteButton.tsx

@@ -17,8 +17,8 @@ export const VoiceRecordDeleteButton = ({ onPress, isDisabled }: VoiceRecordDele
 
 const styles = StyleSheet.create({
   container: {
-    width: 32,
-    height: 32,
+    width: 36,
+    height: 36,
     alignItems: 'center',
     justifyContent: 'center',
   },

package/src/features/voice/recording/hooks/useVoiceRecorderAnimation.ts

@@ -1,23 +1,19 @@
 import { useAnimatedStyle, withTiming } from 'react-native-reanimated'
 import { VOICE_RECORDER_CONTAINER_SIZES } from '../../constants'
-import { RecordButtonVariant } from '../../types'
 
-export const useVoiceRecorderAnimation = (
-  isExpanded: boolean,
-  recordButtonVariant: RecordButtonVariant,
-) => {
+export const useVoiceRecorderAnimation = (isExpanded: boolean) => {
   const containerAnimatedStyle = useAnimatedStyle(() => {
     return {
       height: withTiming(
         isExpanded
-          ? VOICE_RECORDER_CONTAINER_SIZES.EXPANDED[recordButtonVariant]
-          : VOICE_RECORDER_CONTAINER_SIZES.COLLAPSED[recordButtonVariant],
+          ? VOICE_RECORDER_CONTAINER_SIZES.EXPANDED
+          : VOICE_RECORDER_CONTAINER_SIZES.COLLAPSED,
         {
           duration: 280,
         },
       ),
     }
-  }, [isExpanded, recordButtonVariant])
+  }, [isExpanded])
 
   return { containerAnimatedStyle }
 }

package/src/features/voice/recording/model/VoiceRecord.model.ts

@@ -4,7 +4,6 @@ import { VoiceRecordsCollection } from './VoiceRecordCollection'
 import { UploaderModel } from './Uploader.model'
 import { VoiceRecorderState } from '../../constants'
 import {
-  RecordButtonVariant,
   VoiceRecordCollectionItem,
   VoiceRecorderApi,
   VoiceRecordNotificationTypes,
@@ -59,8 +58,6 @@ export class VoiceRecordModel {
   public readonly events: VoiceRecordEvents
   private shouldDiscardRecording = false
 
-  public recordButtonVariant = RecordButtonVariant.DEFAULT
-
   public readonly setCurrentKey = createEvent<string>()
   public readonly setCurrentRecord = createEvent<any>()
   public readonly reset = createEvent()
@@ -85,10 +82,6 @@ export class VoiceRecordModel {
     await this.api.deleteAudioFile(audioFileId)
   })
 
-  public readonly setRecordButtonVariant = createEffect((variant: RecordButtonVariant) => {
-    this.recordButtonVariant = variant
-  })
-
   public readonly deleteCurrentRecording = attach({
     source: this.$currentKey,
     mapParams: (props: DeleteCurrentRecordingProps | void, currentKey) => ({

package/src/features/voice/types.ts

@@ -82,8 +82,3 @@ export type VoiceTranscriptionItem = {
   controller?: AbortController
   hasDrawing?: boolean
 }
-
-export enum RecordButtonVariant {
-  DEFAULT = 'default',
-  ADVANCED = 'advanced',
-}

package/src/index.ts

@@ -9,6 +9,7 @@ export * from './features/problemSelector'
 export * from './features/gifCelebrations'
 export * from './features/exampleSolution'
 export * from './features/keyboard'
+export * from './features/pmProgress'
 export * from './features/openEnded'
 export * from './shared/icons'
 export * from './features/voice'

package/src/shared/icons/MenuIcon.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import { IconProps } from './icon.types'
+import { COLORS } from '@magmamath/react-native-ui'
+
+export const MenuIcon = ({ color = COLORS.NEUTRAL_9, size }: IconProps) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 28 21" fill="none">
+      <Path
+        d="M26.5 0a1.5 1.5 0 010 3h-25a1.5 1.5 0 110-3h25zM18 9a1.5 1.5 0 010 3H1.5a1.5 1.5 0 010-3H18zM26.5 18a1.5 1.5 0 010 3h-25a1.5 1.5 0 010-3h25z"
+        fill={color}
+      />
+    </Svg>
+  )
+}

package/src/shared/icons/PentagonIcon.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import { IconProps } from './icon.types'
+
+export const PentagonIcon = ({ size = 32, color }: IconProps) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 32 31" fill="none">
+      <Path
+        d="M14.025 2.573a3 3 0 013.527 0l9.788 7.111a3 3 0 011.09 3.355l-3.74 11.506a3 3 0 01-2.852 2.073H9.739a3 3 0 01-2.853-2.073L3.147 13.038a3 3 0 011.09-3.354l9.788-7.111z"
+        fill={color}
+      />
+    </Svg>
+  )
+}

package/src/shared/icons/SketchArrowRight.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import { IconProps } from './icon.types'
+
+export const SketchArrowRight = ({ size = 46, color = '#4D4D63' }: IconProps) => {
+  const sizeRatio = 1.65
+  return (
+    <Svg width={size} height={size * sizeRatio} viewBox="0 0 46 28" fill="none">
+      <Path
+        d="M2 14.714c17.875-3.906 41.975-1.466 41.975-1.466m0 0s-7.319-9-11.4-11.248m11.4 11.248s-8.773 6.653-10.562 12.737"
+        stroke={color}
+        strokeWidth={4}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  )
+}

package/src/shared/icons/SliceDiamondIcon.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { IconProps } from './icon.types'
+import Svg, { Path } from 'react-native-svg'
+
+export const SliceDiamondIcon = ({ color, size = 28 }: IconProps) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 28 27" fill="none">
+      <Path
+        d="M12.004 22.19a2.25 2.25 0 003.652 0l9.269-12.877a2.578 2.578 0 00-.27-3.329C18.677.005 8.983.005 3.005 5.984a2.578 2.578 0 00-.27 3.33l9.269 12.876z"
+        fill={color}
+      />
+    </Svg>
+  )
+}

package/src/shared/icons/StarIcon.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import { IconProps } from './icon.types'
+import { COLORS } from '@magmamath/react-native-ui'
+
+export const StarIcon = ({ width = 25, color = COLORS.NEUTRAL_1 }: IconProps) => {
+  return (
+    <Svg width={width} height={width} viewBox="0 0 25 25" fill="none">
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M13.76.971c-.776-1.295-2.653-1.295-3.43 0L7.082 6.387l-5.565 1.39c-1.508.378-2.028 2.256-.929 3.355l4.128 4.128-1.368 6.502c-.35 1.659 1.394 2.973 2.892 2.18l5.795-3.068 3.865 2.147 2.007 1.004c1.497.748 3.196-.563 2.851-2.201l-1.381-6.564 4.128-4.128c1.099-1.099.579-2.977-.93-3.354L17.01 6.387 13.76.97zM8.796 7.416L12.046 2l3.249 5.416a2 2 0 001.23.91l5.565 1.392-4.129 4.128a2 2 0 00-.542 1.826l1.381 6.564-1.968-.984-3.827-2.126a2 2 0 00-1.907-.02l-5.794 3.068 1.368-6.502a2 2 0 00-.542-1.826L2 9.718l5.565-1.391a2 2 0 001.23-.911z"
+        fill={color}
+      />
+    </Svg>
+  )
+}

package/src/shared/icons/TimerIcon.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import { IconProps } from './icon.types'
+import { COLORS } from '@magmamath/react-native-ui'
+
+export const TimerIcon = ({ size = 25, color = COLORS.NEUTRAL_1 }: IconProps) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 21 23" fill="none">
+      <Path
+        d="M10.781 8.984a1.078 1.078 0 10-2.156 0v3.235H6.828a1.078 1.078 0 100 2.156h2.875c.596 0 1.078-.483 1.078-1.078V8.984z"
+        fill={color}
+      />
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.547 0a1.078 1.078 0 100 2.156h1.078v1.497C3.773 4.189 0 8.303 0 13.297 0 18.656 4.344 23 9.703 23c5.359 0 9.703-4.344 9.703-9.703 0-2.28-.787-4.377-2.103-6.033l1.034-1.058.666.666a1.078 1.078 0 101.525-1.525l-2.875-2.875a1.078 1.078 0 10-1.525 1.525l.684.684-1.029 1.054a9.663 9.663 0 00-5.002-2.082V2.156h1.078a1.078 1.078 0 000-2.156H7.547zm-5.39 13.297a7.547 7.547 0 1115.093 0 7.547 7.547 0 01-15.094 0z"
+        fill={color}
+      />
+    </Svg>
+  )
+}