Update demo

Author: HriBB

demo/components/Paper.tsx

@@ -16,6 +16,7 @@ export const Paper: FC<Props> = ({ image }) => {
   return (
     <div className={styles.container}>
       <Toolbar className={styles.toolbar} />
+      <div className={styles.routes}>Routes</div>
       <div className={styles.paper} ref={ref}>
         {width > 0 && height > 0 && (
           <Canvas image={image} width={width} height={height} />

demo/pages/editor.tsx

@@ -4,14 +4,16 @@ import type { NextPage } from "next";
 import { Provider, Paper } from "components";
 import styles from "../styles/Styles.module.css";
 
+import Link from "next/link";
+
 const data = {
   id: "37ag863f-8530-4716-512d-5jr2bd3be5d2",
   width: 1920,
   height: 870,
   url: "/mr-bubbles.jpg",
   routes: [
     {
-      id: "route1",
+      id: "47dea029-5470-4c5a-a94a-61967cc46854",
       name: "Route 1",
       type: "Layer",
       items: [
@@ -44,6 +46,12 @@ const data = {
         },
       ],
     },
+    {
+      id: "8a0c22ee-16c8-4354-89c2-27bee9149ad4",
+      name: "Route 2",
+      type: "Layer",
+      items: [],
+    },
   ],
 };
 
@@ -55,6 +63,7 @@ const Editor: NextPage = () => {
         <meta name="description" content="react-paper-renderer demo" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
+      <Link href="/">Home</Link>
       <div className={styles.container}>
         <Provider>
           <Paper image={data} />

demo/pages/index.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import Head from "next/head";
+import Link from "next/link";
 import type { NextPage } from "next";
 import { Canvas, View, Layer, Rectangle } from "react-paper-renderer";
 import styles from "../styles/Styles.module.css";
@@ -32,6 +33,7 @@ const Home: NextPage = () => {
         <meta name="description" content="react-paper-renderer demo" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
+      <Link href="/editor">Editor</Link>
       <div className={styles.container}>
         <div>
           <button onClick={() => setVisible(!visible)}>canvas1</button>

demo/styles/Styles.module.css

@@ -15,4 +15,5 @@
 
 .canvas {
   border: 2px solid red;
+  border: 2px solid green;
 }