Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 930 | Rev 933 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
930 stevensc 1 
import React from 'react'
2 
import styled from 'styled-components'
3 
 
4 
const StyledButton = styled.button`
5 
  border-radius: 30px;
6 
  align-items: center;
7 
  padding: 0.2rem 1rem;
8 
  border: none;
9 
  cursor: pointer;
10 
  font-weight: 600;
11 
  font-size: 0.9rem;
12 
  display: inline-flex;
13 
  overflow: hidden;
14 
  text-align: center;
15 
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
16 
  &:hover {
17 
    background-color: whitesmoke;
18 
  }
19 
  &:disabled {
20 
    cursor: no-drop;
21 
  }
22 
`
23 
 
24 
const Button = ({
25 
  onClick = () => {},
26 
  label = 'Confirmar',
27 
  icon = null,
28 
  ...rest
29 
}) => {
30 
  return (
31 
    <StyledButton onClick={() => onClick()} {...rest}>
32 
      {icon}
33 
      {label}
34 
    </StyledButton>
35 
  )
36 
}
37 
 
931 stevensc 38 
const BtnPrimary = styled(Button)`
39 
  background-color: var(--button-bg);
40 
  color: var(--button-text-color);
41 
  &:hover {
42 
    background-color: var(--button-bg-hover);
43 
  }
44 
`
45 
 
46 
const BtnSecondary = styled(Button)`
47 
  background: var(--button-bg-secondary);
48 
  border: 1px solid var(--border-primary);
49 
  color: var(--button-text-color-secondary);
50 
  &:hover {
51 
    background-color: var(--button-bg-secondary-hover);
52 
    border-color: transparent;
53 
  }
54 
`
55 
 
56 
const BtnTertiary = styled(Button)`
57 
  background-color: var(--button-bg-tertiary);
58 
  border-color: #f4f4f4;
59 
  color: var(--button-text-color-tertiary);
60 
  border: 1px solid transparent;
61 
  &:hover {
62 
    background: #d4d4d4;
63 
    border: 1px solid var(--border-primary);
64 
    color: var(--border-primary);
65 
  }
66 
`
67 
 
68 
export const ButtonPrimary = ({ label, icon, ...rest }) => {
69 
  return <BtnPrimary label={label} icon={icon} {...rest} />
70 
}
71 
 
72 
export const ButtonSecondary = ({ label, icon, ...rest }) => {
73 
  return <BtnSecondary label={label} icon={icon} {...rest} />
74 
}
75 
 
76 
export const ButtonTertiary = ({ label, icon, onClick, ...rest }) => {
77 
  return <BtnTertiary label={label} icon={icon} onClick={onClick} {...rest} />
78 
}