Merge pull request #70 from jackyzha0/visual-overhaul

1 files changed, 54 insertions, 0 deletions

diff --git a/frontend/src/components/Inputs/Code.js b/frontend/src/components/Inputs/Code.js
new file mode 100644
index 0000000..adb1536
--- /dev/null
+++ b/frontend/src/components/Inputs/Code.js
@@ -0,0 +1,54 @@
+import React from "react";
+import styled from 'styled-components'
+import CharLimit from "../decorators/CharLimit";
+import Editor from 'react-simple-code-editor';
+import {Highlighter} from "../renderers/Code";
+import {CodeLike, Hover} from "../Common/mixins";
+
+const Wrapper = styled.div`
+  position: relative;
+`
+const EditorWrapper = styled(Editor)`
+  overflow: visible !important;
+  
+  & > * {
+    padding: 0 !important;
+    width: 100%;
+  }
+  
+  & pre, & code, & > textarea {
+    ${CodeLike}
+    min-height: 40vh;
+  }
+  
+  & pre {
+    z-index: -1 !important;
+  }
+  
+  & > textarea {
+    ${Hover}
+    padding: 0.6em !important;
+    outline: none !important;
+  }
+`
+
+export const Code = ({content, id, readOnly, setContentCallback, ...props}) => {
+  return (
+    <Wrapper>
+      <EditorWrapper
+        name="content"
+        readOnly={readOnly}
+        placeholder="Paste your text here"
+        value={content}
+        id={id}
+        required
+        highlight={code => <Highlighter theme="atom">{code}</Highlighter> }
+        onValueChange={code => setContentCallback(code)}
+        padding={15}
+      />
+      <CharLimit
+        content={content}
+        maxLength={props.maxLength} />
+    </Wrapper>
+  );
+}
\ No newline at end of file