From ec6ac35c052f6775f01ecff60bfd433764a0cef0 Mon Sep 17 00:00:00 2001
From: Francois Best <francois@francoisbest.com>
Date: Thu, 2 Apr 2020 17:06:16 +0200
Subject: [PATCH] doc: Add components examples

---
 README.md | 63 +++++++++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 59 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 188b408..323b63a 100644
--- a/README.md
+++ b/README.md
@@ -12,11 +12,11 @@ Design System for React, based on Chakra UI + Next.js, written in TypeScript.
 
 - Low-boilerplate `_app.tsx`
 - Batteries included but replaceable (theme, colors, fonts)
-- Components:
-  - Links
-  - Containers
-  - More to come
 - 100% TypeScript
+- Components:
+  - 🔗 [Links](#links)
+  - 🗜 [Containers](#containers)
+  - 🧪 _More to come_
 
 ## Installation
 
@@ -113,6 +113,61 @@ export default createChakraNextApp({
 })
 ```
 
+## Components
+
+### Links
+
+```tsx
+import { RouteLink, OutgoingLink, ButtonRouteLink } from '@47ng/chakra-next'
+
+export default () => (
+  <>
+    {/* Integrate Next.js routes with Chakra styles */}
+    <RouteLink to="/login">Login</RouteLink>
+
+    {/* Use `as` for dynamic routes */}
+    <RouteLink to="/posts/[slug]" as="/posts/foo">Login</RouteLink>
+
+    {/* Make external links stand out */}
+    <OutgoingLink href="https://github.com">GitHub</RouteLink>
+
+    {/* For when a button looks better, still outputs an <a> tag */}
+    <ButtonRouteLink to="/logout">Logout</ButtonRouteLink>
+  </>
+)
+```
+
+### Containers
+
+```tsx
+import { Container, FlexContainer, StackContainer } from '@47ng/chakra-next'
+
+export default () => (
+  <>
+    {/* Container as Box */}
+    <Container>I am centred and width-limited</Container>
+
+    {/* Container + Flex */}
+    <FlexContainer>
+      <Box>Direction is column by default</Box>
+      <Box>Foo</Box>
+      <Box>Bar</Box>
+      <Box>Egg</Box>
+    </FlexContainer>
+
+    {/* Container + Stack */}
+    <StackContainer spacing={8}>
+      <Box>Foo</Box>
+      <Box>Bar</Box>
+      <Box>Egg</Box>
+    </StackContainer>
+  </>
+
+  {/* All containers can be wider */}
+  <Container wide>I am centred and width-limited</Container>
+)
+```
+
 ## License
 
 [MIT](https://github.com/47ng/chakra-next/blob/next/LICENSE) - Made with ❤️ by [François Best](https://francoisbest.com).