From 9a5eed0d1cd85996a3d4a309b183957ff77fb997 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Wed, 9 Aug 2023 11:47:34 +0300
Subject: [PATCH] Re-use existing components

---
 src/components/IconText.tsx                   |  2 +-
 .../LayoutComponent/LandingPage.tsx           |  2 +-
 src/components/StandardLineChart.tsx          |  3 +-
 src/components/StaticBox.tsx                  | 49 ++-----------------
 4 files changed, 9 insertions(+), 47 deletions(-)

diff --git a/src/components/IconText.tsx b/src/components/IconText.tsx
index aeb98825..96bd3e7a 100644
--- a/src/components/IconText.tsx
+++ b/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>
diff --git a/src/components/LayoutComponent/LandingPage.tsx b/src/components/LayoutComponent/LandingPage.tsx
index 8e093309..389853f8 100644
--- a/src/components/LayoutComponent/LandingPage.tsx
+++ b/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>
diff --git a/src/components/StandardLineChart.tsx b/src/components/StandardLineChart.tsx
index 9a94457a..11ea8fad 100644
--- a/src/components/StandardLineChart.tsx
+++ b/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']}
     />
   )
 }
diff --git a/src/components/StaticBox.tsx b/src/components/StaticBox.tsx
index 4d730be2..5b25e7c6 100644
--- a/src/components/StaticBox.tsx
+++ b/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>