✨ add toggle buttton group

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';

src/components/banner/BannerView.ts

@@ -45,8 +45,4 @@ export const BannerView = styled.div`
   @media (max-width: 1008px) {
     font-size: 170%;
   }
-
-
-
-
 `

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>
+  )
+}

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;
+  }
+`

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
+          <ButtonGroup />
-            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>
         </div>
         {
           consumption?