feat(docz-theme-default): add custom not found component

packages/docz-theme-default/src/components/ui/NotFound.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react'
+import styled from 'react-emotion'
+
+const Wrapper = styled('div')`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+`
+
+const Title = styled('h1')`
+  margin: 0;
+  font-size: 48px;
+  color: ${p => p.theme.colors.primary};
+`
+
+const Subtitle = styled('p')`
+  margin: 0;
+  font-size: 22px;
+`
+
+export const NotFound = () => (
+  <Wrapper>
+    <Title>Page Not Found</Title>
+    <Subtitle>
+      Check if you haven't changed the document route or delete it!
+    </Subtitle>
+  </Wrapper>
+)

packages/docz-theme-default/src/components/ui/index.tsx

@@ -6,6 +6,7 @@ export { H5 } from './H5'
 export { H6 } from './H6'
 export { List } from './List'
 export { Loading } from './Loading'
+export { NotFound } from './NotFound'
 export { Page } from './Page'
 export { Pre } from './Pre'
 export { Render } from './Render'

packages/docz-theme-default/src/index.tsx

@@ -15,6 +15,7 @@ const Theme = () => (
           <DocPreview
             components={{
               page: components.Page,
+              notFound: components.NotFound,
               render: components.Render,
               h1: components.H1,
               h2: components.H2,