Smart/smartEnergyView-frontend
2
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'feature/gradientButton' into 'dev'

Browse Source 
✨ add button with gradient feature

See merge request kluppsoftware/smart-energia-web!22
This commit is contained in:
José Corte 2022-05-10 20:30:26 +00:00
commit 2d2a6fdc5c
3 changed files with 79 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
pages/areaTest.tsx
View File

@ -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 />
</>
)
}

19
src/components/buttons/gradientButton/GradientButton.tsx Normal file
View File

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

55
src/components/buttons/gradientButton/GradientButtonView.ts Normal file
View File

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