@magmamath/students-features 1.2.1-rc.2 → 1.2.1-rc.21

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

@@ -0,0 +1,88 @@
+import { COLORS } from '@magmamath/react-native-ui'
+
+export const STATS_MAX_HEIGHT = 136
+export const RECOMMENDATIONS_LIMIT_PARAM = 150
+export const MAX_PIE_CHART_SIZE = 505
+
+export enum CustomDomain {
+  TEACHER = 'TEACHER',
+  FLUENCY = 'FLUENCY',
+}
+
+export enum InsightsTimeframe {
+  ALL = 'all',
+  WEEK = 'week',
+  LAST_WEEK = 'lastWeek',
+}
+
+export enum SolvingFlow {
+  TEACHER = 'TEACHER',
+  MAGMA = 'MAGMA',
+  STANDARD = 'STANDARD',
+}
+
+export enum SessionStorageKeys {
+  SOLVING_QUEUE = 'PM_SOLVING_QUEUE',
+  GRADE = 'PM_GRADE',
+  DOMAINS = 'PM_DOMAINS',
+}
+
+/**
+ * Primary → _4 → _6 variants, cycling through 7 base colors.
+ * Supports up to 21 unique colors before repeating.
+ */
+export const DOMAIN_COLORS = [
+  COLORS.PRIMARY_RED,
+  COLORS.PRIMARY_MAGENTA,
+  COLORS.PRIMARY_PURPLE,
+  COLORS.PRIMARY_INDIGO,
+  COLORS.PRIMARY_TURQUOISE,
+  COLORS.PRIMARY_GREEN,
+  COLORS.PRIMARY_ORANGE,
+  COLORS.RED_4,
+  COLORS.MAGENTA_4,
+  COLORS.PURPLE_4,
+  COLORS.INDIGO_4,
+  COLORS.TURQUOISE_4,
+  COLORS.GREEN_4,
+  COLORS.ORANGE_4,
+  COLORS.RED_6,
+  COLORS.MAGENTA_6,
+  COLORS.PURPLE_6,
+  COLORS.INDIGO_6,
+  COLORS.TURQUOISE_6,
+  COLORS.GREEN_6,
+  COLORS.ORANGE_6,
+]
+
+export const EMPTY_PIE_CHART_DATA = Array.from({ length: 5 }, () => ({
+  value: 1,
+  fillPercent: 0,
+  fillColor: COLORS.NEUTRAL_4,
+  borderColor: COLORS.NEUTRAL_4,
+  backgroundColor: COLORS.NEUTRAL_3,
+}))
+
+export const DOMAIN_BORDER_COLORS = [
+  COLORS.RED_6,
+  COLORS.MAGENTA_6,
+  COLORS.PURPLE_6,
+  COLORS.INDIGO_6,
+  COLORS.TURQUOISE_6,
+  COLORS.GREEN_6,
+  COLORS.ORANGE_6,
+  COLORS.RED_6,
+  COLORS.MAGENTA_6,
+  COLORS.PURPLE_6,
+  COLORS.INDIGO_6,
+  COLORS.TURQUOISE_6,
+  COLORS.GREEN_6,
+  COLORS.ORANGE_6,
+  COLORS.RED_6,
+  COLORS.MAGENTA_6,
+  COLORS.PURPLE_6,
+  COLORS.INDIGO_6,
+  COLORS.TURQUOISE_6,
+  COLORS.GREEN_6,
+  COLORS.ORANGE_6,
+]

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

@@ -0,0 +1,271 @@
+import { COLORS } from '@magmamath/react-native-ui'
+import type { ProgressMatrixStatsDto } from '@matteappen/skills-utils/enhanceProgressData/types'
+import {
+  Domain,
+  DomainStandard,
+  Grade,
+  Skill,
+  SkillsCount,
+  SkillsMapping,
+  StatsResponse,
+  TreeMappingResponse,
+  User,
+} from './pmProgress.types'
+import { CustomDomain, DOMAIN_BORDER_COLORS, DOMAIN_COLORS } from './pmProgress.constants'
+import { dynamicCornerRadius, dynamicInnerRadius } from '../components/chart/chart.helpers'
+import type { PieChartManagerConfig } from '../components/chart/chart.types'
+import { getText } from '../../../shared/translation/helpers'
+
+function groupStandardsByDomain(
+  standardStats: ProgressMatrixStatsDto[number]['standardStats'],
+  treeMapping: TreeMappingResponse['treeMapping'],
+) {
+  const grouped = new Map<string, Domain['standards']>()
+
+  for (const [standardId, stat] of Object.entries(standardStats)) {
+    const { domainId, skillIds, skillsCount, scorePercentage, skillsToPractice } = stat
+
+    if (!grouped.has(domainId)) {
+      grouped.set(domainId, [])
+    }
+
+    grouped.get(domainId)!.push({
+      standardId,
+      title:
+        treeMapping[standardId].shortDescriptionTranslations ||
+        treeMapping[standardId].nameTranslations,
+      subtitle: treeMapping[standardId].originalId,
+      skillIds,
+      skillsToPractice,
+      skillsCount,
+      scorePercentage,
+    })
+  }
+
+  return grouped
+}
+
+function sumSkillsCount(standards: Domain['standards']): SkillsCount {
+  return standards.reduce(
+    (sum, s) => ({
+      total: sum.total + s.skillsCount.total,
+      achieved: sum.achieved + s.skillsCount.achieved,
+      failed: sum.failed + s.skillsCount.failed,
+    }),
+    { total: 0, achieved: 0, failed: 0 },
+  )
+}
+
+function averageScorePercentage(standards: Domain['standards']): number {
+  const sum = standards.reduce((acc, s) => acc + s.scorePercentage, 0)
+  return Math.round((sum / standards.length) * 10) / 10
+}
+
+export function getDomainStructure(
+  data: ProgressMatrixStatsDto[number],
+  treeMapping: TreeMappingResponse['treeMapping'],
+): Domain[] {
+  const grouped = groupStandardsByDomain(data.standardStats, treeMapping)
+
+  return Array.from(grouped.entries()).map(([domainId, standards], index) => {
+    const title = treeMapping[domainId].nameTranslations
+    const isFluency = title.toLowerCase() === CustomDomain.FLUENCY.toLowerCase()
+
+    return {
+      domainId,
+      title,
+      color: isFluency
+        ? COLORS.PRIMARY_ORANGE
+        : (DOMAIN_COLORS[index] ?? DOMAIN_COLORS[DOMAIN_COLORS.length - 1]),
+      borderColor: isFluency
+        ? COLORS.ORANGE_6
+        : (DOMAIN_BORDER_COLORS[index] ?? DOMAIN_BORDER_COLORS[DOMAIN_BORDER_COLORS.length - 1]),
+      backgroundColor: COLORS.NEUTRAL_4,
+      standards,
+      skillsCount: sumSkillsCount(standards),
+      scorePercentage: averageScorePercentage(standards),
+    }
+  })
+}
+
+type GetInitialPmGradeParams = {
+  treeGrades: number[]
+  lockedGrades: number[]
+  enrolledGrades: number[]
+  userGrade: number | null | undefined
+}
+
+/**
+ * Resolves which grade a student should practice on.
+ *
+ * When userGrade is -1, null, or undefined (i.e. not explicitly set), we fall back
+ * to the student's enrolled grades and pick the lowest one that isn't locked.
+ * If userGrade is set but locked, we find the closest unlocked grade.
+ * All candidates are filtered against lockedGrades, so only unlocked grades are ever returned.
+ *
+ * Examples:
+ *   locked=[1,2],     enrolled=[2,5], grade=4  → 4 (unlocked, use as-is)
+ *   locked=[1,2],     enrolled=[2,5], grade=-1 → 5 (lowest unlocked enrolled)
+ *   locked=[0,1,2,5], enrolled=[2,5], grade=-1 → 3 (no enrolled available, first unlocked)
+ *   locked=[0,1],     enrolled=[2,5], grade=-1 → 2 (lowest unlocked enrolled)
+ *   locked=[0,1,2,3], enrolled=[3,9], grade=-1 → 9 (lowest unlocked enrolled)
+ *   locked=[1,2,3],   enrolled=[2,5], grade=2  → 4 (grade locked, closest below=none, above=4)
+ */
+
+export function getInitialPmGrade({
+  treeGrades,
+  lockedGrades,
+  enrolledGrades,
+  userGrade,
+}: GetInitialPmGradeParams): number | null {
+  const locked = new Set(lockedGrades)
+  const unlocked = treeGrades.filter((g) => !locked.has(g)).sort((a, b) => a - b)
+
+  if (unlocked.length === 0) {
+    return null
+  }
+
+  const isUserGradeMissing = userGrade === null || userGrade === -1 || userGrade === undefined
+  if (isUserGradeMissing) {
+    const unlockedEnrolled = enrolledGrades.filter((g) => unlocked.includes(g))
+    return unlockedEnrolled.length > 0 ? Math.min(...unlockedEnrolled) : unlocked[0]
+  }
+
+  if (unlocked.includes(userGrade)) return userGrade
+
+  const nearestBelow = [...unlocked].reverse().find((grade) => grade < userGrade)
+  const nearestAbove = unlocked.find((grade) => grade > userGrade)
+  return nearestBelow ?? nearestAbove ?? unlocked[0] ?? 0
+}
+
+export function formatTime(ms: number): string {
+  const totalMinutes = Math.floor(ms / 60_000)
+  if (totalMinutes < 60) return `${totalMinutes}m`
+  const hours = Math.floor(totalMinutes / 60)
+  const minutes = totalMinutes % 60
+  return minutes > 0 ? `${hours}h ${minutes}m` : `${hours}h`
+}
+
+export const isTreeDataReady = (source: {
+  tree: TreeMappingResponse | null
+  stats: StatsResponse | null
+  user: User | null
+  grade: number | null
+}): source is { tree: TreeMappingResponse; stats: StatsResponse; user: User; grade: number } =>
+  source.tree !== null && source.stats !== null && source.user !== null && source.grade !== null
+
+const MARGIN = 5
+export const createChartConfig = (size: number): PieChartManagerConfig => ({
+  size,
+  outerRadius: size / 2 - MARGIN,
+  innerRadius: dynamicInnerRadius,
+  gapBetweenSlices: 8,
+  cornerRadius: dynamicCornerRadius,
+  pressOffset: 4,
+  borderWidth: 4,
+  colors: {
+    background: 'white',
+    highlightedBackground: COLORS.NEUTRAL_6,
+  },
+  outerArc: {
+    color: '#FFFFFF40',
+    strokeWidth: 11.75,
+    dashWidth: 22,
+  },
+})
+
+/**
+ * Returns uncompleted skills from a single standard.
+ * Failed skills come first, then unattempted.
+ */
+export function getUncompletedSkillsFromStandard(
+  standard: DomainStandard,
+  skillsMapping: SkillsMapping,
+): Skill[] {
+  if (!standard.skillsToPractice) return []
+
+  return [...standard.skillsToPractice.failed, ...standard.skillsToPractice.unattempted]
+    .map(({ skillId }) => skillsMapping[skillId])
+    .filter(Boolean)
+    .sort((a, b) => skillsMapping[a._id]?.difficulty - skillsMapping[b._id]?.difficulty)
+}
+
+/**
+ * Returns uncompleted skills from a domain, scanning standards from the beginning.
+ * Optionally excludes a standard (used when student selected a specific one).
+ */
+export function getUncompletedSkillsFromDomain(
+  domain: Domain,
+  skillsMapping: SkillsMapping,
+  excludeStandardId?: string,
+): Skill[] {
+  const isStandardUncompleted = (standard: DomainStandard) => {
+    return standard.skillsCount.achieved < standard.skillsCount.total
+  }
+
+  return domain.standards
+    .filter((s) => isStandardUncompleted(s) && s.standardId !== excludeStandardId)
+    .flatMap((s) => getUncompletedSkillsFromStandard(s, skillsMapping))
+}
+
+/**
+ * Returns all uncompleted skills across all domains in list order.
+ * Used as a fallback when recommendation arrays are empty.
+ */
+export function getAllUncompletedSkills(domains: Domain[], skillsMapping: SkillsMapping): Skill[] {
+  return domains
+    .filter((d) => d.skillsCount.achieved < d.skillsCount.total)
+    .flatMap((d) => getUncompletedSkillsFromDomain(d, skillsMapping))
+}
+
+/** Moves item with the given id to the front: [0,1,2,3,4] with id of 3rd → [3,0,1,2,4] */
+export function shiftToBeginningOfArray(id: string, items: Skill[]): Skill[] {
+  const index = items.findIndex((item) => item._id === id)
+  if (index <= 0) return items
+  return [items[index], ...items.slice(0, index), ...items.slice(index + 1)]
+}
+
+export function withoutDuplicates(skills: (Skill | undefined)[]): Skill[] {
+  const seen = new Set<string>()
+  return skills.filter((skill): skill is Skill => {
+    if (!skill) return false
+    if (seen.has(skill._id)) return false
+    seen.add(skill._id)
+    return true
+  })
+}
+
+// Reorders grades starting from the given grade, wrapping around. [1,2,3] with start=2 → [2,3,1]
+export function startGradesFrom(grades: Grade[], startGrade: number): Grade[] {
+  const index = grades.findIndex(({ value }) => value === startGrade)
+  if (index <= 0) return grades
+  return [...grades.slice(index), ...grades.slice(0, index)]
+}
+
+export const isFluencyDomain = (title: string) => {
+  return title.toLowerCase() === CustomDomain.FLUENCY.toLowerCase()
+}
+
+export function formatGradeName(grade: number): string {
+  if (grade === -1) return getText('pmProgress.gradeOther')
+  if (grade === 0) return `${getText('pmProgress.grade')} ${getText('pmProgress.gradeK')}`
+  return `${getText('pmProgress.grade')} ${grade}`
+}
+
+export function getTreeGrades(tree: TreeMappingResponse, user: User): Grade[] {
+  const lockedGrades = new Set(user.setting.practiceModeLockedGrades)
+
+  const gradeNodes = Object.values(tree.treeMapping).filter(
+    (node) => node?.type === 'grade' && node.attributes.grade !== null,
+  )
+
+  const uniqueSortedGrades = [...new Set(gradeNodes.map((node) => node.attributes.grade))].sort(
+    (a, b) => a - b,
+  )
+
+  return uniqueSortedGrades.map((grade) => ({
+    name: formatGradeName(grade),
+    value: grade,
+    isLocked: lockedGrades.has(grade),
+  }))
+}

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

@@ -0,0 +1,210 @@
+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
+  scorePercentage: number
+}
+
+export type Domain = {
+  domainId: string
+  title: string
+  color: string
+  borderColor: string
+  backgroundColor: string
+  standards: DomainStandard[]
+  skillsCount: SkillsCount
+  scorePercentage: number
+}
+
+// TODO: to /shared/user.types.ts and create full type? any sense to duplicate it??
+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 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/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 = (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/PentagonIcon.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import Svg, { G, Path, Defs } 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">
+      <G filter="url(#filter0_dd_2255_6755)">
+        <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}
+        />
+      </G>
+      <Defs></Defs>
+    </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,16 @@
+import React from 'react'
+import { IconProps } from './icon.types'
+import Svg, { G, 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">
+      <G filter="url(#filter0_dd_1929_4175)">
+        <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}
+        />
+      </G>
+    </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>
+  )
+}