fix: fix docz documentation, add codesandbox playground

README.md

@@ -7,7 +7,9 @@
 
 Tiny React component wrapping the ECMAScript Internationalization API with sane defaults to format dates and times.
 
-To see in detail the component `Date` with the list of props and examples please [check the documentation site](https://react-intl-datetime-format.netlify.com).
+To see in detail the component `DateTime` with the list of props and examples please [check the documentation site](https://react-intl-datetime-format.netlify.com).
+
+You can also play with `react-intl-datetime-format` in a [CodeSandbox](https://codesandbox.io/s/react-intl-datetime-format-rmo1i).
 
 ## Features
 
@@ -39,7 +41,7 @@ This is the easiest way to use `Date` formatter component:
 import { DateTime } from "react-intl-datetime-format"
 
 // renders 12/3/1983
-const Foo = () => <DateTime locale="de-DE">03 dec 1983</DateTime>
+const Foo = () => <DateTime locale="en-US">03 dec 1983</DateTime>
 
 // renders the current formatted date guessing the locale from the browser
 const Bar = () => <DateTime />

docs/introduction.mdx

@@ -3,11 +3,15 @@ name: Introduction
 route: /
 ---
 
+import { Link } from "docz"
+
 # react-intl-datetime-format
 
 Tiny React component wrapping the ECMAScript Internationalization API with sane defaults to format dates and times.
 
-To see in detail the component `DateTime` with the list of props and examples please [check the documentation site](https://react-intl-datetime-format.netlify.com).
+<Link to="/datetime">To check some live examples of DateTime component you can go to the detail page</Link>.
+
+You can also play with `react-intl-datetime-format` in a [CodeSandbox](https://codesandbox.io/s/react-intl-datetime-format-rmo1i).
 
 ## Features
 
@@ -39,7 +43,7 @@ This is the easiest way to use `DateTime` formatter component:
 import { DateTime } from "react-intl-datetime-format"
 
 // renders 12/3/1983
-const Foo = () => <DateTime locale="de-DE">03 dec 1983</DateTime>
+const Foo = () => <DateTime locale="en-US">03 dec 1983</DateTime>
 
 // renders the current formatted date guessing the locale from the browser
 const Bar = () => <DateTime />

src/DateTime/DateTime.mdx

@@ -11,8 +11,9 @@ import { DateTime } from "./DateTime"
 
 This React component let you format any date or time based on these criteria:
 
-- Using props
-- Using a Context Provider
+- Using strings, Unix timestamp or Date instances as a source
+- Using props to control the formatting
+- Using a Context Provider to have a general formatting configuration
 - Guessing the default browser locale
 
 ## Props
@@ -33,7 +34,7 @@ Props are matching `Intl.DateTimeFormat` parameters. So [if you need a detailed
     hour="numeric"
     minute="numeric"
   >
-    {new Date(Date.UTC(2012, 11, 20, 3, 0, 0))}
+    {new Date(2012, 11, 20, 3, 0, 0)}
   </DateTime>
   <DateTime as="span" month="long" weekday="short" day="numeric" />
 </Playground>