Merge branch 'feature/gradientButton' into 'dev'

✨ add button with gradient feature

See merge request kluppsoftware/smart-energia-web!22

pages/areaTest.tsx

@@ -1,9 +1,13 @@
 import React from 'react'
 import BasicButton from '../src/components/buttons/basicButton/BasicButton'
+import GradientButton from '../src/components/buttons/gradientButton/GradientButton'
 import Graph from '../src/components/graph/Chart'
 
 export default function areaTest() {
   return (
-    <Graph title='Indicador de custo' />
+    <>
+      <Graph title='Indicador de custo' />
+      <GradientButton title='GRÁFICO' description='Gerar gráficos com os dados selecionados' orange />
+    </>
   )
 }

src/components/buttons/gradientButton/GradientButton.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { GradientButtonView } from './GradientButtonView'
+
+interface GradientButtonInterface {
+  title: string,
+  description: string
+  orange?: undefined | null | boolean,
+  purple?: undefined | null | boolean,
+  green?: undefined | null | boolean
+}
+
+export default function GradientButton({ title, description, orange, purple, green }: GradientButtonInterface) {
+  return (
+    <GradientButtonView color={orange? 'orange' : purple? 'purple' : green? 'green' : 'orange' } >
+      <p>{title}</p>
+      <p>{description}</p>
+    </GradientButtonView>
+  )
+}

src/components/buttons/gradientButton/GradientButtonView.ts

@@ -0,0 +1,55 @@
+import styled from "styled-components";
+
+export const GradientButtonView = styled.button`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  flex-direction: column;
+
+  width: 30%;
+  height: 150px;
+
+  font-family: 'Poppins';
+
+  color: #FFFFFF;
+
+  background: ${ props => props.color==='orange'?
+  'linear-gradient(200.86deg, #F48665 8.03%, #F48665 91.97%, #FDA23F 91.97%), #FFFFFF'
+  :
+  props.color === 'purple'?
+  'linear-gradient(200.69deg, #9A56FF 8.53%, #D78AFD 91.47%), #FFFFFF'
+  :
+  'linear-gradient(200.69deg, #23BDB8 8.53%, #43E794 91.47%), #FFFFFF'
+  };
+
+  box-shadow: 0.5px 3px 10px rgba(119, 119, 119, 0.1);
+
+  border-style: none;
+
+  cursor: pointer;
+
+  * {
+    margin: 0;
+    padding: 0;
+  }
+
+  p {
+    :first-child {
+      font-family: 'Poppins';
+      font-style: normal;
+      font-weight: 700;
+      font-size: calc(20px);
+
+      text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    }
+    :last-child {
+      font-family: 'Poppins';
+      font-style: normal;
+      font-weight: 700;
+      font-size: 12;
+
+      text-transform: uppercase;
+    }
+  }
+`