generated from les-petits-commercants-de-la-toile/aixmazon-v1
-
Notifications
You must be signed in to change notification settings - Fork 0
Closed
Assignees
Labels
enhancementNew feature or requestNew feature or requestgood first issueGood for newcomersGood for newcomers
Description
👉 ça se passe par ici :
aixmazon-v1-2022-PoolB/storefront/styles/theme.ts
Lines 1 to 13 in 56dd520
| export const theme = { | |
| name: "default", | |
| colors: { | |
| primary: "#161616", | |
| secondary: "#AFFAD6", | |
| lightText: "#FFFFFF", | |
| darkText: "#000000", | |
| }, | |
| font: { | |
| heading: "Raleway", | |
| body: "Cabin", | |
| }, | |
| }; |
aixmazon-v1-2022-PoolB/storefront/components/Button/Button.tsx
Lines 1 to 34 in 56dd520
| import React from "react"; | |
| import styled from "styled-components"; | |
| interface Props { | |
| children?: React.ReactNode; | |
| className?: string; | |
| onClickFunction?: React.MouseEventHandler<HTMLButtonElement>; | |
| isClicked?: boolean; | |
| } | |
| const Button = (props: Props) => { | |
| return ( | |
| <StyledButton | |
| className={props.className} | |
| onClick={props.onClickFunction} | |
| isClicked={props.isClicked} | |
| > | |
| {props.children} | |
| </StyledButton> | |
| ); | |
| }; | |
| export default Button; | |
| const StyledButton = styled.button<Props>` | |
| border: none; | |
| background-color: ${(props) => | |
| props.isClicked | |
| ? props.theme.colors.secondary | |
| : props.theme.colors.primary}; | |
| color: ${(props) => props.theme.colors.lightText}; | |
| transition: background-color 0.2s ease; | |
| padding: 10px 20px; | |
| `; |
aixmazon-v1-2022-PoolB/storefront/components/CTA/CTA.tsx
Lines 1 to 35 in 56dd520
| import React from "react"; | |
| import styled from "styled-components"; | |
| interface Props { | |
| className?: string; | |
| children?: React.ReactNode; | |
| onClickFunction: React.MouseEventHandler<HTMLButtonElement>; | |
| disabled?: boolean; | |
| } | |
| const CTA = (props: Props) => { | |
| return ( | |
| <StyledButton | |
| className={props.className} | |
| onClick={props.onClickFunction} | |
| disabled={props.disabled} | |
| > | |
| {props.children} | |
| </StyledButton> | |
| ); | |
| }; | |
| export default CTA; | |
| const StyledButton = styled.button` | |
| width: 100%; | |
| padding: 16px 20px; | |
| border: none; | |
| background: ${(props) => props.theme.colors.secondary}; | |
| color: ${(props) => props.theme.colors.darkText}; | |
| &:disabled { | |
| opacity: 0.4; | |
| background: lightgrey; | |
| } | |
| `; |
Metadata
Metadata
Assignees
Labels
enhancementNew feature or requestNew feature or requestgood first issueGood for newcomersGood for newcomers