Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import * as React from 'react'
- import styled from '@emotion/styled'
- import { css } from '@emotion/core'
- import { addPropertyControls, ControlType } from 'framer'
- type DataTypes = {
- format: 'data40' | 'data30' | 'data20' | 'data10'
- }
- interface IDataTextProps {
- width?: number | string | any
- height?: number | string | any
- align?: string
- direction?: string
- format?: string
- transform?: string
- text?: string | number | any
- }
- const sizes = {
- data40: 24,
- data30: 18,
- data20: 14,
- data10: 12
- }
- const spacing = {
- data40: 32,
- data30: 24,
- data20: 20,
- data10: 16
- }
- const colorVariants = {
- data40: '#1f2d46',
- data30: '#1f2d46',
- data20: '#1f2d46',
- data10: '#5c697f'
- }
- const DataStyle = styled.p(
- [],
- ({ format, transform, align, direction }: IDataTextProps) =>
- css`
- font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
- sans-serif;
- font-size: ${sizes[format]}px;
- color: ${colorVariants[format]};
- line-height: ${spacing[format]}px;
- text-transform: ${transform || 'none'};
- text-align: ${align};
- direction: ${direction};
- margin: 0;
- font-variant-numeric: tabular-nums;
- `
- )
- export function Data(props: IDataTextProps) {
- return (
- <>
- <DataStyle format={props.format} {...props}>
- {props.text}
- </DataStyle>
- </>
- )
- }
- Data.defaultProps = {
- height: 32,
- text: '$90,836',
- format: 'data40',
- align: 'left',
- direction: 'ltr',
- transform: 'none'
- }
- addPropertyControls(Data, {
- text: {
- type: ControlType.String,
- defaultValue: Data.defaultProps.text,
- title: 'Text'
- },
- format: {
- type: ControlType.Enum,
- title: 'Format',
- options: ['data40', 'data30', 'data20', 'data10'],
- optionTitles: ['Data 40', 'Data 30', 'Data 20', 'Data 10']
- },
- align: {
- type: ControlType.Enum,
- title: 'Align',
- options: ['left', 'center', 'right', 'justify', 'start', 'end'],
- optionTitles: ['Left', 'Center', 'Right', 'Justify', 'Start', 'End']
- },
- direction: {
- type: ControlType.Enum,
- title: 'Direction',
- options: ['ltr', 'rtl'],
- optionTitles: ['Left to Right', 'Right to Left']
- },
- transform: {
- type: ControlType.Enum,
- title: 'Transform',
- options: ['none', 'capitalize', 'uppercase', 'lowercase', 'full-width'],
- optionTitles: ['none', 'capitalize', 'uppercase', 'lowercase', 'full-width']
- }
- })
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement