theme-ui#Styled TypeScript Examples

The following examples show how to use theme-ui#Styled. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: blog-list-item.tsx    From carlosazaustre.es with MIT License 6 votes vote down vote up 
BlogListItem = ({ post, showTags = true }: BlogListItemProps) => (
  <Box mb={4}>
    <Styled.a as={Link} to={post.slug} sx={{ fontSize: [1, 2, 3], color: `text` }}>
      {post.title}
    </Styled.a>
    <p sx={{ color: `secondary`, mt: 1, a: { color: `secondary` }, fontSize: [1, 1, 2] }}>
      <time>{post.date}</time>
      {post.tags && showTags && (
        <React.Fragment>
          {` — `}
          <ItemTags tags={post.tags} />
        </React.Fragment>
      )}
    </p>
  </Box>
)
Example #2
Source File: blog.tsx    From carlosazaustre.es with MIT License 6 votes vote down vote up 
Blog = ({ posts }: PostsProps) => {
  const { tagsPath, basePath } = useMinimalBlogConfig()

  return (
    <Layout>
      <SEO title="Blog" />
      <Flex sx={{ alignItems: `center`, justifyContent: `space-between`, flexFlow: `wrap` }}>
        <Styled.h2>Blog</Styled.h2>
        <Styled.a as={Link} sx={{ variant: `links.secondary` }} to={replaceSlashes(`/${basePath}/${tagsPath}`)}>
          Ver todas las categorías
        </Styled.a>
      </Flex>
      <Listing posts={posts} sx={{ mt: [4, 5] }} />
    </Layout>
  )
}
Example #3
Source File: item-tags.tsx    From carlosazaustre.es with MIT License 6 votes vote down vote up 
ItemTags = ({ tags }: TagsProps) => {
  const { tagsPath, basePath } = useMinimalBlogConfig()

  return (
    <React.Fragment>
      {tags.map((tag, i) => (
        <React.Fragment key={tag.slug}>
          {!!i && `, `}
          <Styled.a as={Link} to={replaceSlashes(`/${basePath}/${tagsPath}/${tag.slug}`)}>
            {tag.name}
          </Styled.a>
        </React.Fragment>
      ))}
    </React.Fragment>
  )
}
Example #4
Source File: navigation.tsx    From carlosazaustre.es with MIT License 6 votes vote down vote up 
Navigation = ({ nav }: NavigationProps) => {
  const { basePath } = useMinimalBlogConfig()

  return (
    <React.Fragment>
      {nav && nav.length > 0 && (
        <nav sx={{ "a:not(:last-of-type)": { mr: 3 }, fontSize: [1, `18px`], ".active": { color: `heading` } }}>
          {nav.map(item => (
            <Styled.a
              key={item.slug}
              as={Link}
              activeClassName="active"
              to={replaceSlashes(`/${basePath}/${item.slug}`)}
            >
              {item.title}
            </Styled.a>
          ))}
        </nav>
      )}
    </React.Fragment>
  )
}
Example #5
Source File: page.tsx    From carlosazaustre.es with MIT License 6 votes vote down vote up 
Page = ({ data: { page } }: PageProps) => (
  <Layout>
    <SEO title={page.title} description={page.excerpt} />
    <Styled.h1>{page.title}</Styled.h1>
    <section sx={{ my: 5 }}>
      <MDXRenderer>{page.body}</MDXRenderer>
    </section>
  </Layout>
)
Example #6
Source File: tag.tsx    From carlosazaustre.es with MIT License 6 votes vote down vote up 
Tag = ({ posts, pageContext }: TagProps) => {
  const { tagsPath, basePath } = useMinimalBlogConfig()

  return (
    <Layout>
      <SEO title={`Tag: ${pageContext.name}`} />
      <Flex sx={{ alignItems: `center`, justifyContent: `space-between`, flexFlow: `wrap` }}>
        <Styled.h2>{pageContext.name}</Styled.h2>
        <Styled.a as={Link} sx={{ variant: `links.secondary` }} to={replaceSlashes(`/${basePath}/${tagsPath}`)}>
          Ver todas las categorías
        </Styled.a>
      </Flex>
      <Listing posts={posts} sx={{ mt: [4, 5] }} />
    </Layout>
  )
}
Example #7
Source File: tags.tsx    From carlosazaustre.es with MIT License 6 votes vote down vote up 
Tags = ({ list }: PostsProps) => {
  const { tagsPath, basePath } = useMinimalBlogConfig()

  return (
    <Layout>
      <SEO title="Tags" />
      <Styled.h2>Categorías</Styled.h2>
      <p>En este blog se habla de:</p>
      <Box mt={[4, 5]}>
        {list.map(listItem => (
          <Flex key={listItem.fieldValue} mb={[1, 1, 2]} sx={{ alignItems: `center` }}>
            <Styled.a
              as={Link}
              sx={{ variant: `links.listItem`, mr: 2 }}
              to={replaceSlashes(`/${basePath}/${tagsPath}/${kebabCase(listItem.fieldValue)}`)}
            >
              {listItem.fieldValue} <span sx={{ color: `secondary` }}>({listItem.totalCount})</span>
            </Styled.a>
          </Flex>
        ))}
      </Box>
    </Layout>
  )
}
Example #8
Source File: layout.tsx    From carlosazaustre.es with MIT License 5 votes vote down vote up 
Layout = ({ children, className }: LayoutProps) => (
  <MDXProvider
    components={{ ExternalLink }}
  >
    <Styled.root data-testid="theme-root">
      <Global
        styles={css({
          "*": {
            boxSizing: `inherit`
          },
          body: {
            margin: 0,
            padding: 0,
            boxSizing: `border-box`,
            textRendering: `optimizeLegibility`,
            borderTop: `10px solid #FBCF65`
          },
          "::selection": {
            backgroundColor: `secondary`,
            color: `white`
          },
          a: {
            transition: `all 0.3s ease-in-out`,
            color: `#FFB934`          }
        })}
      />
      <SEO />
      <SkipNavLink>Ver contenido</SkipNavLink>
      <Container css={css`
        background-color: #fff;
        margin: 0 auto;
        padding: 0.5rem 1.5rem;
        margin-top: 1em;
        max-width: 1024px;
      `}>
        <Header />
        <div id="skip-nav" css={css({ ...CodeStyles })} className={className}>
          {children}
        </div>
        <Footer />
      </Container>
    </Styled.root>
  </MDXProvider>
)
Example #9
Source File: post.tsx    From carlosazaustre.es with MIT License 5 votes vote down vote up 
Post = ({ data: { post } }: PostProps) => {
  let disqusConfig = {
    url: `https://carlosazaustre.es${ post.slug}`,
    identifier: post.id,
    title: post.title
  };

  return (
    <Layout>
      <SEO
        title={post.title}
        description={post.description ? post.description : post.excerpt}
        image={post.banner ? post.banner.childImageSharp.resize.src : undefined}
      />
      <Styled.h1>{post.title}</Styled.h1>
      <p
        sx={{
          color: `secondary`,
          mt: 3,
          a: { color: `secondary` },
          fontSize: [1, 1, 2]
        }}
      >
        ? <time>{post.date}</time>
        {post.tags && (
          <React.Fragment>
            {` | `}
            <ItemTags tags={post.tags} />
          </React.Fragment>
        )}
        {` | `}
        <span>? {post.timeToRead} minutos de lectura</span>
        {` | `}
        <span>
          <Link to={post.slug + `#disqus_thread`}>
            ? <CommentCount config={disqusConfig} placeholder={`Comments`} />
          </Link>
        </span>
      </p>
      <section
        sx={{
          my: 5,
          ".gatsby-resp-image-wrapper": {
            my: [4, 4, 5],
            boxShadow: shadow.join(`, `)
          }
        }}
      >
        <MDXRenderer>{post.body}</MDXRenderer>
        <OpenPR
          slugPost={post.slug}
          text="✎ ¿Ves alguna errata? ¿Quieres modificar algo?"
        />
        <Disqus config={disqusConfig} />
        <Author />
      </section>
    </Layout>
  );
}
Example #10
Source File: theme.tsx    From livepeer-com with MIT License 5 votes vote down vote up 
ThemeProvider = memo(({ children, ...props }: any) => (
  <TP theme={theme} {...props}>
    <Styled.root>{children}</Styled.root>
  </TP>
))