Re-use existing components

src/components/IconText.tsx

@@ -15,7 +15,7 @@ const IconText = ({ icon, children, ...props }: IconTextProps) => {
       space={'$2'}
     >
       <Icon source={icon} width={16} height={16} />
-      <Paragraph {...props} color={'#000000'}>
+      <Paragraph {...props} color={'#000000'} style={{ fontWeight: 'bold' }}>
         {children}
       </Paragraph>
     </XStack>

src/components/LayoutComponent/LandingPage.tsx

@@ -99,7 +99,7 @@ function Content() {
       <StatisticBox
         memory="45"
         stateIcon="https://placehold.co/16x16"
-        stateText="Improving performance"
+        stateText="Good performance"
         title="Title of the box"
       />
     </div>

src/components/StandardLineChart.tsx

@@ -4,7 +4,7 @@ const MyResponsiveLine = () => {
   const data = [
     {
       id: 'japan',
-      color: 'hsl(315, 70%, 50%)',
+      color: '#8DC6BC',
       data: [
         {
           x: '1',
@@ -83,6 +83,7 @@ const MyResponsiveLine = () => {
       pointLabelYOffset={-12}
       useMesh={true}
       legends={[]}
+      colors={['#8DC6BC']}
     />
   )
 }

src/components/StaticBox.tsx

@@ -1,47 +1,9 @@
 import React, { ReactNode, CSSProperties } from 'react'
-import { Paragraph, Separator, Text, XStack, YStack } from 'tamagui'
-import { styled } from 'tamagui'
-import { Image } from 'tamagui'
+
 import MyResponsiveLine from './StandardLineChart'
-
-interface IconProps {
-  source: string
-  width?: number
-  height?: number
-}
-
-const Icon: React.FC<IconProps> = ({ source, width = 16, height = 16, ...props }) => {
-  return <Image {...props} source={{ uri: source }} width={width} height={height} />
-}
-
-interface IconTextProps {
-  icon: string
-  text: string
-  fontWeight?: string
-}
-
-const IconText: React.FC<IconTextProps> = ({ icon, text, ...props }) => {
-  return (
-    <XStack
-      style={{
-        alignItems: 'center',
-      }}
-      space={'$2'}
-    >
-      <Icon source={icon} width={16} height={16} />
-      <Paragraph {...props} color={'#000000'}>
-        {text}
-      </Paragraph>
-    </XStack>
-  )
-}
-const DivComponent: React.FC = props => <div {...props} />
-const ShadowBox = styled(DivComponent, {
-  boxSizing: 'border-box',
-  borderRadius: '16px',
-  boxShadow: '0px 4px 20px 0px rgba(9, 16, 28, 0.08)',
-  width: '100%',
-})
+import ShadowBox from './ShadowBox'
+import IconText from './IconText'
+import { Paragraph, Separator, Text, XStack, YStack } from 'tamagui'
 
 interface StatisticBoxProps {
   title: string
@@ -62,7 +24,6 @@ const StatisticBox: React.FC<StatisticBoxProps> = ({
   stateText,
   additionalStateText,
   children,
-
   ...props
 }) => {
   return (
@@ -91,7 +52,7 @@ const StatisticBox: React.FC<StatisticBoxProps> = ({
         </XStack>
         <Separator borderColor={'#e3e3e3'} />
         <XStack space={'$4'} style={{ padding: '10px 16px 10px 16px' }}>
-          <IconText icon={stateIcon} text={stateText} fontWeight={'bold'} />
+          <IconText icon={stateIcon}>{stateText}</IconText>
           {additionalStateText && <Text color={'#E95460'}>{additionalStateText}</Text>}
         </XStack>
       </YStack>