From 40e79023779fb6029fcaab7d74f26a2e543b35e2 Mon Sep 17 00:00:00 2001
From: joseCorte-exe <josecorte-corte@hotmail.com>
Date: Thu, 12 May 2022 09:54:08 -0300
Subject: [PATCH] :sparkles: add toggle buttton group

---
 pages/resumoOperacao.tsx                      |  2 +
 src/components/banner/BannerView.ts           |  4 --
 src/components/buttonGroup/ButtonGroup.tsx    | 39 +++++++++++++++++++
 src/components/buttonGroup/ButtonGroupView.ts | 21 ++++++++++
 src/components/graph/graphCard/ChartCard.tsx  | 19 +--------
 5 files changed, 64 insertions(+), 21 deletions(-)
 create mode 100644 src/components/buttonGroup/ButtonGroup.tsx
 create mode 100644 src/components/buttonGroup/ButtonGroupView.ts

diff --git a/pages/resumoOperacao.tsx b/pages/resumoOperacao.tsx
index 78c90df..d5ffe8f 100644
--- a/pages/resumoOperacao.tsx
+++ b/pages/resumoOperacao.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 import BasicButton from '../src/components/buttons/basicButton/BasicButton';
+import Header from '../src/components/header/Header';
+import PageTitle from '../src/components/pageTitle/PageTitle';
 import Sidebar from '../src/components/sidebar/Sidebar';
 
 import { TableView } from '../styles/layouts/ResumoOperacao/ResumoOperacaoView';
diff --git a/src/components/banner/BannerView.ts b/src/components/banner/BannerView.ts
index d694a9a..4dc7173 100644
--- a/src/components/banner/BannerView.ts
+++ b/src/components/banner/BannerView.ts
@@ -45,8 +45,4 @@ export const BannerView = styled.div`
   @media (max-width: 1008px) {
     font-size: 170%;
   }
-
-
-
-
 `
diff --git a/src/components/buttonGroup/ButtonGroup.tsx b/src/components/buttonGroup/ButtonGroup.tsx
new file mode 100644
index 0000000..ba949e4
--- /dev/null
+++ b/src/components/buttonGroup/ButtonGroup.tsx
@@ -0,0 +1,39 @@
+import React from 'react'
+
+import ToggleButton from '@mui/material/ToggleButton';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import { ButtonGroupView } from './ButtonGroupView';
+
+export default function ButtonGroup() {
+  const [timeCourse, setTimeCourse] = React.useState<string | null>('Mensal');
+
+  const handleAlignment = (
+    event: React.MouseEvent<HTMLElement>,
+    newTimeCourse: string | null,
+  ) => {
+    setTimeCourse(newTimeCourse);
+  };
+  return (
+    <ButtonGroupView timeCourse={timeCourse} >
+      <ToggleButtonGroup
+        value={timeCourse}
+        exclusive
+        onChange={handleAlignment}
+        aria-label="time course"
+        className='groupButton'
+        style={{backgroundColor: 'transparent'}}
+      >
+        <div className='switch' />
+        <ToggleButton value="Mensal" aria-label="Mensal" style={{backgroundColor: 'transparent', minWidth: '90px', border: 'none'}}>
+          Mensal
+        </ToggleButton>
+        <ToggleButton value="Semanal" aria-label="Semanal" style={{backgroundColor: 'transparent', minWidth: '90px', border: 'none'}}>
+          Semanal
+        </ToggleButton>
+        <ToggleButton value="Hoje" aria-label="Hoje" style={{backgroundColor: 'transparent', minWidth: '90px', border: 'none'}}>
+          Hoje
+        </ToggleButton>
+      </ToggleButtonGroup>
+    </ButtonGroupView>
+  )
+}
diff --git a/src/components/buttonGroup/ButtonGroupView.ts b/src/components/buttonGroup/ButtonGroupView.ts
new file mode 100644
index 0000000..5523a12
--- /dev/null
+++ b/src/components/buttonGroup/ButtonGroupView.ts
@@ -0,0 +1,21 @@
+import styled from "styled-components";
+
+export const ButtonGroupView = styled.div`
+  background-color: #F4F5F9;
+  border-radius: 10px;
+  .switch {
+    position: absolute;
+
+    width: 85px;
+    height: 40px;
+
+    margin-top: 3.5px;
+    transform: translateX(${props => props.timeCourse=='Mensal'? '4px' : props.timeCourse=='Semanal'? '94px' : '181px'});
+    transition-duration: 0.5s;
+    transition-delay: 0s;
+
+    border-radius: 8px;
+
+    background: #fff;
+  }
+`
diff --git a/src/components/graph/graphCard/ChartCard.tsx b/src/components/graph/graphCard/ChartCard.tsx
index b71de03..922b35c 100644
--- a/src/components/graph/graphCard/ChartCard.tsx
+++ b/src/components/graph/graphCard/ChartCard.tsx
@@ -6,6 +6,7 @@ import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 
 import { ChartCardView } from './ChartCardView';
 import Chart from '../Chart';
+import ButtonGroup from '../../buttonGroup/ButtonGroup';
 
 interface ChartCardInterface {
   title: string,
@@ -32,23 +33,7 @@ export default function ChartCard({ title, subtitle, consumption, className }: C
             <h2>{title}</h2>
             <span>{subtitle}</span>
           </div>
-          <ToggleButtonGroup
-            value={timeCourse}
-            exclusive
-            onChange={handleAlignment}
-            aria-label="text alignment"
-            className='groupButton'
-          >
-            <ToggleButton value="left" aria-label="left aligned">
-              Mensal
-            </ToggleButton>
-            <ToggleButton value="center" aria-label="centered">
-              Semanal
-            </ToggleButton>
-            <ToggleButton value="right" aria-label="right aligned">
-              Hoje
-            </ToggleButton>
-          </ToggleButtonGroup>
+          <ButtonGroup />
         </div>
         {
           consumption?