9ca3dbeb70
* Init add choose your plan page component * Update price format * Add billing refund trial duration env variable * Add billing benefits * Add Button * Call checkout endpoint * Fix theme color * Add Payment success modale * Add loader to createWorkspace submit button * Fix lint * Fix dark mode * Code review returns * Use a resolver for front requests * Fix 'create workspace' loader at sign up * Fix 'create workspace' with enter key bug
34 lines
1.0 KiB
TypeScript
34 lines
1.0 KiB
TypeScript
import styled from '@emotion/styled';
|
|
|
|
type SubscriptionCardPriceProps = {
|
|
price: number;
|
|
};
|
|
const StyledSubscriptionCardPriceContainer = styled.div`
|
|
align-items: baseline;
|
|
display: flex;
|
|
gap: ${({ theme }) => theme.betweenSiblingsGap};
|
|
margin: ${({ theme }) => theme.spacing(1)} 0
|
|
${({ theme }) => theme.spacing(2)};
|
|
`;
|
|
const StyledPriceSpan = styled.span`
|
|
color: ${({ theme }) => theme.font.color.primary};
|
|
font-size: ${({ theme }) => theme.font.size.xl};
|
|
font-weight: ${({ theme }) => theme.font.weight.semiBold};
|
|
`;
|
|
const StyledSeatSpan = styled.span`
|
|
color: ${({ theme }) => theme.font.color.light};
|
|
font-size: ${({ theme }) => theme.font.size.md};
|
|
font-weight: ${({ theme }) => theme.font.weight.medium};
|
|
`;
|
|
export const SubscriptionCardPrice = ({
|
|
price,
|
|
}: SubscriptionCardPriceProps) => {
|
|
return (
|
|
<StyledSubscriptionCardPriceContainer>
|
|
<StyledPriceSpan>${price}</StyledPriceSpan>
|
|
<StyledSeatSpan>/</StyledSeatSpan>
|
|
<StyledSeatSpan>seat</StyledSeatSpan>
|
|
</StyledSubscriptionCardPriceContainer>
|
|
);
|
|
};
|