-
Notifications
You must be signed in to change notification settings - Fork 2
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[MAIN][FEATURE] Button Component #108
base: main
Are you sure you want to change the base?
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Buen trabajo! El componente te quedo bastante bien, tiene algunos detalles a mejorar pero esta bastante bien 😄
import type { NextPage } from "next"; | ||
|
||
import Button from "@/modules/shared/components/buttons/button"; | ||
import { Container, Stack } from "@chakra-ui/react"; | ||
|
||
const ButtonsDemo: NextPage = () => { | ||
const clickHandler = () => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Buena idea esta pagina!
const sizeProps = { | ||
sm: { padding: "10px 12px", gap: "8px", height: "40px" }, | ||
md: { padding: "10px 16px", gap: "8px", height: "44px" }, | ||
lg: { padding: "10px 24px", gap: "8px", height: "48px" }, | ||
}[size]; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
este objeto podrias moverlo afuera del componente
y tendrias algo asi como:
const sizeProps = buttonSizes[size] ?? buttonSizes.md // <- esto es para tener un size por default si el size que le pasas no es correcto
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Moví los estilos de size y demas css al theme
border: "1px solid #E2E8F0", | ||
boxShadow: "0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06)", | ||
_hover: { | ||
background: "#EDF2F7", | ||
border: "1px solid #CFD3DC", | ||
}, | ||
_focus: { | ||
background: "#E2E8F0", | ||
border: "1px solid #CFD3DC", | ||
}, | ||
_disabled: { | ||
opacity: 0.5, | ||
border: "1px solid #CFD3DC", | ||
}, | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Esto tambien podrias moverlo afuera del componente
if (outline) {
props = {
...props,
...outlineStyles
}
}
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
listo!
Feature name
Button Component
Issue number
Crear componente Button con sus variantes #83
Tasks