Usar o DefaultButton
const Product = () => {
const description =
"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam ducimus consequatur, quos reiciendis distinctio molestias consequuntur laudantium nostrum, nesciunt quis velit provident modi temporibus voluptatibus natus porro quisquam quae. Ad laboriosam ducimus iste cumque corporis et quibusdam hic. Commodi quasi, in totam iure repellat voluptatibus labore nostrum omnis itaque minus?";
return (
<Container>
<BackArrow marginLeft={30} />
<Title>Playstation 4 com dois controles</Title>
<SubTitleContainer>
<SubTitle>Publicado em 10/05/23</SubTitle>
<SubTitle>Recife, PE</SubTitle>
</SubTitleContainer>
<Carousel images={images} />
<InfoContainer>
<Price>R$ 1800</Price>
<InteractionsContainer>
<Button activeOpacity={0.8}>
<Like source={like} />
</Button>
<Button activeOpacity={0.8}>
<Share source={share} />
</Button>
</InteractionsContainer>
</InfoContainer>
<DescriptionComponent desc={description} />
<SellerInfo />
<DefaultButton
buttonText="Fale com o vendedor"
buttonType="primary"
buttonHandle={() => {}}
marginVertical={0}
/>
</Container>
);
};
Criar o estilo de denunciar o vendedor
export const DenounceTxt = styled.Text`
font-size: 14px;
color: ${({ theme }) => theme.colors.secondaryText};
text-align: center;
margin-top: 25px;
`;
Usar o texto de denunciar
const Product = () => {
const description =
"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam ducimus consequatur, quos reiciendis distinctio molestias consequuntur laudantium nostrum, nesciunt quis velit provident modi temporibus voluptatibus natus porro quisquam quae. Ad laboriosam ducimus iste cumque corporis et quibusdam hic. Commodi quasi, in totam iure repellat voluptatibus labore nostrum omnis itaque minus?";
return (
<Container>
<BackArrow marginLeft={30} />
<Title>Playstation 4 com dois controles</Title>
<SubTitleContainer>
<SubTitle>Publicado em 10/05/23</SubTitle>
<SubTitle>Recife, PE</SubTitle>
</SubTitleContainer>
<Carousel images={images} />
<InfoContainer>
<Price>R$ 1800</Price>
<InteractionsContainer>
<Button activeOpacity={0.8}>
<Like source={like} />
</Button>
<Button activeOpacity={0.8}>
<Share source={share} />
</Button>
</InteractionsContainer>
</InfoContainer>
<DescriptionComponent desc={description} />
<SellerInfo />
<DefaultButton
buttonText="Fale com o vendedor"
buttonType="primary"
buttonHandle={() => {}}
marginVertical={0}
/>
<DenounceText onPress={() => {}}>
Achou algo estranho? Denuncie!
</DenounceText>
</Container>
);
};
Agora para finalizarmos a tela será bem simples, iremos primeiro utilizar o botão default para depois falarmos com o vendedor.
const Product = () => {
{/* Outros códigos */}
</InfoContainer>
<DescriptionComponent desc={description} />
<SellerInfo />
<DefaultButton
buttonText="Fale com o vendedor"
buttonType="primary"
buttonHandle={() => {}}
marginVertical={0}
/>
</Container>
);
};
Agora iremos criar o texto de denunciar o vendedor, que iremos clicar e ir para uma tela feita para isso.
export const DenounceTxt = styled.Text`
font-size: 14px;
color: ${({ theme }) => theme.colors.secondaryText};
text-align: center;
margin-top: 25px;
`;
Com o texto criado, vamos utilizar ele abaixo do botão de chat
const Product = () => {
{/* Outros códigos */}
</InfoContainer>
<DescriptionComponent desc={description} />
<SellerInfo />
<DefaultButton
buttonText="Fale com o vendedor"
buttonType="primary"
buttonHandle={() => {}}
marginVertical={0}
/>
<DenounceText>
Achou algo estranho? Denuncie!
</DenounceText>
</Container>
);
};
Podemos ver então a tela de Produto 100% finalizada!