diff --git a/src/components/example/index.css b/src/components/example/index.css index 74fb090..bb3d093 100644 --- a/src/components/example/index.css +++ b/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; } } diff --git a/src/components/example/index.js b/src/components/example/index.js index 66ed559..04a4365 100644 --- a/src/components/example/index.js +++ b/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 }) => ( {children} @@ -33,13 +37,22 @@ const Example = (props) => { [RegExr] + + [Visualization] + + );