Add panel in layout on page/app

components/Navbar/index.jsx

@@ -30,9 +30,9 @@ const Navigation = () => {
         <Link href='/'>
           <a className={style.title} translate='no'>
             <figure className={style.logo}>
-              <Image src='/mdpreview-logo.png' alt='Markdown Preview logo' title='Markdow Preview' layout='fill' />
+              <Image src='/rundevs.png' alt='Rundev logo' title='Rundev' layout='fill' />
             </figure>
-            <h1>Markdown Preview</h1>
+            <h1>Rundev</h1>
           </a>
         </Link>
         <nav className={style.navbar}>

components/Editor/Editor.jsx → components/Playground/Editor/Editor.jsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useRef } from 'react'
 import EditorCode from '@monaco-editor/react'
-import useThemes from '../../hooks/useThemes'
+import useThemes from '../../../hooks/useThemes'
 // import onedark from './onedark.json'
 import style from './editor.module.css'
 
@@ -15,13 +15,22 @@ const Editor = ({ initialDoc, onChange }) => {
 
   const handleEditorDidMount = (editor, monaco) => {
     editorRef.current = editor
+    console.log({ monaco, editor })
     // monaco.editor.defineTheme("onedark", onedark)
     // monaco.editor.setTheme("onedark")
   }
 
-  // const handleSave = () => {
-  //   // const content = editorRef.current.getValue()
-  // }
+  const handleSave = () => {
+    // const content = editorRef.current.getValue()
+  }
+
+  const options = {
+    selectOnLineNumbers: true,
+    wordWrap: 'on',
+    scrollBeyondLastLine: false,
+    renderLineHighlight: 'gutter',
+    renderIndentGuides: true,
+  }
 
   return (
     <EditorCode
@@ -31,6 +40,7 @@ const Editor = ({ initialDoc, onChange }) => {
       onChange={handleChange}
       className={style.editor}
       onMount={handleEditorDidMount}
+      options={options}
     />
   )
 }

components/Navbar/NavEditor/NavEditor.jsx → components/Playground/NavEditor/NavEditor.jsx

@@ -1,6 +1,7 @@
 import React, { Fragment, useState } from 'react'
 import { useRouter } from 'next/router'
 import Image from 'next/image'
+
 import Portal from '../../Portal'
 import { Files, Setting, User } from '../../../assets/icons'
 import style from './naveditor.module.css'
@@ -12,7 +13,7 @@ const themesContent = [
   { value: 'github-dark-dimmed', label: 'GitHub Dark' }
 ]
 
-const NavEditor = () => {
+const NavEditor = ({ handleExplorer }) => {
   const [activeSetting, setActiveSetting] = useState(false)
   const router = useRouter()
   const handleMenu = () => setActiveSetting(!activeSetting)
@@ -25,10 +26,10 @@ const NavEditor = () => {
             {/* <Link href='/'> */}
             <button onClick={() => router.push('/')} className={style.tooltip} data-tooltip='Home'>
               <div />
-              <Image src='/mdpreview.webp' alt='markdown preview logo' width={25} height={25} priority={true} />
+              <Image src='/rundevs.png' alt='Rundev logo' width={25} height={25} priority={true} />
             </button>
             {/* </Link> */}
-            <button className={style.tooltip} data-tooltip='Explorer'>
+            <button onClick={handleExplorer} className={style.tooltip} data-tooltip='Explorer'>
               <Files />
             </button>
           </div>

components/Navbar/NavEditor/naveditor.module.css → components/Playground/NavEditor/naveditor.module.css

@@ -23,7 +23,7 @@
   border-radius: 50%;
   width: 50%;
   height: 50%;
-  background-image: -webkit-linear-gradient(120deg, var(--md-cursor), var(--md-sage));
+  background-image: -webkit-linear-gradient(120deg, var(--md-cursor), var(--md-coral) 120%);
   filter: blur(5px);
   opacity: 0;
   transition: opacity .1s ease-out;
@@ -78,6 +78,7 @@
   transition: opacity .0s ease-out;
   z-index: 1;
   opacity: 0;
+  display: none;
   border-collapse: collapse;
   display: none;
 }
@@ -110,7 +111,6 @@
   height: 100%;
   width: 100%;
   z-index: 10;
-  /* background-color: rgba(0, 0, 0, 0.603); */
 }
 
 .menu {
@@ -196,6 +196,7 @@
     width:  48px;
     position: relative;
     border-right: 1px solid var(--md-divider-light-1);
+    border-bottom: 0;
   }
 
   .navEditor {
@@ -212,12 +213,9 @@
     width: 100%;
   }
 
-  .tooltip::before, .tooltip::after {
-    display: block;
-  }
-
   .tooltip:hover::before, .tooltip:hover::after {
     opacity: 1;
+    display: flex;
     transition-delay: 0.3s;
   }
 

components/Preview/Preview.jsx → components/Playground/Preview/Preview.jsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef } from 'react'
 import highlightjs from 'highlight.js'
 import style from './preview.module.css'
 import { marked } from 'marked'
-import useThemes from '../../hooks/useThemes'
+import useThemes from '../../../hooks/useThemes'
 // import 'highlight.js/styles/github-dark.css'
 // import 'highlight.js/styles/atom-one-dark.css'
 // import 'highlight.js/styles/base16/onedark.css'

components/Preview/preview.module.css → components/Playground/Preview/preview.module.css

@@ -32,10 +32,12 @@
   color: var(--md-text-1);
   margin-top: 1.5rem;
   line-height: 1.25;
+  font-weight: 600;
 }
 
 .markdown h1, .markdown h2 {
   border-bottom: 1px solid var(--md-divider-light-1);
+  margin-bottom: 1rem;
 }
 
 .markdown h1 {
@@ -70,6 +72,25 @@
   color: var(--md-text-2);
 }
 
+/* Paragraph */
+
+.markdown p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+  color: var(--md-text-1);
+}
+
+/* Links */
+
+.markdown a {
+  color: var(--md-text-3);
+  text-decoration: none;
+}
+
+.markdown a:hover {
+  text-decoration: underline;
+}
+
 /* Lists */
 
 .markdown ul, .markdown ol {

components/Playground/explorer/Explorer.jsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import style from './explorer.module.css'
+const languages = { js: '.js', md: '.md' }
+const Explorer = () => {
+  const { js, md } = languages
+  return (
+    <section className={style.explorer}>
+      <header className={style.header}>
+        <h2>Explorer</h2>
+      </header>
+      <details open={true} className={style.filesmd}>
+        <summary>Markdown</summary>
+        <div className={style.file} title='markdown/readme.md' aria-selected={true} role='treeitem'>
+          <span className={style.file}>readme{md}</span>
+        </div>
+        <div className={style.file} aria-selected={true}>
+          <span className={style.file}>notes{md}</span>
+        </div>
+      </details>
+      <hr />
+      <details open={true} className={style.filesjs}>
+        <summary>JavaScript</summary>
+        <div className={style.file} aria-selected={true}>
+          <span className={style.file}>notes{js}</span>
+        </div>
+      </details>
+    </section>
+  )
+}
+
+export default Explorer

components/Playground/explorer/explorer.module.css

@@ -0,0 +1,101 @@
+.explorer {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  justify-content: flex-start;
+  border-right: 1px solid var(--md-divider-light-1);
+}
+
+.explorer hr {
+  margin: 0;
+  width: 100%;
+  height: 1px;
+  border: 0;
+  background-color: var(--md-divider-light-1);
+}
+
+.header {
+  height: 48px;
+  position: relative;
+  flex-shrink: 0;
+  display: flex;
+  flex-flow: row;
+  align-items: center;
+}
+
+.header h2 {
+  font-size: 0.7rem;
+  color: var(--md-text-2);
+  font-weight: 400;
+  text-transform: uppercase;
+  padding-left: 1rem;
+}
+
+.explorer details {
+  display: flex;
+  flex-direction: column;
+  user-select: none;
+  position: relative;
+}
+
+.explorer details summary {
+  padding: 0rem 0.5rem;
+  margin: 0;
+  line-height: 20px;
+  cursor: pointer;
+  text-transform: uppercase;
+  font-size: 0.7rem;
+  font-weight: 500;
+  height: 22px;
+  width: 100%;
+  position: relative;
+  border: 1px solid transparent;
+}
+
+.explorer details[open] {
+  height: 100%;
+  overflow-y: auto;
+}
+
+.explorer details[open] summary {
+  box-shadow: 0 0 1rem rgba(73, 73, 73, 0.1);
+}
+
+.explorer details summary:focus, .file:focus {
+  border: 1px solid var(--md-cursor);
+}
+
+.filesmd div:last-child, .filesjs div:last-child {
+  margin-bottom: 1rem;
+}
+
+.filesmd div, .filesjs div {
+  padding-left: 1.2rem;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+}
+
+.file:hover, .file:hover {
+  background-color: var(--md-bg-3);
+}
+
+.filesmd div::before, .filesjs div::before {
+  background-image: unset;
+  font-family: 'seti';
+  font-size: 110%;
+  margin-right: 0.375rem;
+}
+
+.filesmd div::before {
+  color: #519aba;
+  content: '\E04D';
+}
+
+.filesjs div::before {
+  color: #cbcb41;
+  content: '\E051';
+
+}

components/Playground/footer/Footer.jsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import style from './footer.module.css'
+
+const Footer = () => {
+  return (
+    <footer className={style.footer}>
+      <div>
+        <span
+          data-tooltip='Rundev Application © 2022'
+          title='Rundev Application'
+          className={style.tooltip}
+        >
+          Rundev
+        </span>
+      </div>
+      <div>
+        <span
+          data-tooltip='Indentation'
+          title='Indentation'
+          className={style.tooltip}
+        >
+          Spaces: 2
+        </span>
+        <span
+          data-tooltip='Encoding'
+          title='Encoding'
+          className={style.tooltip}
+        >
+          UTF-8
+        </span>
+        <span
+          data-tooltip='Line Sequence'
+          title='Line Sequence'
+          className={style.tooltip}
+        >
+          LF
+        </span>
+      </div>
+    </footer>
+  )
+}
+
+export default Footer

components/Playground/footer/footer.module.css

@@ -0,0 +1,30 @@
+.footer {
+  height: 22px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  background-color: var(--md-bg-preview);
+  border-top: 1px solid var(--md-divider-light-1);
+  font-size: 0.87rem;
+  color: var(--md-text-2);
+}
+
+.footer div {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+}
+
+.footer span {
+  padding: 0 0.68rem;
+  height: 100%;
+  white-space: nowrap;
+}
+
+.footer span:hover {
+  background-color: var(--md-bg-3);
+  cursor: default;
+}