feat: add wallet management features including sources and tags

Co-authored-by: Copilot <copilot@github.com>

Author: codeAbinash

App.tsx

@@ -48,6 +48,12 @@ import RandomColor from '@screens/Try/RandomColor'
 import RandomPassword from '@screens/Try/RandomPassword'
 import YourAge from '@screens/Try/YourAge'
 import Update, { type UpdateParamList } from '@screens/Update/Update'
+import AddExpense, { type WalletAddExpenseParamList } from '@screens/Wallet/AddExpense'
+import EditSource, { type WalletEditSourceParamList } from '@screens/Wallet/EditSource'
+import EditTag, { type WalletEditTagParamList } from '@screens/Wallet/EditTag'
+import SelectTagIcon from '@screens/Wallet/SelectTagIcon/SelectTagIcon'
+import Sources from '@screens/Wallet/Sources'
+import Tags from '@screens/Wallet/Tags'
 import type { ConfirmCityParamList } from '@screens/Weather/ConfirmCity'
 import ConfirmCity from '@screens/Weather/ConfirmCity'
 import WeatherScreen from '@screens/Weather/Main/Weather'
@@ -86,6 +92,7 @@ import { GestureHandlerRootView } from 'react-native-gesture-handler'
 import Animated, { ZoomIn, ZoomOut } from 'react-native-reanimated'
 import { SafeAreaProvider } from 'react-native-safe-area-context'
 import './global.css'
+import Wallet from '@screens/Wallet/Wallet'
 
 function App(): React.JSX.Element {
   const scheme = useColorScheme()
@@ -224,12 +231,21 @@ function Navigation() {
         <Stack.Screen name='LocationNote' component={LocationNote} options={GestureEnabled} />
         <Stack.Screen name='LocationSpeed' component={LocationSpeed} options={GestureEnabled} />
         <Stack.Screen name='Messages' component={Messages} options={{ gestureEnabled: false }} />
+        <Stack.Screen name='Wallet' component={Wallet} options={GestureEnabled} />
+        <Stack.Screen name='WalletAddExpense' component={AddExpense} options={GestureEnabled} />
+        <Stack.Screen name='WalletSources' component={Sources} options={GestureEnabled} />
+        <Stack.Screen name='WalletEditSource' component={EditSource} options={GestureEnabled} />
+        <Stack.Screen name='WalletTags' component={Tags} options={GestureEnabled} />
+        <Stack.Screen name='WalletEditTag' component={EditTag} options={GestureEnabled} />
+        <Stack.Screen name='WalletSelectTagIcon' component={SelectTagIcon} options={IOS_BOTTOM_STYLE} />
       </Stack.Navigator>
     </>
   )
 }
 
 export type RootStackParamList = {
+  Wallet: undefined
+  WalletSelectTagIcon: undefined
   Abinash: undefined
   Hello: undefined
   LocationSpeed: undefined
@@ -303,6 +319,11 @@ export type RootStackParamList = {
   Chart: ChartParamList
   Onboarding: undefined
   Skia: undefined
+  WalletAddExpense: WalletAddExpenseParamList
+  WalletSources: undefined
+  WalletEditSource: WalletEditSourceParamList
+  WalletTags: undefined
+  WalletEditTag: WalletEditTagParamList
 }
 
 const FabButton = () => {

global.css

@@ -13,6 +13,8 @@
   --bg:  #f2f2f3;
   --bg-card: #fff;
   --bg-card-dark: #0f0f11;
+
+  --color-wallet-accent: #2f3046;
 }
 
 

index.js

@@ -4,7 +4,7 @@
 
 import { AppRegistry, Text, TextInput } from 'react-native'
 import 'react-native-gesture-handler'
-import { configureReanimatedLogger, ReanimatedLogLevel } from 'react-native-reanimated'
+import { ReanimatedLogLevel, configureReanimatedLogger } from 'react-native-reanimated'
 import App from './App'
 import { name as appName } from './app.json'
 

src/assets/icons/hugeicons/Bus01Icon.tsx

@@ -0,0 +1,42 @@
+
+import React from 'react'
+import Svg, { Circle, ClipPath, Defs, Ellipse, G, Line, LinearGradient, Mask, Path, Polygon, Polyline, RadialGradient, Rect, Stop } from 'react-native-svg'
+import {type Variant, type HugeIconProps, defaultStrokeWidth, defaultVariant, defaultColor, defaultSize } from './constants'
+
+const iconMap: Partial<Record<Variant, React.FC<HugeIconProps>>> = { 
+	'solid-rounded': SolidRounded,
+	'stroke-rounded': StrokeRounded,
+}
+
+export default function Bus01Icon({ variant, ...rest }: HugeIconProps) {
+  const selectedVariant = variant || defaultVariant
+  const Component = iconMap[selectedVariant] || iconMap[defaultVariant] || StrokeRounded
+  return <Component {...rest} />
+}
+
+function SolidRounded({ size = defaultSize, color = defaultColor, strokeWidth = defaultStrokeWidth, className, style }: HugeIconProps) {
+  return (<Svg className={className} style={style} width={size} height={size} viewBox="0 0 24 24" fill="none">
+<Path fillRule="evenodd" clipRule="evenodd" d="M17 19.375C17.5523 19.375 18 19.8227 18 20.375V21.875C18 22.4273 17.5523 22.875 17 22.875C16.4477 22.875 16 22.4273 16 21.875V20.375C16 19.8227 16.4477 19.375 17 19.375Z" fill={color}/>
+<Path fillRule="evenodd" clipRule="evenodd" d="M7 19.375C7.55228 19.375 8 19.8227 8 20.375V21.875C8 22.4273 7.55228 22.875 7 22.875C6.44772 22.875 6 22.4273 6 21.875V20.375C6 19.8227 6.44772 19.375 7 19.375Z" fill={color}/>
+<Path fillRule="evenodd" clipRule="evenodd" d="M4.42453 3.8793C5.67932 2.75158 8.16215 1.125 11.998 1.125C15.8339 1.125 18.3168 2.75158 19.5716 3.8793L19.5967 3.90191C19.9368 4.20737 20.2405 4.48012 20.4944 5.0501C20.7492 5.62236 20.7486 6.12699 20.748 6.67827L20.7479 13.8688C20.748 15.1891 20.748 16.2778 20.6325 17.1394C20.5112 18.0441 20.2468 18.843 19.6089 19.4827C18.971 20.1224 18.1744 20.3876 17.2723 20.5092C16.4131 20.6251 15.3275 20.625 14.011 20.625H9.98505C8.66855 20.625 7.58296 20.6251 6.72376 20.5092C5.82172 20.3876 5.02506 20.1224 4.38719 19.4827C3.74932 18.843 3.48491 18.0441 3.36363 17.1394C3.24811 16.2778 3.24814 15.1891 3.24818 13.8688L3.24811 6.67827C3.24746 6.12699 3.24687 5.62235 3.50173 5.0501C3.75557 4.48012 4.05925 4.20737 4.39936 3.90191L4.42453 3.8793ZM5.19163 7.22498C5.19164 6.94214 5.19165 6.80073 5.27951 6.71286C5.36738 6.625 5.5088 6.625 5.79163 6.625H18.2021C18.4849 6.625 18.6263 6.625 18.7142 6.71286C18.8021 6.80073 18.8021 6.94214 18.8021 7.22498L18.8023 12.8958C18.8023 13.1297 18.8023 13.2466 18.7339 13.3297C18.6655 13.4128 18.5522 13.435 18.3255 13.4793C18.0684 13.5296 17.7828 13.5825 17.4727 13.6353C16.0327 13.8808 14.077 14.1247 11.9987 14.1247C9.92049 14.1247 7.96474 13.8808 6.52476 13.6353C6.21311 13.5822 5.92621 13.5291 5.66812 13.4786C5.44149 13.4342 5.32817 13.412 5.25979 13.3289C5.19141 13.2458 5.19142 13.1289 5.19142 12.8951L5.19163 7.22498ZM11 18.125H13C13.4142 18.125 13.75 17.7892 13.75 17.375C13.75 16.9608 13.4142 16.625 13 16.625H11C10.5858 16.625 10.25 16.9608 10.25 17.375C10.25 17.7892 10.5858 18.125 11 18.125ZM6 16.625C5.58579 16.625 5.25 16.9608 5.25 17.375C5.25 17.7892 5.58579 18.125 6 18.125H6.5C6.91421 18.125 7.25 17.7892 7.25 17.375C7.25 16.9608 6.91421 16.625 6.5 16.625H6ZM17.5 16.625C17.0858 16.625 16.75 16.9608 16.75 17.375C16.75 17.7892 17.0858 18.125 17.5 18.125H18C18.4142 18.125 18.75 17.7892 18.75 17.375C18.75 16.9608 18.4142 16.625 18 16.625H17.5Z" fill={color}/>
+<Path fillRule="evenodd" clipRule="evenodd" d="M1.5 7.875C2.05228 7.875 2.5 8.32272 2.5 8.875V9.875C2.5 10.4273 2.05228 10.875 1.5 10.875C0.947715 10.875 0.5 10.4273 0.5 9.875L0.5 8.875C0.5 8.32272 0.947715 7.875 1.5 7.875Z" fill={color}/>
+<Path fillRule="evenodd" clipRule="evenodd" d="M22.5 7.875C23.0523 7.875 23.5 8.32272 23.5 8.875V9.875C23.5 10.4273 23.0523 10.875 22.5 10.875C21.9477 10.875 21.5 10.4273 21.5 9.875V8.875C21.5 8.32272 21.9477 7.875 22.5 7.875Z" fill={color}/>
+</Svg>
+)
+}
+
+function StrokeRounded({ size = defaultSize, color = defaultColor, strokeWidth = defaultStrokeWidth, className, style }: HugeIconProps) {
+  return (<Svg className={className} style={style} width={size} height={size} viewBox="0 0 24 24" fill="none">
+<Path d="M17 20.5V22" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round"/>
+<Path d="M7 20.5V22" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round"/>
+<Path d="M4 6.78186C4 6.14251 4 5.82283 4.17387 5.43355C4.34773 5.04428 4.52427 4.88606 4.87736 4.56964C6.03437 3.53277 8.36029 2 12 2C15.6397 2 17.9656 3.53277 19.1226 4.56964C19.4757 4.88606 19.6523 5.04428 19.8261 5.43355C20 5.82283 20 6.14251 20 6.78186V14C20 16.8284 20 18.2426 19.1213 19.1213C18.2426 20 16.8284 20 14 20H10C7.17157 20 5.75736 20 4.87868 19.1213C4 18.2426 4 16.8284 4 14V6.78186Z" stroke={color} strokeWidth={strokeWidth} strokeLinejoin="round"/>
+<Path d="M4 14C4 14 7.73333 15 12 15C16.2667 15 20 14 20 14" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round"/>
+<Path d="M4.5 17.5H6" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round"/>
+<Path d="M18 17.5H19.5" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round"/>
+<Path d="M11 17.5L13 17.5" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round"/>
+<Path d="M4 6H20" stroke={color} strokeWidth={strokeWidth} strokeLinejoin="round"/>
+<Path d="M2 9L2 10" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round"/>
+<Path d="M22 9L22 10" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round"/>
+</Svg>
+)
+}

src/assets/icons/hugeicons/Car01Icon.tsx

@@ -0,0 +1,40 @@
+
+import React from 'react'
+import Svg, { Circle, ClipPath, Defs, Ellipse, G, Line, LinearGradient, Mask, Path, Polygon, Polyline, RadialGradient, Rect, Stop } from 'react-native-svg'
+import {type Variant, type HugeIconProps, defaultStrokeWidth, defaultVariant, defaultColor, defaultSize } from './constants'
+
+const iconMap: Partial<Record<Variant, React.FC<HugeIconProps>>> = { 
+	'solid-rounded': SolidRounded,
+	'stroke-rounded': StrokeRounded,
+}
+
+export default function Car01Icon({ variant, ...rest }: HugeIconProps) {
+  const selectedVariant = variant || defaultVariant
+  const Component = iconMap[selectedVariant] || iconMap[defaultVariant] || StrokeRounded
+  return <Component {...rest} />
+}
+
+function SolidRounded({ size = defaultSize, color = defaultColor, strokeWidth = defaultStrokeWidth, className, style }: HugeIconProps) {
+  return (<Svg className={className} style={style} width={size} height={size} viewBox="0 0 24 24" fill="none">
+<Path d="M17.9 19.7517C17.7114 19.7517 17.6172 19.7517 17.5586 19.8103C17.5 19.8688 17.5 19.9631 17.5 20.1517V20.6336C17.5 21.0124 17.7407 21.3587 18.1219 21.5281C18.1369 21.5347 18.1518 21.5414 18.1667 21.5481C18.398 21.6513 18.6227 21.7517 18.8906 21.7517H20.6094C20.8773 21.7517 21.102 21.6513 21.3333 21.5481C21.3482 21.5414 21.3631 21.5347 21.3781 21.5281C21.7592 21.3587 22 21.0124 22 20.6336V19.7449C22 19.4893 22 19.3614 21.9295 19.3015C21.859 19.2416 21.7167 19.2649 21.432 19.3114C21.4037 19.316 21.3752 19.3202 21.3465 19.324L18.2296 19.7365C18.1535 19.7466 18.0768 19.7517 18 19.7517H17.9Z" fill={color}/>
+<Path d="M6.1 19.7519C6.28856 19.7519 6.38284 19.7519 6.44142 19.8105C6.5 19.869 6.5 19.9633 6.5 20.1519V20.6338C6.5 21.0126 6.25925 21.3589 5.87812 21.5283C5.86314 21.5349 5.8482 21.5416 5.83329 21.5483C5.60202 21.6515 5.37734 21.7519 5.10942 21.7519H3.39058C3.12266 21.7519 2.89798 21.6515 2.66671 21.5483C2.6518 21.5416 2.63686 21.5349 2.62188 21.5283C2.24075 21.3589 2 21.0126 2 20.6338V19.7451C2 19.4894 2 19.3616 2.07048 19.3017C2.14095 19.2418 2.28329 19.2651 2.56797 19.3116C2.59626 19.3162 2.62479 19.3204 2.65355 19.3242L5.77037 19.7367C5.84651 19.7468 5.92322 19.7519 6 19.7519H6.1Z" fill={color}/>
+<Path fillRule="evenodd" clipRule="evenodd" d="M2.10579 7.55301C2.35278 7.05903 2.95345 6.8588 3.44743 7.10579L4.44743 7.60579C4.94141 7.85278 5.14164 8.45345 4.89465 8.94743C4.64766 9.44141 4.04698 9.64164 3.55301 9.39465L2.55301 8.89465C2.05903 8.64766 1.8588 8.04698 2.10579 7.55301ZM21.8946 7.55301C22.1416 8.04698 21.9414 8.64766 21.4474 8.89465L20.4474 9.39465C19.9535 9.64164 19.3528 9.44141 19.1058 8.94743C18.8588 8.45345 19.059 7.85278 19.553 7.60579L20.553 7.10579C21.047 6.8588 21.6477 7.05903 21.8946 7.55301Z" fill={color}/>
+<Path fillRule="evenodd" clipRule="evenodd" d="M20.3433 8.79564C20.7622 9.22922 21.2798 9.76497 21.7098 10.3405C22.2502 11.0638 22.75 11.9711 22.75 12.9996V16.4702C22.75 17.3475 22.1567 18.2064 21.2152 18.331L18.0984 18.7435C18.0658 18.7478 18.0329 18.75 18 18.75H6C5.96709 18.75 5.93422 18.7478 5.90159 18.7435L2.78475 18.331C1.84332 18.2064 1.25 17.3475 1.25 16.4702V12.9996C1.25 11.9711 1.74984 11.0638 2.29022 10.3405C2.7202 9.76497 3.23763 9.22942 3.65654 8.79585C3.74162 8.70778 3.7604 8.63077 3.80007 8.51582L4.87241 5.40846C5.07214 4.8296 5.2472 4.32221 5.44107 3.91969C5.65065 3.48453 5.92061 3.08574 6.35853 2.78087C6.79644 2.47599 7.2735 2.35473 7.76717 2.30029C8.22382 2.24994 8.77751 2.24997 9.40922 2.25H14.5908C15.2225 2.24997 15.7762 2.24994 16.2328 2.30029C16.7265 2.35473 17.2036 2.47599 17.6415 2.78087C18.0794 3.08574 18.3493 3.48453 18.5589 3.91969C18.7528 4.32221 18.9278 4.82957 19.1276 5.40843L20.1999 8.51582C20.2373 8.62416 20.2632 8.71279 20.3433 8.79564ZM6.7797 8.25C6.39606 8.25 6.20424 8.25 6.11452 8.12413C6.0248 7.99825 6.08737 7.81693 6.21253 7.45427L6.69783 6.04798C6.91843 5.40875 7.0595 5.00446 7.20106 4.71053C7.38093 4.33706 7.57661 4.20842 7.98735 4.16313C8.3208 4.12636 8.7625 4.12494 9.46009 4.12494H14.5399C15.2375 4.12494 15.6792 4.12636 16.0126 4.16313C16.4234 4.20842 16.6191 4.33706 16.7989 4.71053C16.9405 5.00446 17.0816 5.40875 17.3022 6.04798L17.7875 7.45427C17.9126 7.81693 17.9752 7.99825 17.8855 8.12413C17.7958 8.25 17.6039 8.25 17.2203 8.25H6.7797ZM3.33557 11.5793C2.96509 11.3941 2.51459 11.5443 2.32934 11.9148C2.1441 12.2852 2.29427 12.7357 2.66475 12.921L4.16475 13.671C4.53524 13.8562 4.98574 13.7061 5.17098 13.3356C5.35623 12.9651 5.20606 12.5146 4.83557 12.3293L3.33557 11.5793ZM21.3356 12.921C21.7061 12.7357 21.8562 12.2852 21.671 11.9148C21.4857 11.5443 21.0352 11.3941 20.6648 11.5793L19.1648 12.3293C18.7943 12.5146 18.6441 12.9651 18.8293 13.3356C19.0146 13.7061 19.4651 13.8562 19.8356 13.671L21.3356 12.921ZM12.9692 15H11.0314C10.0477 15 9.55587 15 9.17494 15.2735C8.87929 15.4858 8.70306 15.8251 8.46817 16.4192C8.36499 16.6802 8.3134 16.8107 8.37275 16.9054C8.4321 17 8.56701 17 8.83682 17H15.1639C15.4337 17 15.5686 17 15.6279 16.9054C15.6873 16.8107 15.6357 16.6802 15.5325 16.4192C15.2976 15.8251 15.1214 15.4858 14.8257 15.2735C14.4448 15 13.9529 15 12.9692 15Z" fill={color}/>
+</Svg>
+)
+}
+
+function StrokeRounded({ size = defaultSize, color = defaultColor, strokeWidth = defaultStrokeWidth, className, style }: HugeIconProps) {
+  return (<Svg className={className} style={style} width={size} height={size} viewBox="0 0 24 24" fill="none">
+<Path d="M2.5 12L4.5 13" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round"/>
+<Path d="M21.5 12.5L19.5 13" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round"/>
+<Path d="M8 17.5L8.24567 16.8858C8.61101 15.9725 8.79368 15.5158 9.17461 15.2579C9.55553 15 10.0474 15 11.0311 15H12.9689C13.9526 15 14.4445 15 14.8254 15.2579C15.2063 15.5158 15.389 15.9725 15.7543 16.8858L16 17.5" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round"/>
+<Path d="M2 17V19.882C2 20.2607 2.24075 20.607 2.62188 20.7764C2.86918 20.8863 3.10538 21 3.39058 21H5.10942C5.39462 21 5.63082 20.8863 5.87812 20.7764C6.25925 20.607 6.5 20.2607 6.5 19.882V18" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round"/>
+<Path d="M17.5 18V19.882C17.5 20.2607 17.7408 20.607 18.1219 20.7764C18.3692 20.8863 18.6054 21 18.8906 21H20.6094C20.8946 21 21.1308 20.8863 21.3781 20.7764C21.7592 20.607 22 20.2607 22 19.882V17" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round"/>
+<Path d="M20 8.5L21 8" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round"/>
+<Path d="M4 8.5L3 8" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round"/>
+<Path d="M4.5 9L5.5883 5.73509C6.02832 4.41505 6.24832 3.75503 6.7721 3.37752C7.29587 3 7.99159 3 9.38304 3H14.617C16.0084 3 16.7041 3 17.2279 3.37752C17.7517 3.75503 17.9717 4.41505 18.4117 5.73509L19.5 9" stroke={color} strokeWidth={strokeWidth} strokeLinejoin="round"/>
+<Path d="M4.5 9H19.5C20.4572 10.0135 22 11.4249 22 12.9996V16.4702C22 17.0407 21.6205 17.5208 21.1168 17.5875L18 18H6L2.88316 17.5875C2.37955 17.5208 2 17.0407 2 16.4702V12.9996C2 11.4249 3.54279 10.0135 4.5 9Z" stroke={color} strokeWidth={strokeWidth} strokeLinejoin="round"/>
+</Svg>
+)
+}

src/assets/icons/hugeicons/MoreHorizontalIcon.tsx

@@ -0,0 +1,29 @@
+
+import React from 'react'
+import Svg, { Circle, ClipPath, Defs, Ellipse, G, Line, LinearGradient, Mask, Path, Polygon, Polyline, RadialGradient, Rect, Stop } from 'react-native-svg'
+import {type Variant, type HugeIconProps, defaultStrokeWidth, defaultVariant, defaultColor, defaultSize } from './constants'
+
+const iconMap: Partial<Record<Variant, React.FC<HugeIconProps>>> = { 
+	'solid-rounded': SolidRounded,
+	'stroke-rounded': StrokeRounded,
+}
+
+export default function MoreHorizontalIcon({ variant, ...rest }: HugeIconProps) {
+  const selectedVariant = variant || defaultVariant
+  const Component = iconMap[selectedVariant] || iconMap[defaultVariant] || StrokeRounded
+  return <Component {...rest} />
+}
+
+function SolidRounded({ size = defaultSize, color = defaultColor, strokeWidth = defaultStrokeWidth, className, style }: HugeIconProps) {
+  return (<Svg className={className} style={style} width={size} height={size} viewBox="0 0 24 24" fill="none">
+<Path d="M4.2543 12C4.2543 11.0335 5.0378 10.25 6.0043 10.25C6.9708 10.25 7.7543 11.0335 7.7543 12C7.7543 12.9665 6.9708 13.75 6.0043 13.75C5.0378 13.75 4.2543 12.9665 4.2543 12ZM10.2543 12C10.2543 11.0335 11.0378 10.25 12.0043 10.25C12.9708 10.25 13.7543 11.0335 13.7543 12C13.7543 12.9665 12.9708 13.75 12.0043 13.75C11.0378 13.75 10.2543 12.9665 10.2543 12ZM16.2543 12C16.2543 11.0335 17.0378 10.25 18.0043 10.25C18.9708 10.25 19.7543 11.0335 19.7543 12C19.7543 12.9665 18.9708 13.75 18.0043 13.75C17.0378 13.75 16.2543 12.9665 16.2543 12Z" fill={color}/>
+</Svg>
+)
+}
+
+function StrokeRounded({ size = defaultSize, color = defaultColor, strokeWidth = defaultStrokeWidth, className, style }: HugeIconProps) {
+  return (<Svg className={className} style={style} width={size} height={size} viewBox="0 0 24 24" fill="none">
+<Path d="M6.00449 12.5V12M18.0045 12.5V12M12.0045 12.5V12M7.00449 12.5C7.00449 11.9477 6.55677 11.5 6.00449 11.5C5.4522 11.5 5.00449 11.9477 5.00449 12.5C5.00449 13.0523 5.4522 13.5 6.00449 13.5C6.55677 13.5 7.00449 13.0523 7.00449 12.5ZM19.0045 12.5C19.0045 11.9477 18.5568 11.5 18.0045 11.5C17.4522 11.5 17.0045 11.9477 17.0045 12.5C17.0045 13.0523 17.4522 13.5 18.0045 13.5C18.5568 13.5 19.0045 13.0523 19.0045 12.5ZM13.0045 12.5C13.0045 11.9477 12.5568 11.5 12.0045 11.5C11.4522 11.5 11.0045 11.9477 11.0045 12.5C11.0045 13.0523 11.4522 13.5 12.0045 13.5C12.5568 13.5 13.0045 13.0523 13.0045 12.5Z" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round"/>
+</Svg>
+)
+}