refactoring css

6 files changed, 189 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..1353d95
--- /dev/null
+++ b/frontend/src/components/Inputs/Code.js
@@ -0,0 +1,35 @@
+import React, {useEffect, useRef} from "react";
+import * as indentation from "indent-textarea";
+import FloatingLabel from "../decorators/FloatingLabel";
+import CharLimit from "../decorators/CharLimit";
+import {RelPositioning} from "./shared";
+
+export const Code = ({content, ...props}) => {
+  const textInput = useRef(null);
+
+  useEffect(() => {
+    indentation.watch(textInput.current);
+  }, [textInput])
+
+  return (
+    <RelPositioning>
+      <FloatingLabel
+        label="content"
+        id={props.id}
+        value={content} />
+      <textarea
+        name="content"
+        readOnly={props.readOnly}
+        placeholder="Paste your text here"
+        value={content}
+        id={props.id}
+        ref={textInput}
+        required
+        onChange={props.onChange}
+        className="lt-shadow" />
+      <CharLimit
+        content={content}
+        maxLength={props.maxLength} />
+    </RelPositioning>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/components/Inputs/Dropdown.js b/frontend/src/components/Inputs/Dropdown.js
new file mode 100644
index 0000000..c467408
--- /dev/null
+++ b/frontend/src/components/Inputs/Dropdown.js
@@ -0,0 +1,84 @@
+import Dropdown from "react-dropdown";
+import FloatingLabel from "../decorators/FloatingLabel";
+import React from "react";
+import {LANGS, THEMES} from "../renderers/Code";
+import {FlexChild} from "./shared";
+
+const GenericDropdown = (props) => {
+  function _onSelect(option) {
+    props.onChange({
+      target: {
+        name: props.label,
+        value: option.label
+      }
+    });
+  }
+
+  return (
+    <FlexChild>
+      <Dropdown
+        options={props.options}
+        onChange={_onSelect}
+        value={props.value}
+        placeholder={props.placeholder}
+        id={props.id} />
+      <FloatingLabel
+        label={props.label}
+        id={props.id}
+        value={props.value} />
+    </FlexChild>
+  );
+}
+
+export const Expiry = (props) => {
+  const options = [
+    '5 years',
+    '1 year',
+    '1 month',
+    '1 week',
+    '1 day',
+    '1 hour',
+    '10 min',
+  ];
+
+  return (
+    <GenericDropdown
+      {...props}
+      options={options}
+      placeholder='1 week'
+      label='expiry'
+    />
+  );
+}
+
+export const Language = (props) => {
+  const options = Object.entries(LANGS).map((key, _) => ({
+    'value': key[1],
+    'label': key[0]
+  }))
+
+  return (
+    <GenericDropdown
+      {...props}
+      options={options}
+      placeholder={LANGS.auto}
+      label='language'
+    />
+  );
+}
+
+export const Theme = (props) => {
+  const options = Object.entries(THEMES).map((key) => ({
+    'value': key[1],
+    'label': key[0]
+  }))
+
+  return (
+    <GenericDropdown
+      {...props}
+      options={options}
+      placeholder={'atom'}
+      label='theme'
+    />
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/components/Inputs/Password.js b/frontend/src/components/Inputs/Password.js
new file mode 100644
index 0000000..7311832
--- /dev/null
+++ b/frontend/src/components/Inputs/Password.js
@@ -0,0 +1,14 @@
+import React from "react";
+import {Labelled} from "./shared";
+
+export const Password = (props) => <Labelled label="password">
+  <input
+    name="pass"
+    className="lt-shadow"
+    placeholder="password"
+    type="password"
+    autoComplete="off"
+    onChange={props.onChange}
+    value={props.value}
+    id={props.id} />
+</Labelled>
\ No newline at end of file
diff --git a/frontend/src/components/Inputs/Text.js b/frontend/src/components/Inputs/Text.js
new file mode 100644
index 0000000..866da91
--- /dev/null
+++ b/frontend/src/components/Inputs/Text.js
@@ -0,0 +1,25 @@
+import CharLimit from "../decorators/CharLimit";
+import React from "react";
+import {Labelled} from "./shared";
+
+export const Text = React.forwardRef(({label, id, readOnly, onChange, value, maxLength, autoFocus}, ref) => {
+  return (
+    <Labelled label={label} value={value}>
+      <input
+        ref={ref}
+        name={label}
+        readOnly={readOnly}
+        className="lt-shadow"
+        placeholder="Title"
+        id={id}
+        type="text"
+        autoFocus={autoFocus}
+        autoComplete="off"
+        onChange={onChange}
+        value={value} />
+      <CharLimit
+        content={value}
+        maxLength={maxLength} />
+    </Labelled>
+  );
+})
\ No newline at end of file
diff --git a/frontend/src/components/Inputs/index.js b/frontend/src/components/Inputs/index.js
new file mode 100644
index 0000000..b16deb3
--- /dev/null
+++ b/frontend/src/components/Inputs/index.js
@@ -0,0 +1,6 @@
+import {Code} from './Code';
+import {Expiry, Language, Theme} from "./Dropdown";
+import {Password} from "./Password";
+import {Text} from "./Text";
+
+export {Code, Expiry, Language, Theme, Password, Text};
\ No newline at end of file
diff --git a/frontend/src/components/Inputs/shared.js b/frontend/src/components/Inputs/shared.js
new file mode 100644
index 0000000..18ba164
--- /dev/null
+++ b/frontend/src/components/Inputs/shared.js
@@ -0,0 +1,25 @@
+import styled from "styled-components";
+import React from "react";
+import FloatingLabel from "../decorators/FloatingLabel";
+
+export const RelPositioning = styled.div`
+    position: relative; 
+    height: calc(100% - 4em);
+`
+
+export const FlexChild = styled.div`
+    display: block;
+    margin-left: 2em;
+`
+
+export const Labelled = ({label, value, children}) => {
+  console.log(children)
+  return (<FlexChild>
+    <RelPositioning>
+      <FloatingLabel label={label} value={value} >
+        <span>{label}</span>
+        {children}
+      </FloatingLabel>
+    </RelPositioning>
+  </FlexChild>)
+}
\ No newline at end of file