Move to external component

clubcapra · May 9, 2023 · 4f2c7c5 · 4f2c7c5
1 parent 5e3b007
commit 4f2c7c5
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 32 deletions.
diff --git a/src/renderer/components/BatteryDetailsPopup.tsx b/src/renderer/components/BatteryDetailsPopup.tsx
diff --git a/src/renderer/components/BatteryStatus.tsx b/src/renderer/components/BatteryStatus.tsx
@@ -0,0 +1,54 @@
+import BatteryGauge from 'react-battery-gauge';
+import React from 'react';
+import { styled } from '@/renderer/globalStyles/styled';
+
+interface BatteryStatusProps {
+  name?: string;
+}
+
+const BatteryStatus = ({ name }: BatteryStatusProps) => {
+  const customization = {
+    batteryMeter: {
+      lowBatteryValue: 40,
+    },
+    readingText: {
+      opacity: 0,
+    },
+    batteryBody: {
+      strokeColor: '#fff',
+      strokeWidth: 2,
+    },
+    batteryCap: {
+      strokeColor: '#fff',
+      strokeWidth: 2,
+    },
+  };
+  const batteryLevel = 70;
+  return (
+    <Container>
+      <PercentageText>{name}</PercentageText>
+      <PercentageText>{batteryLevel}%</PercentageText>
+      <BatteryGauge
+        value={batteryLevel}
+        size={40}
+        aspectRatio={0.42}
+        customization={customization}
+      />
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+`;
+
+const PercentageText = styled.div`
+  font-size: 12px;
+  margin-right: 5px;
+  font-weight: bold;
+`;
+
+export default BatteryStatus;
diff --git a/src/renderer/components/Header.tsx b/src/renderer/components/Header.tsx
@@ -3,7 +3,7 @@ import { styled } from '@/renderer/globalStyles/styled';
 import { NavLink } from 'react-router-dom';
 import { selectDebugTabVisible } from '@/renderer/store/modules/debugTab';
 import { useSelector } from 'react-redux';
-import BatteryGauge from 'react-battery-gauge'
+import BatteryStatus from './BatteryStatus';
 
 interface NavLinkDefinition {
   to: string;
@@ -47,39 +47,17 @@ export const Header: FC = () => {
           ))}
       </LeftHeader>
       <RightHeader>
-        <BatteryStatus />
+        <BatteryStatus name="Motor" />
+        <BatteryStatus name="Logic" />
         <StyledLogo src="assets/images/logo.png" />
       </RightHeader>
     </HeaderGrid>
   );
 };
 
-const BatteryStatus = () => {
-  const customization = {
-    batteryMeter: {
-      lowBatteryValue: 40,
-    },
-    readingText: {
-      opacity: 0,
-    },
-  }
-  const batteryLevel = 40.8;
-  return <> <StyledP>{batteryLevel} %</StyledP>
-    <StyledBatteryGauge>
-      <BatteryGauge value={batteryLevel} size={40} aspectRatio={0.42} customization={customization} />
-    </StyledBatteryGauge>
-  </>
-}
-
-const StyledBatteryGauge = styled.div`
-  display:inline-block;
-  align-self: center;
-  align-content: center;
-`
-
 const HeaderGrid = styled.div`
   display: grid;
-  grid-template-columns: 1fr 215px;
+  grid-template-columns: 1fr 400px;
   box-shadow: 0 3px 2px rgba(0, 0, 0, 0.25);
 `;
 
@@ -93,8 +71,8 @@ const LeftHeader = styled.div<{
 
 const RightHeader = styled.div`
   margin: 2px;
-  display : flex;
-  justify-content : space-between;
+  display: flex;
+  justify-content: space-between;
 `;
 
 const StyledNavLink = styled(NavLink)`
@@ -121,7 +99,3 @@ const StyledLogo = styled.img`
   height: auto;
   width: 100px;
 `;
-
-const StyledP = styled.p`
-  font-weight: bold;
-`