feat(theme): export theme from _app.tsx file

README.md

@@ -1,3 +1,55 @@
-# Steps at this point
+# Baseweb UI Boilerplate
 
-![typescript config v1](https://i.imgur.com/itkSirE.png)
+## What is this?
+* A boilerplate of basic Next.js application integrated with BaseWeb UI.
+## What's include?
+* Next.js
+* Typescript
+* Eslint
+* Prettier
+* Styletron
+* BaseWeb UI
+* Commitizen friendly
+
+### How to use
+1. `git clone https://github.com/irvv17/Nextjs-Baseweb-Boilerplate`
+2. ` yarn` or `npm install`
+3. `yarn dev` or `npm run dev`
+### How it works?
+
+1. Start with create **Styletron** application
+2. Set typescript
+3. Set Eslint and Prettier preferences
+4. Set Baseui into our next app
+5. Set our first component
+6. Enjoy basewebui
+
+### Project structure
+    ├── src
+    |   ├── components
+    |   |   ├── Footer.tsx
+    |   |   └── NavBar.tsx
+    |   ├── helpers
+    |   |   └── styletron.tsx
+    |   ├── pages
+    |   |   ├── _app.tsx
+    |   |   ├── _document.tsx
+    |   |   └── index.tsx
+    ├── .eslintrc.json   
+    ├── .gitignore   
+    ├── .prettierrc  
+    ├── jest.config.js  
+    ├── next.config.js
+    ├── package.json
+    ├── README.md
+    ├── tsconfig.jest.json
+    └── tsconfig.json
+
+> This is part of blog entry called: **The Gold Mine of UI Frameworks: Base Web React by UBER**
+
+> You can check it in
+> 1. [Medium]()
+> 2. [DEV]()
+
+
+Feel free to make a PR and help me to improve this repo  :)

src/components/Footer.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { Block } from 'baseui/block';
+import Link from 'next/link';
+import { themedStyled } from '../pages/_app';
+
+const UberLogo = () => (
+  <React.Fragment>
+    <img
+      src="https://res.cloudinary.com/dogfasxu0/image/upload/v1611551393/icons/percussion-instrument_ztqs5s.svg"
+      alt="Base Web"
+      height="40px"
+      width="97px"
+    />
+    Instrumentos de Percusion 2021, Todos los derechos reservados
+  </React.Fragment>
+);
+
+const StyledFooter = themedStyled(
+  'footer',
+  ({ $theme: { typography, sizing, colors, name } }) => ({
+    ...typography.font300,
+    // position: 'sticky',
+    bottom: 0,
+    color: colors.contentPrimary,
+    backgroundColor: name.startsWith('light-theme')
+      ? colors.mono200
+      : colors.headerNavigationFill,
+    width: '100%',
+    marginTop: sizing.scale1400,
+    paddingTop: sizing.scale1600,
+    paddingBottom: sizing.scale1600,
+    textAlign: 'center',
+  }),
+);
+
+const StyledLink = themedStyled('a', ({ $theme }) => ({
+  textDecoration: 'none',
+  color: $theme.colors.contentPrimary,
+  display: 'inline-block',
+  cursor: 'pointer',
+  marginLeft: '32px',
+  ':first-child': {
+    marginLeft: '0',
+  },
+  ':focus': {
+    outline: `3px solid ${$theme.colors.accent}`,
+    outlineOffset: '3px',
+  },
+  ':hover': {
+    color: $theme.colors.primary,
+    textDecoration: 'none',
+  },
+}));
+
+function Footer() {
+  return (
+    <StyledFooter>
+      <Block paddingBottom="scale1000">
+        <StyledLink href="https://github.com/uber/baseweb" target="_blank">
+          GitHub
+        </StyledLink>
+        <StyledLink href="https://twitter.com/BaseWebReact" target="_blank">
+          Twitter
+        </StyledLink>
+        <StyledLink
+          href="https://join.slack.com/t/baseui/shared_invite/zt-5f1s4d10-1D2uywAECAG50m64PTH9cw"
+          target="_blank"
+        >
+          Slack Chat room
+        </StyledLink>
+        <StyledLink
+          href="https://github.com/uber/baseweb/releases"
+          target="_blank"
+        >
+          Changelog
+        </StyledLink>
+        <Link href="/blog">
+          <StyledLink href="/blog">Blog</StyledLink>
+        </Link>
+      </Block>
+      <UberLogo />
+    </StyledFooter>
+  );
+}
+
+export default Footer;

src/pages/_app.tsx

@@ -4,13 +4,15 @@ import Head from 'next/head';
 import type { AppProps } from 'next/app';
 import type { NextPage, NextPageContext } from 'next';
 import { Provider as StyletronProvider } from 'styletron-react';
-import { BaseProvider } from 'baseui';
+import { BaseProvider, createThemedStyled } from 'baseui';
+import type { ThemeT } from 'baseui/styles/types';
 import {
   LightTheme,
 } from 'baseui';
 
 import { styletron } from '../helpers/styletron';
 
+export const themedStyled = createThemedStyled<ThemeT>();
 export default class MyApp extends App {
   constructor(props: AppProps) {
     super(props);