@magmamath/students-features 1.2.0 → 1.2.1-rc.10

package/dist/typescript/module/shared/translation/constants.d.ts

@@ -59,6 +59,25 @@ export declare const LOCALIZATION_CONFIGS: {
             attempt: string;
             transcriptNotAvailable: string;
         };
+        pmProgress: {
+            title: string;
+            startButton: string;
+            nextUp: string;
+            teacherRecs: string;
+            practiceButton: string;
+            stars: string;
+            time: string;
+            thisWeek: string;
+            lastWeek: string;
+            allTime: string;
+            fluency: string;
+            andMore: string;
+            skillsLeft: string;
+            skillLeft: string;
+            grade: string;
+            gradeK: string;
+            gradeOther: string;
+        };
     };
     "en-GB": {
         locale: string;
@@ -120,6 +139,25 @@ export declare const LOCALIZATION_CONFIGS: {
             attempt: string;
             transcriptNotAvailable: string;
         };
+        pmProgress: {
+            title: string;
+            startButton: string;
+            nextUp: string;
+            teacherRecs: string;
+            practiceButton: string;
+            stars: string;
+            time: string;
+            thisWeek: string;
+            lastWeek: string;
+            allTime: string;
+            fluency: string;
+            andMore: string;
+            skillsLeft: string;
+            skillLeft: string;
+            grade: string;
+            gradeK: string;
+            gradeOther: string;
+        };
     };
     "sv-SE": {
         locale: string;
@@ -181,6 +219,25 @@ export declare const LOCALIZATION_CONFIGS: {
             attempt: string;
             transcriptNotAvailable: string;
         };
+        pmProgress: {
+            title: string;
+            startButton: string;
+            nextUp: string;
+            teacherRecs: string;
+            practiceButton: string;
+            stars: string;
+            time: string;
+            thisWeek: string;
+            lastWeek: string;
+            allTime: string;
+            fluency: string;
+            andMore: string;
+            skillsLeft: string;
+            skillLeft: string;
+            grade: string;
+            gradeK: string;
+            gradeOther: string;
+        };
     };
     "en-CA": {
         locale: string;
@@ -242,6 +299,25 @@ export declare const LOCALIZATION_CONFIGS: {
             attempt: string;
             transcriptNotAvailable: string;
         };
+        pmProgress: {
+            title: string;
+            startButton: string;
+            nextUp: string;
+            teacherRecs: string;
+            practiceButton: string;
+            stars: string;
+            time: string;
+            thisWeek: string;
+            lastWeek: string;
+            allTime: string;
+            fluency: string;
+            andMore: string;
+            skillsLeft: string;
+            skillLeft: string;
+            grade: string;
+            gradeK: string;
+            gradeOther: string;
+        };
     };
     "en-SCT": {
         locale: string;
@@ -303,6 +379,25 @@ export declare const LOCALIZATION_CONFIGS: {
             attempt: string;
             transcriptNotAvailable: string;
         };
+        pmProgress: {
+            title: string;
+            startButton: string;
+            nextUp: string;
+            teacherRecs: string;
+            practiceButton: string;
+            stars: string;
+            time: string;
+            thisWeek: string;
+            lastWeek: string;
+            allTime: string;
+            fluency: string;
+            andMore: string;
+            skillsLeft: string;
+            skillLeft: string;
+            grade: string;
+            gradeK: string;
+            gradeOther: string;
+        };
     };
     "de-DE": {
         locale: string;
@@ -364,6 +459,25 @@ export declare const LOCALIZATION_CONFIGS: {
             attempt: string;
             transcriptNotAvailable: string;
         };
+        pmProgress: {
+            title: string;
+            startButton: string;
+            nextUp: string;
+            teacherRecs: string;
+            practiceButton: string;
+            stars: string;
+            time: string;
+            thisWeek: string;
+            lastWeek: string;
+            allTime: string;
+            fluency: string;
+            andMore: string;
+            skillsLeft: string;
+            skillLeft: string;
+            grade: string;
+            gradeK: string;
+            gradeOther: string;
+        };
     };
 };
 //# sourceMappingURL=constants.d.ts.map

package/dist/typescript/module/shared/translation/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../src/shared/translation/constants.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOhC,CAAA"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../src/shared/translation/constants.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOhC,CAAA"}

package/dist/typescript/module/shared/translation/model.d.ts

@@ -60,6 +60,25 @@ export declare const setLocalization: import("effector").EventCallable<{
         attempt: string;
         transcriptNotAvailable: string;
     };
+    pmProgress: {
+        title: string;
+        startButton: string;
+        nextUp: string;
+        teacherRecs: string;
+        practiceButton: string;
+        stars: string;
+        time: string;
+        thisWeek: string;
+        lastWeek: string;
+        allTime: string;
+        fluency: string;
+        andMore: string;
+        skillsLeft: string;
+        skillLeft: string;
+        grade: string;
+        gradeK: string;
+        gradeOther: string;
+    };
 } | ((config: typeof LOCALIZATION_CONFIGS) => Translations)>;
 export declare const $localization: import("effector").StoreWritable<{
     locale: string;
@@ -121,5 +140,24 @@ export declare const $localization: import("effector").StoreWritable<{
         attempt: string;
         transcriptNotAvailable: string;
     };
+    pmProgress: {
+        title: string;
+        startButton: string;
+        nextUp: string;
+        teacherRecs: string;
+        practiceButton: string;
+        stars: string;
+        time: string;
+        thisWeek: string;
+        lastWeek: string;
+        allTime: string;
+        fluency: string;
+        andMore: string;
+        skillsLeft: string;
+        skillLeft: string;
+        grade: string;
+        gradeK: string;
+        gradeOther: string;
+    };
 }>;
 //# sourceMappingURL=model.d.ts.map

package/dist/typescript/module/shared/translation/model.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"model.d.ts","sourceRoot":"","sources":["../../../../../src/shared/translation/model.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACtC,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAGlD,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cACD,OAAO,oBAAoB,KAAK,YAAY,EACpE,CAAA;AAEH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMzB,CAAA"}
+{"version":3,"file":"model.d.ts","sourceRoot":"","sources":["../../../../../src/shared/translation/model.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACtC,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAGlD,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cACD,OAAO,oBAAoB,KAAK,YAAY,EACpE,CAAA;AAEH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMzB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magmamath/students-features",
-  "version": "1.2.0",
+  "version": "1.2.1-rc.10",
   "description": "Magmamath features library",
   "source": "src/index.ts",
   "main": "src/index.ts",
@@ -17,16 +17,23 @@
     "prepare": "bob build",
     "release": "release-it"
   },
+  "dependencies": {
+    "d3-shape": "3.2.0"
+  },
   "peerDependencies": {
     "@magmamath/frontend-config": "1.1.0",
     "@magmamath/react-native-ui": "*",
+    "@matteappen/skills-utils": "^3.7.1",
+    "d3-shape": "3.2.0",
     "effector": "^23.2.3",
+    "effector-action": "^1.2.2",
     "effector-react": "^23.2.1",
     "patronum": "^2.3.0",
     "react": "*",
     "react-native": "*",
     "react-native-gesture-handler": "*",
     "react-native-modalfy": "*",
+    "react-native-portalize": "^1.0.7",
     "react-native-reanimated": ">=0.3.16",
     "react-native-svg": "^15.10.0",
     "expo-audio": "^1.1.1",
@@ -37,12 +44,15 @@
   "devDependencies": {
     "@magmamath/react-native-ui": "0.4.83",
     "@magmamath/frontend-config": "1.1.0",
+    "@matteappen/skills-utils": "^3.7.1",
     "@react-native/eslint-config": "^0.73.1",
     "@release-it/conventional-changelog": "^9.0.2",
+    "@types/d3-shape": "3.1.7",
     "@types/jest": "^29.5.5",
     "@types/react": "^18.2.44",
     "del-cli": "^5.1.0",
     "effector": "^23.2.3",
+    "effector-action": "1.2.2",
     "effector-react": "^23.2.1",
     "eslint": "^8.51.0",
     "eslint-config-prettier": "^9.0.0",
@@ -50,13 +60,14 @@
     "expo": "^52.0.47",
     "expo-audio": "^1.1.1",
     "jest": "^29.7.0",
-    "prettier": "^3.0.3",
     "patronum": "^2.3.0",
+    "prettier": "^3.0.3",
     "react": "18.3.1",
     "react-native": "0.76.3",
     "react-native-builder-bob": "^0.33.3",
     "react-native-gesture-handler": "^2.28.0",
     "react-native-modalfy": "^3.7.0",
+    "react-native-portalize": "^1.0.7",
     "react-native-reanimated": "^3.17.2",
     "react-native-svg": "^15.10.0",
     "release-it": "^17.10.0",

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

@@ -6,6 +6,7 @@ import { useChatModel } from '../../context/ChatBotModelContext'
 import { ColorScheme } from '../../types/style.types'
 import { HintButtonVariant, RequestHintButton } from './RequestHintButton'
 import { FreeTextInputBlock } from './FreeText/FreeTextInputBlock'
+import { SPACING } from '@magmamath/react-native-ui'
 
 export type ChatInputProps = {
   hasMessages: boolean
@@ -82,6 +83,6 @@ const styles = StyleSheet.create({
     width: INPUT_WIDTH,
     alignItems: 'flex-end',
     justifyContent: 'center',
-    marginLeft: 6,
+    marginLeft: SPACING[150],
   },
 })

package/src/features/chatbot/components/ChatMessage/MessageContent.tsx

@@ -8,6 +8,7 @@ import { ColorScheme } from '../../types/style.types'
 import { MessageButtonsBlock } from './MessageButtonsBlock'
 import { getSpacerSize } from './helpers'
 import { MessageVariant } from '../../types/model.types'
+import { FONT_FAMILY } from '@magmamath/react-native-ui'
 
 type MessageContentProps = {
   text: string
@@ -100,7 +101,7 @@ const styles = StyleSheet.create({
     flex: 1,
     fontSize: 20,
     fontWeight: 400,
-    fontFamily: 'Buenos Aires',
+    fontFamily: FONT_FAMILY.buenosAires,
     color: '#33334D',
     width: '100%',
   },

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

@@ -1,6 +1,6 @@
 import React from 'react'
 import { StyleSheet, Text, View } from 'react-native'
-import { BORDER_RADIUS, COLORS, SHADOWS, SPACING } from '@magmamath/react-native-ui'
+import { BORDER_RADIUS, COLORS, FONT_FAMILY, SHADOWS, SPACING } from '@magmamath/react-native-ui'
 import { EOAModalText } from '@magmamath/students-features'
 
 type AssessmentScoreCardProps = {
@@ -38,6 +38,6 @@ const styles = StyleSheet.create({
     fontSize: 96,
     fontWeight: '700',
     color: COLORS.NEUTRAL_9,
-    fontFamily: 'Buenos Aires',
+    fontFamily: FONT_FAMILY.buenosAires,
   },
 })

package/src/features/pmProgress/PmProgress.tsx

@@ -0,0 +1,52 @@
+import React, { memo } from 'react'
+import { View, StyleSheet } from 'react-native'
+import { useGate } from 'effector-react'
+import { SPACING } from '@magmamath/react-native-ui'
+import { PmProgressHeader } from './components/header/PmProgressHeader'
+import { PmTeacherRecs } from './components/recs/PmTeacherRecs'
+import { PmDomainList } from './components/list/PmDomainList'
+import { PmInsights } from './components/insights/PmInsights'
+import { PmProgressContextValue, PmProgressProvider } from './context/PmProgressContext'
+import { User } from './shared/pmProgress.types'
+
+type PmProgressProps = { user: User } & PmProgressContextValue
+
+export const PmProgress = memo(({ model, user, ...props }: PmProgressProps) => {
+  useGate(model.gate, { user })
+
+  return (
+    <PmProgressProvider value={{ model, ...props }}>
+      <View style={styles.container}>
+        <PmProgressHeader />
+
+        <View style={styles.content}>
+          <View style={styles.column}>
+            <PmTeacherRecs />
+            <PmDomainList />
+          </View>
+
+          <PmInsights />
+        </View>
+      </View>
+    </PmProgressProvider>
+  )
+})
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    overflow: 'hidden',
+    height: '100%',
+  },
+  content: {
+    flex: 1,
+    flexDirection: 'row',
+    overflow: 'hidden',
+  },
+  column: {
+    flex: 1,
+    overflow: 'hidden',
+    marginRight: SPACING[500],
+    gap: SPACING[200],
+  },
+})

package/src/features/pmProgress/components/chart/chart.helpers.ts

@@ -0,0 +1,14 @@
+export const getSliceClipId = (index: number | string) => `slice-clip-${index}`
+
+export const dynamicInnerRadius = (sliceCount: number): number => {
+  if (sliceCount > 5) return 12
+  if (sliceCount > 4) return 14
+  if (sliceCount > 3) return 16
+  return 30
+}
+
+export const dynamicCornerRadius = (fillPercent: number): number => {
+  if (fillPercent >= 30) return 8
+  if (fillPercent >= 5) return 6
+  return 4
+}

package/src/features/pmProgress/components/chart/chart.types.ts

@@ -0,0 +1,37 @@
+export type SliceInputData = {
+  value: number
+  fillPercent?: number
+  backgroundColor?: string
+  fillColor: string
+  borderColor: string
+}
+
+export type SliceShape = {
+  index: number
+  startAngle: number
+  endAngle: number
+  fillPercent: number
+  backgroundColor: string
+  fillColor: string
+  borderColor: string
+  data: SliceInputData
+}
+
+export type PieChartManagerConfig = {
+  size: number
+  outerRadius: number
+  innerRadius: number | ((sliceCount: number) => number)
+  cornerRadius: number | ((fillPercent: number) => number)
+  gapBetweenSlices: number
+  borderWidth: number
+  pressOffset: number
+  outerArc: {
+    color: string
+    strokeWidth: number
+    dashWidth: number
+  }
+  colors: {
+    background: string
+    highlightedBackground: string
+  }
+}

package/src/features/pmProgress/components/chart/components/PracticeProgressPieChart.tsx

@@ -0,0 +1,32 @@
+import React, { memo, useMemo } from 'react'
+import { StyleSheet, View } from 'react-native'
+import Svg, { G } from 'react-native-svg'
+import { PieChartManager } from '../model/PieChartManager'
+import { SlicesClipPaths } from './SlicesClipPaths'
+import { SlicesPaths } from './SlicesPaths'
+import type { PieChartManagerConfig, SliceInputData } from '../chart.types'
+
+type PracticeProgressPieChartProps = {
+  data: SliceInputData[]
+  config: PieChartManagerConfig
+}
+
+export const PracticeProgressPieChart = memo(({ data, config }: PracticeProgressPieChartProps) => {
+  const pieChartManager = useMemo(() => new PieChartManager(config), [config])
+  const center = pieChartManager.getCenter()
+
+  const slices = useMemo(() => {
+    return pieChartManager.shape.generateSlices(data)
+  }, [data, pieChartManager])
+
+  return (
+    <View>
+      <Svg width={config.size} height={config.size}>
+        <G x={center.x} y={center.y}>
+          <SlicesClipPaths slices={slices} pieChartManager={pieChartManager} />
+          <SlicesPaths slices={slices} pieChartManager={pieChartManager} config={config} />
+        </G>
+      </Svg>
+    </View>
+  )
+})

package/src/features/pmProgress/components/chart/components/SlicesClipPaths.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { ClipPath, Defs, Path } from 'react-native-svg'
+import { getSliceClipId } from '../chart.helpers'
+import type { SliceShape } from '../chart.types'
+import type { PieChartManager } from '../model/PieChartManager'
+
+type SlicesClipPathsProps = {
+  slices: SliceShape[]
+  pieChartManager: PieChartManager
+}
+
+export const SlicesClipPaths = ({ slices, pieChartManager }: SlicesClipPathsProps) => {
+  return (
+    <Defs>
+      {slices.map((slice) => (
+        <ClipPath key={slice.index} id={getSliceClipId(slice.index)}>
+          <Path d={pieChartManager.shape.generateSlicePath(slice)} />
+        </ClipPath>
+      ))}
+    </Defs>
+  )
+}

package/src/features/pmProgress/components/chart/components/SlicesPaths.tsx

@@ -0,0 +1,75 @@
+import React from 'react'
+import { Platform, StyleSheet } from 'react-native'
+import { G } from 'react-native-svg'
+import { useUnit } from 'effector-react'
+import { SliceBackgroundColor } from './layers/SliceBackgroundColor'
+import { SliceFillColor } from './layers/SliceFillColor'
+import { SliceArcPattern } from './layers/SliceArcPattern'
+import type { PieChartManagerConfig, SliceShape } from '../chart.types'
+import type { PieChartManager } from '../model/PieChartManager'
+
+type SlicesPathsProps = {
+  slices: SliceShape[]
+  pieChartManager: PieChartManager
+  config: PieChartManagerConfig
+}
+
+export const SlicesPaths = ({ slices, pieChartManager, config }: SlicesPathsProps) => {
+  const highlightedIndex = useUnit(pieChartManager.highlight.$highlightedIndex)
+
+  return (
+    <>
+      {slices.map((slice) => {
+        const id = `${slice.index}`
+        const shapeSvg = pieChartManager.shape.generateSlicePath(slice)
+        const fillSvg = pieChartManager.shape.generateFillPath(slice)
+        const fillBorderSvg = pieChartManager.shape.generateFillBorderPath(slice)
+        const isHighlighted = highlightedIndex === slice.index
+        const translateY = pieChartManager.highlight.getTranslateY(isHighlighted)
+        const borderWidth = isHighlighted ? config.borderWidth : 0
+
+        return (
+          <G
+            key={id}
+            style={styles.container}
+            transform={`translate(0, ${translateY})`}
+            onMouseEnter={() => pieChartManager.highlight.set(slice.index)}
+            onMouseDown={() => pieChartManager.highlight.set(slice.index)}
+            onMouseUp={() => pieChartManager.highlight.reset()}
+            onMouseLeave={() => pieChartManager.highlight.reset()}
+          >
+            <SliceBackgroundColor
+              path={shapeSvg}
+              color={isHighlighted ? config.colors.highlightedBackground : slice.backgroundColor}
+            />
+
+            <SliceFillColor
+              clipPathId={id}
+              shapeSvg={shapeSvg}
+              fillSvg={fillSvg}
+              fillBorderSvg={fillBorderSvg}
+              color={slice.fillColor}
+              percent={slice.fillPercent}
+              borderColor={isHighlighted ? slice.borderColor : undefined}
+              borderWidth={borderWidth || undefined}
+            />
+
+            <SliceArcPattern
+              clipPathId={id}
+              slice={slice}
+              config={config}
+              pieChartManager={pieChartManager}
+            />
+          </G>
+        )
+      })}
+    </>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    cursor: 'pointer',
+    ...(Platform.OS === 'web' ? { transition: 'transform 0.1s ease-in-out' } : {}),
+  },
+})

package/src/features/pmProgress/components/chart/components/layers/SliceArcPattern.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import { G, Path } from 'react-native-svg'
+import { getSliceClipId } from '../../chart.helpers'
+import type { PieChartManagerConfig, SliceShape } from '../../chart.types'
+import type { PieChartManager } from '../../model/PieChartManager'
+
+type SliceArcPatternProps = {
+  clipPathId: string
+  slice: SliceShape
+  pieChartManager: PieChartManager
+  config: PieChartManagerConfig
+}
+
+export const SliceArcPattern = ({
+  clipPathId,
+  slice,
+  pieChartManager,
+  config,
+}: SliceArcPatternProps) => {
+  const patternSizes = pieChartManager.pattern.getPatternTrackSizes()
+
+  return (
+    <G clipPath={`url(#${getSliceClipId(clipPathId)})`}>
+      {patternSizes.map((radius, rowIndex) => {
+        const arcPath = pieChartManager.pattern.generateArcPath(slice, radius)
+        const dashWidth = pieChartManager.pattern.getDashWidthForRadius(radius)
+        const dashOffset = pieChartManager.pattern.getDashOffset(rowIndex, radius)
+
+        return (
+          <Path
+            key={rowIndex}
+            d={arcPath}
+            fill="none"
+            stroke={config.outerArc.color}
+            strokeWidth={config.outerArc.strokeWidth}
+            strokeDasharray={[dashWidth, dashWidth]}
+            strokeDashoffset={dashOffset}
+            strokeLinecap="butt"
+          />
+        )
+      })}
+    </G>
+  )
+}

package/src/features/pmProgress/components/chart/components/layers/SliceBackgroundColor.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { Path } from 'react-native-svg'
+
+type BackgroundLayerProps = {
+  path: string
+  color: string
+}
+
+export const SliceBackgroundColor = ({ path, color }: BackgroundLayerProps) => {
+  return <Path d={path} fill={color} />
+}