Add interactive examples to README

What:

The README should include the list of examples. Each example item should contain:

1. A thumbnail image.
2. A title.
3. A short description on the example’s purpose.
4. A link to the interactive playground (Codesandbox) with the respective example.

Why:

Carefully designed, a list of examples may substitute documentation at its entirety. At least it’s a great illustrative showcase for practical learners and beyond.

How:

I suggest to split examples into sections based on the complexity level.

Basics

• Basic composition. Example of two elements combining into a composition. Can be icon and text, or anything.
• Responsive props. Shows how to use Responsive props. Can utilize the previous “Basic composition” example, but improve it with some responsive props to show the change.
• Nested composition

Intermediate

• Conditional rendering. Showcases the usage of the <Only/> component.
• Custom configuration. Example of using Layout.configure() to set custom breakpoints and custom measurement unit.
• Demonstrate how to use the query() utility function to compose inline media queries in styled-components

Advanced

• Responsive sife effect. How to execute any side effect upon breakpoint change (useResponsiveQuery)
• Responsive component. How to add Responsive props support to any React component.
• SSR of conditional components. How to use <Visible/> to conditionally render components and support client-side hydration.

[dandelionadia]

I will edit this comment if I finish more examples.

Basics

• Basic composition: https://codesandbox.io/s/simple-composition-5mvlr
• Responsive props: https://codesandbox.io/s/responsive-props-8m14f
• Nested composition: https://codesandbox.io/s/nested-composition-8p8pk

Intermediate

• Conditional rendering: https://codesandbox.io/s/conditional-rendering-4k90o?file=/src/index.js
• Custom configuration: https://codesandbox.io/s/custom-configuration-d01ku?file=/src/index.js
• Query: https://codesandbox.io/s/atomic-layout-query-d2mdl

[kettanaito]

@dandelionadia, thank you for the fixes! Please, if I may, there are a few more comments.

Conditional rendering

• Could you please fix those errors in the console? They are related to prop name casing in Logo.js (svg element).
• I’d be better if “Documentation” linked to the root page. The same way “GitHub” should link to the repo page.
• Could you please also add a description to the example and some hashtags?

Custom configuration

• It’d be great to put the data array into a separate JSON file (i.e. data.json).
• What do you think if we set maxWidth={16} and maxWidthTablet={30} on Album.js component? So it doesn’t stretch full-width on small screens.