diff --git a/pages/examples/index.tsx b/pages/examples/index.tsx index 8a13fbe..2b6eb63 100644 --- a/pages/examples/index.tsx +++ b/pages/examples/index.tsx @@ -228,6 +228,20 @@ const Examples: NextPage = () => { +
  • + +
    + +
    +
    + Simultaneous Cursors +

    + This demo shows the real-time collaborative version of simple drawing, cursor animation with Yorkie + and React. +

    +
    + +
    • diff --git a/pages/examples/simultaneous-cursors.tsx b/pages/examples/simultaneous-cursors.tsx new file mode 100644 index 0000000..db4df25 --- /dev/null +++ b/pages/examples/simultaneous-cursors.tsx @@ -0,0 +1,70 @@ +import { NextPage } from 'next'; +import Head from 'next/head'; +import { ExampleLayout } from '@/components'; +import { + Sidebar, + BasicExampleView, + ProjectCodes, + COMMON_IGNORE_FILES, + EXAMPLE_CODE_URL, + EXAMPLE_PREVIEW_URL, +} from '@/components/exampleView'; +import { FILE_INFO } from '@/examples/simultaneous-cursors/fileInfo'; + +const exampleKey = 'simultaneous-cursors'; +const exampleTitle = 'Simultaneous Cursors'; + +const SimultaneousExampleView: NextPage = () => { + return ( + + {() => ( + <> + + {`${exampleTitle} ยท Yorkie Examples`} + + + + + + Code + + + + {exampleTitle} + + This demo shows the real-time collaborative version of simple drawing, cursor animation with{' '} + + Yorkie + {' '} + and{' '} + + React + + . + + + + + + + + + )} + + ); +}; +export default SimultaneousExampleView; diff --git a/public/assets/images/examples/simultaneous-cursors.jpg b/public/assets/images/examples/simultaneous-cursors.jpg new file mode 100644 index 0000000..f8dafd1 Binary files /dev/null and b/public/assets/images/examples/simultaneous-cursors.jpg differ