import { ReactNode } from 'react'; import styled, { CSSProperties } from 'styled-components'; type TextProps = { text: string; subtle?: boolean; maxWidth?: string; padding?: string; textAlign?: 'center'; ellipsisOverflow?: boolean; }; const StyledDefaultText = styled.div>` transition: var(--default-duration); max-width: ${props => (props.maxWidth ? props.maxWidth : '')}; padding: ${props => (props.padding ? props.padding : '')}; text-align: ${props => (props.textAlign ? props.textAlign : '')}; font-family: var(--font-default); color: ${props => (props.subtle ? 'var(--text-secondary-color)' : 'var(--text-primary-color)')}; white-space: ${props => (props.ellipsisOverflow ? 'nowrap' : null)}; overflow: ${props => (props.ellipsisOverflow ? 'hidden' : null)}; text-overflow: ${props => (props.ellipsisOverflow ? 'ellipsis' : null)}; `; export const Text = (props: TextProps) => { return {props.text}; }; export const TextWithChildren = (props: Omit & { children: ReactNode }) => { return {props.children}; }; type SpacerProps = { size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'; style?: CSSProperties; }; const SpacerStyled = styled.div` width: ${props => `var(--margins-${props.size})`}; height: ${props => `var(--margins-${props.size})`}; `; const Spacer = (props: SpacerProps) => { return ; }; /** --margins-xs 5px */ export const SpacerXS = (props: { style?: CSSProperties }) => { return ; }; /** --margins-sm 10px */ export const SpacerSM = (props: { style?: CSSProperties }) => { return ; }; /** --margins-md 15px */ export const SpacerMD = (props: { style?: CSSProperties }) => { return ; }; /** --margins-lg 20px */ export const SpacerLG = (props: { style?: CSSProperties }) => { return ; }; /** --margins-xl 25px */ export const SpacerXL = (props: { style?: CSSProperties }) => { return ; }; /** --margins-2xl 30px */ export const Spacer2XL = (props: { style?: CSSProperties }) => { return ; }; /** --margins-3xl 35px */ export const Spacer3XL = (props: { style?: CSSProperties }) => { return ; }; type H3Props = { text: string; }; const StyledH3 = styled.div` transition: var(--default-duration); font-family: var(--font-default); font-size: var(--font-size-md); font-weight: 700; `; export const H3 = (props: H3Props) => {props.text};