diff --git a/playground/src/Playground.tsx b/playground/src/Playground.tsx index 7a04110..a3a55b6 100644 --- a/playground/src/Playground.tsx +++ b/playground/src/Playground.tsx @@ -2,6 +2,8 @@ import React, { FC, useState, useEffect } from "react"; import styled, { ThemeProvider, DefaultTheme } from "styled-components"; import { useId } from "@reach/auto-id"; +import "@reach/tabs/styles.css"; + import Editor from "./Editor"; import Result from "./Result"; import { ISnippet, IEditorTabs, IResultTabs } from "./types"; @@ -10,9 +12,9 @@ import media from "./utils/media"; import Draggable from "./Draggable"; const StyledDraggable = styled(Draggable)` - border: 0.1em solid ${props => props.theme.container.borderColor}; + border: 0.1em solid ${(props) => props.theme.container.borderColor}; display: flex; - min-height: ${props => props.theme.container.minHeight}; + min-height: ${(props) => props.theme.container.minHeight}; ${media.phone` flex-direction: column; @@ -42,10 +44,12 @@ const Playground: FC = ({ }) => { const [snippet, setSnippet] = useState(initialSnippet); const id = useId(userId) as string; - const [consolidatedTheme, setConsolidatedTheme] = useState(ourTheme); + const [consolidatedTheme, setConsolidatedTheme] = useState( + ourTheme + ); const onSnippetChange = (changed: string, type: IEditorTabs) => { - setSnippet(snippet => ({ + setSnippet((snippet) => ({ ...snippet, [type]: changed, })); @@ -59,7 +63,7 @@ const Playground: FC = ({
( + leftChild={(width) => ( = ({ onChange={onSnippetChange} /> )} - rightChild={width => ( + rightChild={(width) => (