Componente de Tipografia

gistfile1.txt

import styled from "styled-components";
import colors from "@/styles/colors";

export const sizes = {
    minimun: '0.563rem',
    xxs: '0.625rem',
    xs: '0.75rem',
    small: '0.875rem',
    medium: '1rem',
    large: '1.125rem',
    xl: '1.25rem',
    xxl: '1.375rem',
    display: '1.5rem'
};

type TextProps = {
    noShorten?: boolean;
    color?: keyof typeof colors;
    size?: keyof typeof sizes;
    weight?: '400' | '500' | '700';
    italic?: boolean
};

const shorten = `
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* number of lines to show */
    line-clamp: 2; 
    -webkit-box-orient: vertical;
`;

export const Typography = styled.span<TextProps>`
    font-family: Inter;
    color: ${props => props.color ? colors[props.color] : colors.black};
    font-size: ${props => props.size ? sizes[props.size] : sizes.medium};
    font-weight: ${props => props.weight ? props.weight : 400};
    font-style:  ${props => props.italic ? "italic" : "normal"};
    ${props => props.noShorten ? '' : shorten}
`;

type IconProps = {
    color?: keyof typeof colors;
    size?: keyof typeof sizes;
    pointer?: boolean;
};

export const Icon = styled.div<IconProps>`
    cursor: ${props => props.pointer ? 'pointer' : 'none'};
    svg {
        color: ${props => props.color ? colors[props.color] : colors.black};
        font-size: ${props => props.size ? sizes[props.size] : sizes.medium};
    }
`;