Merge pull request #40 from agneym/38-interactive-result

Keep result side of things interactive
agneym · Oct 13, 2021 · 886c3a7 · 886c3a7
2 parents b3c8c55 + 4b31a89
commit 886c3a7
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 16 deletions.
diff --git a/example/src/index.js b/example/src/index.js
@@ -13,7 +13,11 @@ import htm from 'htm';
 
 const html = htm.bind(h);
 
-const app = html\`<div>Hello World from Playground!</div>\`
+const app = html\`
+ <div>
+ <p>Hello World from Playground!</p>
+ <input type="text" />
+ </div>\`
 
 render(app, document.getElementById('app'));
  `,

diff --git a/playground/src/Draggable/index.tsx b/playground/src/Draggable/index.tsx
@@ -9,10 +9,17 @@ const Container = styled("div", forwardRef)`
  align-items: stretch;
 `;
 
+const DividerContainer = styled("div", forwardRef)`
+ width: ${(props) => props.theme.divider.containerWidth}px;
+ background-color: ${(props) => props.theme.divider.dividerBackground};
+`;
+
 const Divider = styled("div", forwardRef)`
  width: ${(props) => props.theme.divider.width}px;
  cursor: col-resize;
  background-color: ${(props) => props.theme.divider.background};
+ margin: 0 auto;
+ height: 100%;
 `;
 
 interface IProps {
@@ -35,7 +42,9 @@ const Draggable: FC<IProps> = ({ className = "", leftChild, rightChild }) => {
  return (
  <Container className={className} ref={containerRef}>
  {leftChild(leftWidth)}
- <Divider ref={dividerRef} />
+ <DividerContainer>
+ <Divider ref={dividerRef} />
+ </DividerContainer>
  {rightChild(rightWidth)}
  </Container>
  );

diff --git a/playground/src/Result/Frame.tsx b/playground/src/Result/Frame.tsx
@@ -1,24 +1,13 @@
 import React, { FC, useMemo, useState, memo, useEffect } from "react";
-import {styled} from "goober";
+import { styled } from "goober";
 
 import { ISnippet } from "../types";
 import constructSnippet from "../utils/constructSnippet";
 import ErrorDisplay from "./ErrorDisplay";
 
-const Container = styled('div')`
+const Container = styled("div")`
  position: relative;
  height: 100%;
-
- &::after {
- content: "";
- display: inline-block;
- position: absolute;
- width: 100%;
- height: 100%;
- z-index: 1;
- top: 0;
- left: 0;
- }
 `;
 
 interface IProps {

diff --git a/playground/src/utils/theme.ts b/playground/src/utils/theme.ts
@@ -13,6 +13,7 @@ const lightModeColors = {
  },
  divider: {
  background: "#202020",
+ dividerBackground: "#202020",
  },
  editor: {
  backgroundColor: `#000000`,
@@ -40,6 +41,7 @@ const darkModeColors = {
  },
  divider: {
  background: "rgba(255, 255, 255, 0.5)",
+ dividerBackground: "rgba(255, 255, 255, 0.1)",
  },
  editor: {
  backgroundColor: `#000000`,
@@ -72,8 +74,10 @@ export const theme = {
  background: "rgba(0, 0, 0, 1)",
  },
  divider: {
- width: 2,
+ width: 4,
  background: "",
+ dividerBackground: "",
+ containerWidth: 8,
  },
  editor: {
  fontFamily: `Consolas, Menlo, Monaco, source-code-pro, Courier New, monospace`,