koss-lebedev

import styled from 'styled-components'

const Header = styled.h1`
  font-size: ${props => props.theme.fontSize.header};
  color: ${props => props.theme.color.text};
`;

koss-lebedev

const theme = {
  color: {
    text: '#141414',
    primary: '#023EBE',
    danger: '#E90056'
  },
  fontSize: {
    header: '2rem',
    subTitle: '1.8rem',
    text: '1.6rem'

koss-lebedev

import styled from 'styled-components'
import theme from 'styles'

const Header = styled.h1`
  font-size: ${theme.fontSize.header};
  color: ${theme.color.text};
`;

koss-lebedev

import styled from 'styled-components'

const Header = styled.h1`
  font-size: ${props => props.theme.fontSize.header};
  color: ${props => props.theme.colors.text}; 
`;

koss-lebedev

import styled from 'styled-components'
import theme from 'styles'

const Header = styled.h1`
  font-size: ${theme.fontSize.header};

  color: ${theme.colors.text}; 
`;

// [ts] property 'colors' doesn't exist. Did you mean `color`?

koss-lebedev

import theme from 'styles'

export const Container = styled.div`
  box-shadow: inset 0 6.2rem 0 0 ${theme.color.lightBackground};
  border: 0.1rem solid ${theme.color.border};
  border-radius: ${theme.borderRadius};
`

koss-lebedev

export const Container = styled.div`
  box-shadow: inset 0 6.2rem 0 0 ${props => props.theme.color.lightBackground};
  border: 0.1rem solid ${props => props.theme.color.border};
  border-radius: ${props => props.theme.borderRadius};
`

koss-lebedev

interface IUser {
  firstName: string
  lastName: string
}

interface IUser {
  age: number
}

const user: IUser = {

koss-lebedev

type CreditCard = {
  number: string
  expMonth: number
  expYear: number
}

// Type with union operator
type Chargeable = { token: string } | { cvc: number }

type ChargeableCreditCard = CreditCard & Chargeable

koss-lebedev

rails generate active_dynamic
rake db:migrate