import React, { Component } from 'react'
import { Button, Text, styled } from 'sourceblocks'

const StyledText = styled(Text, {
  textTransform: 'uppercase',
  // Access internal theme variables using tokens
  padding: '$2 0',
  // read more https://stitches.dev/docs/tokens
  color: '$textColor$success'
})

const Example = () => {
  return (
    <>
      <StyledText variant='hero'>Welcome to sourceblocks!</StyledText>
      <Button
        variant='primary'
        onClick={() => require('source').navigateToTheMoon()}
        css={{ marginTop: '$12' }}
      >
        Join our team here
      </Button>
    </>
  )
}