docs: refine live playground editor chrome (#97)

* docs: refine live code editor chrome

* docs: compose live playground with Nova UI components

* docs: polish live editor toolbar styles

Author: wyf027

docs/.vitepress/theme/components/LiveCodeEditor.tsx

@@ -1,6 +1,7 @@
 import React, { useContext, useEffect, useRef } from 'react'
 
 import { LiveContext, LiveEditor } from 'react-live'
+import { Flex, Tag, Text } from '@wuyangfan/nova-ui'
 
 function lineCount(code: string) {
   if (!code) {
@@ -37,6 +38,7 @@ export function LiveCodeEditor() {
 
   const { code, language } = ctx
   const lines = Math.max(lineCount(code), 1)
+  const badge = languageBadge(language)
 
   const mainRef = useRef<HTMLDivElement>(null)
   const gutterRef = useRef<HTMLDivElement>(null)
@@ -76,22 +78,25 @@ export function LiveCodeEditor() {
   }, [code])
 
   return (
-    <div className="live-code-editor">
-      <div className="live-code-editor-toolbar">
-        <span className="live-code-editor-lang">{languageBadge(language)}</span>
-      </div>
-      <div className="live-code-editor-main" ref={mainRef}>
-        <div className="live-code-editor-gutter" ref={gutterRef} aria-hidden="true">
+    <Flex vertical className="live-code-editor">
+      <Flex className="live-code-editor-toolbar" align="center" justify="between">
+        <Text className="live-code-editor-title">Code</Text>
+        <Tag className="live-code-editor-lang" aria-label={`${badge} example code`}>
+          {badge}
+        </Tag>
+      </Flex>
+      <Flex className="live-code-editor-main" ref={mainRef}>
+        <Flex vertical className="live-code-editor-gutter" ref={gutterRef} aria-hidden="true">
           {Array.from({ length: lines }, (_, index) => (
-            <div key={index} className="live-code-editor-gutter-line">
+            <Text key={index} className="live-code-editor-gutter-line">
               {index + 1}
-            </div>
+            </Text>
           ))}
-        </div>
-        <div className="live-code-editor-editor">
+        </Flex>
+        <Flex vertical className="live-code-editor-editor">
           <LiveEditor className="live-code-editor-live" />
-        </div>
-      </div>
-    </div>
+        </Flex>
+      </Flex>
+    </Flex>
   )
-}
+}

docs/.vitepress/theme/components/LivePlayground.tsx

@@ -80,8 +80,8 @@ const ReactLiveMount = defineComponent({
 
       root.render(
         React.createElement(
-          'div',
-          { className: 'live-wrap' },
+          NovaUI.Flex,
+          { className: 'live-wrap', vertical: true },
           React.createElement(
             LiveProvider,
             {
@@ -90,8 +90,8 @@ const ReactLiveMount = defineComponent({
               language: prismLanguage,
               enableTypeScript: resolveEnableTypeScript(props.language),
             },
-            React.createElement('div', { className: 'live-pane live-preview' }, React.createElement(LivePreview, null)),
-            React.createElement('div', { className: 'live-pane live-editor' }, React.createElement(LiveCodeEditor, null)),
+            React.createElement(NovaUI.Flex, { className: 'live-pane live-preview' }, React.createElement(LivePreview, null)),
+            React.createElement(NovaUI.Flex, { className: 'live-pane live-editor', vertical: true }, React.createElement(LiveCodeEditor, null)),
             React.createElement(LiveError, { className: 'live-error' }),
           ),
         ),
@@ -114,4 +114,4 @@ const ReactLiveMount = defineComponent({
   },
 })
 
-export default ReactLiveMount
+export default ReactLiveMount

docs/.vitepress/theme/custom.css

@@ -52,22 +52,28 @@
 }
 
 .live-code-editor-toolbar {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  padding: 6px 10px;
+  justify-content: space-between;
+  padding: 8px 12px;
   border-bottom: 1px solid var(--vp-c-divider);
-  background: var(--vp-code-block-bg, var(--vp-code-bg, var(--vp-c-bg-alt)));
+  background: color-mix(in srgb, var(--vp-c-bg-soft) 80%, transparent);
+}
+
+.live-code-editor-title {
+  color: var(--vp-c-text-2) !important;
+  font-size: 12px !important;
+  font-weight: 600;
+  letter-spacing: 0.02em;
 }
 
 .live-code-editor-lang {
-  font-size: 11px;
+  border-color: var(--vp-c-divider) !important;
+  background: var(--vp-c-bg) !important;
+  color: var(--vp-c-text-2) !important;
+  font-size: 11px !important;
   font-weight: 600;
   letter-spacing: 0.06em;
-  color: var(--vp-c-text-3);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 6px;
-  padding: 2px 8px;
+  border-radius: 999px !important;
+  padding: 2px 8px !important;
 }
 
 .live-code-editor-main {
@@ -95,8 +101,13 @@
 }
 
 .live-code-editor-gutter-line {
-  font-size: 13px;
-  line-height: 1.55;
+  display: block;
+  color: var(--vp-c-text-3) !important;
+  font-family:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+    monospace !important;
+  font-size: 13px !important;
+  line-height: 1.55 !important;
   min-height: calc(13px * 1.55);
 }
 
@@ -175,4 +186,4 @@
   white-space: normal;
   line-height: 1.6;
   color: var(--vp-c-text-2);
-}
+}