Add Regexper links to each example

Resolves #20

src/components/example/index.css

@@ -15,20 +15,20 @@
     line-height: 1.9;
 }
 
-.example .regexr-link {
+.example .demo-link {
     margin-left: 1em;
     opacity: 0.6;
 }
 
-.example .regexr-link:hover,
-.example .regexr-link:active,
-.example .regexr-link:focus {
+.example .demo-link:hover,
+.example .demo-link:active,
+.example .demo-link:focus {
     color: hsl(219, 100%, 47%);
     opacity: 1;
 }
 
 @media print {
-    .example .regexr-link {
+    .example .demo-link {
         display: none;
     }
 }

src/components/example/index.js

@@ -18,6 +18,10 @@ const Example = (props) => {
         )}&text=${encodeURIComponent(playGroundText)}
     `.trim();
 
+    const visualizationUrl = `
+        https://regexper.com/#${encodeURIComponent(regex.toString())}
+    `.trim();
+
     const noop = ({ children }) => <>{children}</>;
     const code = ({ children }) => (
         <code className="regex-name">{children}</code>
@@ -33,13 +37,22 @@ const Example = (props) => {
 
             <a
                 href={playGroundUrl}
-                className="regexr-link"
+                className="demo-link"
                 target="_blank"
                 rel="noopener noreferrer"
             >
                 [RegExr]
             </a>
 
+            <a
+                href={visualizationUrl}
+                className="demo-link"
+                target="_blank"
+                rel="noopener noreferrer"
+            >
+                [Visualization]
+            </a>
+
             <ul>{testCases(regex, testStrings)}</ul>
         </figure>
     );