Left Content
- Right Content
+ html: `
+
`,
- css: `.splitDiv {
- width: 100%;
- height: 400px;
- padding: 30px;
+ css: `.split-div{
display: flex;
- justify-content: center;
+ flex-direction: row;
align-items: center;
-
- .splitDiv > div {
- width: 50%;
- }
-}`
+ justify-content: space-between;
+}
+
+.split-div > .div{
+ width: 47%;
+}`,
},
triDiv: {
- html: `Div
+ Div
-
`,
- css: `.triDiv {
- width: 100%;
- height: 400px;
- padding: 30px;
+ html: `Left Content
- Center Content
- Right Content
-
+
`,
+ css: `.tri-div{
display: flex;
- justify-content: center;
+ flex-direction: row;
align-items: center;
-
- .triDiv > div {
- width: 30%;
- }
-}`
+ justify-content: space-between;
+ }
+
+.tri-div > .div{
+ width: 29%;
+}`,
},
image: {
- html: `Div
+ Div
+ Div
+
+ 
+
`,
+ css: `.image{
+ height: auto !important;
+ padding: 10px 0;
+}
+
+.image > img{
+ height: 200px;
+}`,
},
cta: {
- html: `
+
-
HTML
-
Heading Text
-Description Text
- + html: `
+
`,
+ css: `.text{
+ flex-direction: column;
+ height: auto;
+}
+
+.text > p{
+ margin-top: 0;
+ max-width: 500px;
+}
+
+button{
+ margin: 10px 0 30px 0;
+}`,
+ },
+ imageText: {
+ html: `Title
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis gravida dui, sed convallis nunc commodo vel. Nulla in orci ligula. Vivamus eu aliquet magna. +
+ +
+
+
`,
+ css: `.image{
+ height: auto !important;
+ padding: 10px 0;
+}
+
+.image > img{
+ height: 200px;
+}`,
+ },
+ navContent: {
+ html: ``,
- css: `.cta {
- width: 100%;
- height: 400px;
- padding: 30px;
+ css: `.nav {
+ background-color: white;
+ height: 100px;
display: flex;
- flex-direction: row;
align-items: center;
justify-content: center;
+}
- .cta > h1{
- font-size: 20px;
- padding: 20px;
- }
-
- .cta > p{
- font-size: 15px;
- padding: 20px;
- margin: 10px;
- }
-}`
- },
- imageText: {
- html: `
+
+
+
+ Title
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis gravida dui, sed convallis nunc commodo vel. Nulla in orci ligula. Vivamus eu aliquet magna. +
+
-
`,
- css: `.imageText {
- width: 100%;
- height: 400px;
- padding: 30px;
+.nav > ul {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: row;
+ padding: 0;
+ margin: 0;
+}
+
+ul > .left,
+ul > .right {
+ width: 50%;
+ height: 100%;
display: flex;
- justify-content: space-evently;
+ justify-content: center;
align-items: center;
+}
+
+ul > .left {
+ justify-content: flex-start;
+}
- .imageText > .flexLeft{
- width: 50%;
- background-image: url(URLHERE);
- height: 100%;
- }
+ul > .right {
+ justify-content: flex-end;
+}
- .imageText > .flexRight{
- width: 50%;
- }
-}`
+li {
+ list-style-type: none;
+ margin: 0 20px;
+}
+
+.logo {
+ font-size: 30px;
+}`,
},
- navContent: {
- html: 'code',
- css: `.navContent {
- width: 100%;
- height: 200px;
- padding: 30px;
+ footerContent: {
+ html: ``,
+ css: `.nav > ul {
+ width: 100%;
+ height: 100%;
display: flex;
- justify-content: space-between;
+ flex-direction: row;
+ padding: 0;
+ margin: 0;
+}
+
+ul > .left,
+ul > .right {
+ width: 50%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
align-items: center;
+}
- .navContent > .logo {
- width: 50px;
- height: 50px;
- }
-
- .navContent > .link {
- width: 20%;
- height: 50px;
+ul > .left {
+ justify-content: flex-start;
+}
- }
-}`
+ul > .right {
+ justify-content: flex-end;
+}
+
+li {
+ list-style-type: none;
+ margin: 0 20px;
+}
+
+.logo {
+ font-size: 30px;
+}
+
+.footer > ul {
+ flex-direction: column;
+}
+
+.footer > ul > .right{
+ justify-content: flex-start;
+}`,
},
- footerContent: {
- html: 'code',
- css: `.footerContent {
- width: 100%;
- height: 200px;
- padding: 30px;
-}`
- }
};
export default typeData;
diff --git a/src/views/Builder/index.js b/src/views/Builder/index.js
index bbf6947..040b61d 100644
--- a/src/views/Builder/index.js
+++ b/src/views/Builder/index.js
@@ -13,17 +13,23 @@ import {
SettingType,
SettingVal,
SettingInput,
- SettingTextArea
+ SettingTextArea,
+ Export,
} from './styles';
import { FlexLeft, FlexRight } from '../../Components/FlexSplit/FlexSplit';
import { Button, Paragraph } from '../../Styling';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import SyntaxHighlighter from 'react-syntax-highlighter';
+import { tomorrow } from 'react-syntax-highlighter/dist/esm/styles/hljs';
class Builder extends React.Component {
constructor(props) {
super(props);
const items = JSON.parse(localStorage.getItem('items')); // gets item listing from local storage
this.state = {
- code: { items }
+ code: { items },
+ value: 'hi',
+ copied: false,
};
this.titleInput = React.createRef();
@@ -38,7 +44,7 @@ class Builder extends React.Component {
this.settingsModal.current.toggleModal(true);
};
- handleSettingsChange = event => {
+ handleSettingsChange = (event) => {
const { settings } = { ...this.state };
const currentState = settings;
@@ -53,6 +59,7 @@ class Builder extends React.Component {
this.codeModal.current.toggleModal(true);
const items = JSON.parse(localStorage.getItem('items')); // gets item listing from local storage
this.setState({ code: { items } });
+ this.setState({ value: { items } });
};
handleCodeChange = () => {
@@ -61,7 +68,7 @@ class Builder extends React.Component {
this.setState({ settings: currentState });
};
- handleInput = e => {
+ handleInput = (e) => {
const { dispatch } = this.props;
const { name, value } = e.target;
e.persist();
@@ -69,7 +76,7 @@ class Builder extends React.Component {
dispatch(changePreference(name, value));
};
- addBuilderElem = elem => {
+ addBuilderElem = (elem) => {
if (this.editor.current) {
this.editor.current.addNewElem(elem);
}
@@ -152,74 +159,98 @@ class Builder extends React.Component {
Image
-
-
- Insert Text
-
-
- {`
-
-
- ${preferences.projectTitle}
-
-
-
-
-`}{' '}
- {code.items &&
- code.items.map(
- ({ uniqueID, type }, index) => {
- return (
-
-
- {
- typeData[
- type
- ].html
- }
-
-
- );
- }
- )}
- {`
-
-
-