Last active
August 16, 2019 20:59
-
-
Save e-schultz/d7fd2638ca4c8dc987640f4288cf8ba6 to your computer and use it in GitHub Desktop.
the joy
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| let divJoyExport = { | |
| data: [ | |
| { | |
| type: "instance", | |
| subtype: "app-instance", | |
| componentId: "app", | |
| id: 4010090 | |
| } | |
| ], | |
| components: [ | |
| { | |
| id: "app", | |
| type: "component", | |
| subtype: "app-component", | |
| globalStyle: | |
| '// COLORS\n$primary: #00d1b2;\n$info: #209CEE;\n$success: #23D160;\n$warning: #FFDD57;\n$danger: #FF3860;\n$light: #F5F5F5;\n$dark: #363636;\n\n// TEXT\n$text: #4A4A4A;\n$link: #3273DC;\n$body-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;\n$title-family: false;\n$button-family: false;\n\n// BREAKPOINTS\n$gap: 32px;\n$tablet: 769px;\n$desktop: 960px + (2*$gap);\n$widescreen: 1152px + (2*$gap);\n$fullhd: 1344px + (2*$gap);\n$widescreen-enabled: true;\n$fullhd-enabled: false;\n\n// LAYOUT\n$section-padding: 3rem 1.5rem;\n$section-padding-medium: 6rem 1.5rem;\n$section-padding-large: 9rem 1.5rem;\n\n// SEE DOCS FOR MORE: \n// https://bit.ly/30UvE5O\n\n// IMPORT BULMA\n@import "~bulma/bulma.sass";', | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 9215568, | |
| attributes: | |
| "{\n // primary, link, info, success, warning, \n // danger, white, light, dark, black\n color: \"white\",\n // add extra padding\n spaced: true,\n // logo image url\n logo: 'https://uploads.divjoy.com/logo.svg'\n}", | |
| id: 2069132 | |
| }, | |
| { | |
| type: "instance", | |
| subtype: "page-instance", | |
| componentId: 1513260, | |
| id: 5876810 | |
| }, | |
| { | |
| type: "instance", | |
| subtype: "page-instance", | |
| componentId: 3773675, | |
| id: 8317181 | |
| }, | |
| { | |
| type: "instance", | |
| subtype: "page-instance", | |
| componentId: 327204, | |
| id: 2126949 | |
| }, | |
| { | |
| type: "instance", | |
| subtype: "page-instance", | |
| componentId: 9988735, | |
| id: 2201384 | |
| }, | |
| { | |
| type: "instance", | |
| subtype: "page-instance", | |
| componentId: 8532180, | |
| id: 6844142 | |
| }, | |
| { | |
| type: "instance", | |
| subtype: "page-instance", | |
| componentId: 9447965, | |
| id: 9711986 | |
| }, | |
| { | |
| type: "instance", | |
| subtype: "page-instance", | |
| componentId: 4045617, | |
| id: 5820999 | |
| }, | |
| { | |
| type: "instance", | |
| subtype: "page-instance", | |
| componentId: 4305746, | |
| id: 5610030 | |
| }, | |
| { | |
| type: "instance", | |
| subtype: "page-instance", | |
| componentId: 5642556, | |
| id: 6664312 | |
| }, | |
| { | |
| type: "instance", | |
| subtype: "page-instance", | |
| componentId: 83283, | |
| id: 3098743 | |
| }, | |
| { | |
| type: "instance", | |
| componentId: 203216, | |
| attributes: | |
| "{\n // primary, link, info, success, warning, \n // danger, white, light, dark, black\n color: \"light\",\n // normal, medium, large\n size: \"normal\",\n // logo image url\n logo: 'https://uploads.divjoy.com/logo.svg',\n copyright: '© 2019 Company'\n}", | |
| id: 9281365 | |
| } | |
| ] | |
| }, | |
| { | |
| type: "component", | |
| name: "Navbar", | |
| id: 9215568, | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 3871614, | |
| attributes: "{\n\tspaced: props.spaced,\n color: props.color\n}", | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["container"], | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["navbar-brand"], | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["navbar-item"], | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "a", | |
| attributes: "{\n href: '/' \n}", | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "img", | |
| attributes: | |
| '{\n src: props.logo,\n alt: "Logo"\n}', | |
| classNames: ["image"], | |
| id: 6799068 | |
| } | |
| ], | |
| id: 2503295 | |
| } | |
| ], | |
| id: 1945490 | |
| }, | |
| { | |
| type: "element", | |
| tagName: "div", | |
| children: [ | |
| { type: "element", tagName: "span", id: 4597590 }, | |
| { type: "element", tagName: "span", id: 3843238 }, | |
| { type: "element", tagName: "span", id: 5574078 } | |
| ], | |
| classNames: ["navbar-burger", "burger"], | |
| attributes: | |
| "{\n onClick: () => setMenuOpen(!menuOpen)\n}", | |
| classNameExpressions: [ | |
| { js: "menuOpen", classNames: ["is-active"] } | |
| ], | |
| id: 3211285 | |
| } | |
| ], | |
| id: 1224919 | |
| }, | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["navbar-menu"], | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["navbar-end"], | |
| children: [ | |
| { | |
| type: "if", | |
| js: "auth.user", | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: [ | |
| "navbar-item", | |
| "has-dropdown", | |
| "is-hoverable" | |
| ], | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "a", | |
| attributes: "{\n href: '/' \n}", | |
| children: [ | |
| { | |
| type: "text", | |
| text: "Account", | |
| id: 6169912 | |
| } | |
| ], | |
| classNames: ["navbar-link"], | |
| id: 9738087 | |
| }, | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["navbar-dropdown", "is-boxed"], | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "a", | |
| attributes: "{\n href: '/dashboard'\n}", | |
| children: [ | |
| { | |
| type: "text", | |
| text: "Dashboard", | |
| id: 5098892 | |
| } | |
| ], | |
| classNames: ["navbar-item"], | |
| id: 2586971 | |
| }, | |
| { | |
| type: "element", | |
| tagName: "a", | |
| attributes: | |
| '{\n href: "/signout",\n onClick: (e) => {\n e.preventDefault();\n auth.signout();\n }\n}', | |
| children: [ | |
| { | |
| type: "text", | |
| text: "Sign out", | |
| id: 5949729 | |
| } | |
| ], | |
| classNames: ["navbar-item"], | |
| id: 8221397 | |
| } | |
| ], | |
| id: 3892263 | |
| } | |
| ], | |
| id: 2746102 | |
| } | |
| ], | |
| id: 3173739 | |
| }, | |
| { | |
| type: "if", | |
| js: "!auth.user", | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "a", | |
| attributes: "{\n href: '/signin'\n}", | |
| children: [ | |
| { type: "text", text: "Sign in", id: 7986864 } | |
| ], | |
| classNames: ["navbar-item"], | |
| id: 5577253 | |
| } | |
| ], | |
| id: 6673849 | |
| } | |
| ], | |
| id: 916218 | |
| } | |
| ], | |
| classNameExpressions: [ | |
| { js: "menuOpen", classNames: ["is-active"] } | |
| ], | |
| id: 753773 | |
| } | |
| ], | |
| id: 9875662 | |
| } | |
| ], | |
| id: 1027311 | |
| } | |
| ], | |
| code: | |
| "\tconst auth = useAuth(); \n\tconst [menuOpen, setMenuOpen] = useState(false);\n \n ", | |
| tags: ["Navigation"] | |
| }, | |
| { | |
| type: "component", | |
| name: "Navbar Container", | |
| id: 3871614, | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "nav", | |
| classNames: ["navbar"], | |
| children: [{ type: "children", id: 3170614 }], | |
| classNameExpressions: [ | |
| { js: "props.color", classNames: ["is-{props.color}"] }, | |
| { js: "props.spaced", classNames: ["is-spaced"] } | |
| ], | |
| id: 6664260 | |
| } | |
| ] | |
| }, | |
| { | |
| type: "component", | |
| name: "Section", | |
| id: 1079246, | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "section", | |
| classNames: ["hero", "section", "is-block", "is-relative"], | |
| classNameExpressions: [ | |
| { js: "color", classNames: ["is-{color}"] }, | |
| { js: "size", classNames: ["is-{size}"] } | |
| ], | |
| children: [ | |
| { | |
| type: "if", | |
| js: "backgroundImage", | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 1986700, | |
| attributes: | |
| "{\n\timage: backgroundImage,\n opacity: backgroundImageOpacity\n}", | |
| id: 6976618 | |
| } | |
| ], | |
| id: 4689902 | |
| }, | |
| { type: "children", id: 6313629 } | |
| ], | |
| attributes: "{\n\t...otherProps\n}", | |
| style: | |
| "// Add light border if two white\n// sections next to each other.\n.is-white + &.is-white {\n border-top: 1px solid #F0F0F0;\n}", | |
| id: 7573224 | |
| } | |
| ], | |
| code: | |
| "\tconst {\n color, \n size, \n backgroundImage,\n backgroundImageOpacity,\n children,\n // Passed to section element\n ...otherProps \n } = props;\n" | |
| }, | |
| { | |
| type: "component", | |
| name: "Hero Section", | |
| id: 7454246, | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 1079246, | |
| attributes: "{\n\tcolor: props.color,\n size: props.size\n}", | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["container"], | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["columns", "is-vcentered", "is-desktop"], | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: [ | |
| "column", | |
| "is-5-desktop", | |
| "has-text-centered-touch" | |
| ], | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 5415335, | |
| attributes: | |
| "{\n\ttitle: props.title,\n subtitle: props.subtitle,\n // value from 1-6\n size: 1\n}", | |
| id: 2326079 | |
| }, | |
| { | |
| type: "instance", | |
| componentId: 8669042, | |
| attributes: | |
| '{\n\tparentColor: props.color,\n // small, normal, medium, large\n size: "medium",\n onClick: props.buttonOnClick\n}', | |
| children: [ | |
| { | |
| type: "text", | |
| text: "{props.buttonText}", | |
| id: 3887774 | |
| } | |
| ], | |
| id: 9572835 | |
| } | |
| ], | |
| id: 6733235 | |
| }, | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["column", "is-1"], | |
| name: "Spacer", | |
| id: 8571842 | |
| }, | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["column"], | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "figure", | |
| classNames: ["image"], | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "img", | |
| attributes: | |
| '{\n src: props.image,\n alt: "Illustration"\n}', | |
| id: 9314021 | |
| } | |
| ], | |
| style: "margin: 0 auto;\nmax-width: 570px;", | |
| id: 6832296 | |
| } | |
| ], | |
| id: 6527102 | |
| } | |
| ], | |
| id: 3243841 | |
| } | |
| ], | |
| id: 580002 | |
| } | |
| ], | |
| id: 8181092 | |
| } | |
| ], | |
| tags: ["Popular", "Hero"] | |
| }, | |
| { | |
| type: "component", | |
| name: "Section Button", | |
| id: 8669042, | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "button", | |
| classNames: ["button"], | |
| children: [{ type: "children", id: 776571 }], | |
| attributes: "{\n ...otherProps\n}", | |
| classNameExpressions: [ | |
| { | |
| js: | |
| "['primary', 'info', 'success', 'warning', 'danger', 'black', 'dark'].includes(parentColor)", | |
| classNames: ["is-{parentColor}", "is-inverted"] | |
| }, | |
| { | |
| js: " ['white', 'light'].includes(parentColor) || !parentColor", | |
| classNames: ["is-primary"] | |
| }, | |
| { js: "size", classNames: ["is-{size}"] }, | |
| { js: "state", classNames: ["is-{state}"] }, | |
| { js: "fullWidth", classNames: ["is-fullwidth"] } | |
| ], | |
| id: 7815642 | |
| } | |
| ], | |
| description: | |
| "A button whose color is determined by the background color of its parent component (passed in via `parentColor` prop).", | |
| code: | |
| "\tconst {\n parentColor, \n size, \n state, \n fullWidth,\n // Passed to button element\n ...otherProps\n } = props;\n" | |
| }, | |
| { | |
| type: "component", | |
| name: "Section Header", | |
| id: 5415335, | |
| children: [ | |
| { | |
| type: "if", | |
| js: "props.title || props.subtitle", | |
| id: 8933982, | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "header", | |
| children: [ | |
| { | |
| type: "if", | |
| js: "props.title", | |
| id: 3832557, | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "h1", | |
| classNames: [ | |
| "title", | |
| "is-spaced", | |
| "has-text-weight-bold" | |
| ], | |
| children: [ | |
| { type: "text", text: "{props.title}", id: 3346646 } | |
| ], | |
| classNameExpressions: [ | |
| { js: "props.size", classNames: ["is-{props.size}"] }, | |
| { | |
| js: "props.size === 1", | |
| classNames: ["is-size-2-mobile"] | |
| } | |
| ], | |
| id: 5428871 | |
| } | |
| ] | |
| }, | |
| { | |
| type: "if", | |
| js: "props.subtitle", | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "p", | |
| classNames: ["subtitle"], | |
| children: [ | |
| { type: "text", text: "{props.subtitle}", id: 4050505 } | |
| ], | |
| id: 2045497, | |
| classNameExpressions: [ | |
| { js: "props.size > 4", classNames: ["is-6"] } | |
| ] | |
| } | |
| ], | |
| id: 4428299 | |
| } | |
| ], | |
| classNameExpressions: [ | |
| { js: "props.centered", classNames: ["is-centered"] } | |
| ], | |
| style: | |
| "margin-bottom: 3rem;\n\n// Remove margin if nothing after header\n&:last-child{\n margin-bottom: 0;\n}\n\n// Added if props.centered is true\n&.is-centered {\n text-align: center;\n}\n\n.subtitle {\n\tmax-width: 700px;\n // So we can have max-width but still\n // have alignment controlled by text-align.\n display: inline-block;\n}", | |
| id: 4841502, | |
| name: "Header" | |
| } | |
| ] | |
| } | |
| ] | |
| }, | |
| { | |
| type: "component", | |
| name: "Background Image", | |
| id: 1986700, | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| attributes: | |
| "{\n style: {\n '--image': `url(${props.image})`,\n '--opacity': props.opacity\n }\n}", | |
| style: | |
| 'content: "";\nbackground-image: var(--image);\nbackground-position: center center;\nbackground-size: cover;\nopacity: var(--opacity);\ntop: 0;\nleft: 0;\nbottom: 0;\nright: 0;\nposition: absolute;\nz-index: 0;', | |
| id: 4730303 | |
| } | |
| ] | |
| }, | |
| { | |
| type: "component", | |
| name: "Clients Section", | |
| id: 4279952, | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 1079246, | |
| attributes: "{\n\tcolor: props.color,\n size: props.size\n}", | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["container"], | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 5415335, | |
| attributes: | |
| "{\n\ttitle: props.title,\n subtitle: props.subtitle,\n centered: true,\n // value from 1-6\n size: 3\n}", | |
| id: 8194712 | |
| }, | |
| { | |
| type: "instance", | |
| componentId: 7285372, | |
| attributes: | |
| '{\n items: [\n {\n name: \'Instagram\',\n image: "https://uploads.divjoy.com/logo-instagram.svg",\n width: "150px",\n },\n {\n name: \'Slack\',\n image: "https://uploads.divjoy.com/logo-slack.svg",\n width: "135px"\n },\n {\n name: \'Tinder\',\n image: "https://uploads.divjoy.com/logo-tinder.svg",\n width: "90px"\n },\n {\n name: \'Spotify\',\n image: "https://uploads.divjoy.com/logo-spotify.svg",\n width: "135px"\n }\n ]\n}', | |
| id: 8708010 | |
| } | |
| ], | |
| id: 2018945 | |
| } | |
| ], | |
| id: 1636201 | |
| } | |
| ], | |
| tags: ["Clients"] | |
| }, | |
| { | |
| type: "component", | |
| name: "Clients", | |
| id: 7285372, | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["columns", "is-centered", "is-multiline"], | |
| children: [ | |
| { | |
| type: "foreach", | |
| valName: "item", | |
| indexName: "index", | |
| objectName: "props.items", | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["column", "is-narrow", "has-text-centered"], | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| style: | |
| "margin: 0 12px;\nimg {\n // Removes extra space under image\n vertical-align: bottom;\n}", | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "img", | |
| attributes: | |
| "{\n src: item.image,\n width: item.width,\n alt: item.name\n}", | |
| id: 6426386 | |
| } | |
| ], | |
| name: "Logo", | |
| id: 4646506 | |
| } | |
| ], | |
| attributes: "{\n key: index\n}", | |
| id: 6330706 | |
| } | |
| ], | |
| id: 2176993 | |
| } | |
| ], | |
| id: 2434375 | |
| } | |
| ] | |
| }, | |
| { | |
| type: "component", | |
| name: "Features Section", | |
| id: 1166901, | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 1079246, | |
| attributes: "{\n\tcolor: props.color,\n size: props.size\n}", | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["container"], | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 5415335, | |
| attributes: | |
| "{\n\ttitle: props.title,\n subtitle: props.subtitle,\n centered: true,\n // value from 1-6\n size: 3\n}", | |
| id: 5566068 | |
| }, | |
| { | |
| type: "instance", | |
| componentId: 8535752, | |
| attributes: | |
| '{\n items: [\n {\n title: "Explore",\n description: "Integer ornare neque mauris, ac vulputate lacus venenatis et. Pellentesque ut ultrices purus.",\n image: "https://uploads.divjoy.com/undraw-mind_map_cwng.svg"\n },\n {\n title: "Explore",\n description: "Integer ornare neque mauris, ac vulputate lacus venenatis et. Pellentesque ut ultrices purus.",\n image: "https://uploads.divjoy.com/undraw-personal_settings_kihd.svg"\n },\n {\n title: "Explore",\n description: "Integer ornare neque mauris, ac vulputate lacus venenatis et. Pellentesque ut ultrices purus.",\n image: "https://uploads.divjoy.com/undraw-having_fun_iais.svg"\n },\n {\n title: "Explore",\n description: "Integer ornare neque mauris, ac vulputate lacus venenatis et. Pellentesque ut ultrices purus.",\n image: "https://uploads.divjoy.com/undraw-balloons_vxx5.svg"\n }\n ]\n}', | |
| id: 753221 | |
| } | |
| ], | |
| id: 2630198 | |
| } | |
| ], | |
| id: 7879233 | |
| } | |
| ], | |
| tags: ["Features", "Popular"] | |
| }, | |
| { | |
| type: "component", | |
| name: "Features", | |
| id: 8535752, | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| style: "max-width: 900px;\nmargin: 80px auto 0 auto;", | |
| children: [ | |
| { | |
| type: "foreach", | |
| valName: "item", | |
| indexName: "index", | |
| objectName: "props.items", | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: [ | |
| "columns", | |
| "is-variable", | |
| "is-8", | |
| "is-vcentered", | |
| "has-text-centered-mobile" | |
| ], | |
| style: | |
| "// Reverse every other row\n&:nth-of-type(even) {\n flex-direction: row-reverse;\n}\n\n&:not(:last-of-type) {\n padding-bottom: 1.5rem;\n @media screen and (min-width: 769px) {\n padding-bottom: 2.5rem;\n }\n}", | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["column", "is-half"], | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "h3", | |
| classNames: [ | |
| "title", | |
| "has-text-weight-bold", | |
| "is-spaced", | |
| "is-3" | |
| ], | |
| style: "margin-bottom: 1.2rem !important;", | |
| children: [ | |
| { type: "text", text: "{item.title}", id: 967800 } | |
| ], | |
| id: 9683929 | |
| }, | |
| { | |
| type: "element", | |
| tagName: "p", | |
| classNames: ["subtitle"], | |
| children: [ | |
| { | |
| type: "text", | |
| text: "{item.description}", | |
| id: 4810067 | |
| } | |
| ], | |
| id: 1911482 | |
| } | |
| ], | |
| id: 836366 | |
| }, | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["column"], | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "figure", | |
| classNames: ["image"], | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "img", | |
| attributes: | |
| "{\n src: item.image,\n alt: item.title\n}", | |
| id: 8166672 | |
| } | |
| ], | |
| id: 2009629, | |
| style: "max-width: 300px;\nmargin: 30px auto;" | |
| } | |
| ], | |
| id: 5005051 | |
| } | |
| ], | |
| id: 7839467, | |
| attributes: "{\n\tkey: index\n}" | |
| } | |
| ], | |
| id: 426775 | |
| } | |
| ], | |
| id: 2124975 | |
| } | |
| ] | |
| }, | |
| { | |
| type: "component", | |
| name: "Testimonials Section", | |
| id: 3770170, | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 1079246, | |
| attributes: "{\n\tcolor: props.color,\n size: props.size\n}", | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["container"], | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 5415335, | |
| attributes: | |
| "{\n\ttitle: props.title,\n subtitle: props.subtitle,\n centered: true,\n // value from 1-6\n size: 3\n}", | |
| id: 5825807 | |
| }, | |
| { | |
| type: "instance", | |
| componentId: 472158, | |
| attributes: | |
| "{\n items: [\n {\n avatar: 'https://uploads.divjoy.com/pravatar-150x-5.jpeg',\n name: 'Sarah Kline',\n bio: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.',\n company: \"Company\"\n },\n {\n avatar: 'https://uploads.divjoy.com/pravatar-150x-48.jpeg',\n name: 'Shawna Murray',\n role: 'Software Engineer',\n bio: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum consequatur numquam aliquam tenetur ad amet inventore hic beatae, quas accusantium perferendis sapiente explicabo, corporis totam!',\n company: \"Company\"\n },\n {\n avatar: 'https://uploads.divjoy.com/pravatar-150x-12.jpeg',\n name: 'Blake Elder',\n role: 'Designer',\n bio: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum consequatur numquam aliquam tenetur ad amet inventore hic beatae.',\n company: \"Company\"\n }\n ]\n}", | |
| id: 5346966 | |
| } | |
| ], | |
| id: 9651265 | |
| } | |
| ], | |
| id: 1543239 | |
| } | |
| ], | |
| tags: ["Testimonials"] | |
| }, | |
| { | |
| type: "component", | |
| name: "Testimonials", | |
| id: 472158, | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 6198410, | |
| children: [ | |
| { | |
| type: "foreach", | |
| valName: "item", | |
| objectName: "props.items", | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["column", "is-flex"], | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["card", "is-flex"], | |
| style: "flex-direction: column;", | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: [ | |
| "card-content", | |
| "has-text-centered", | |
| "is-flex" | |
| ], | |
| style: | |
| "flex-direction: column;\nheight: 100%;\npadding: 1.8rem;", | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| name: "Avatar Wrapper", | |
| style: "margin: 0 auto;", | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 7412067, | |
| attributes: | |
| "{\n\timage: item.avatar,\n size: 96,\n alt: item.name\n}", | |
| id: 2381070 | |
| } | |
| ], | |
| id: 3316611 | |
| }, | |
| { | |
| type: "element", | |
| tagName: "p", | |
| name: "Quote", | |
| style: "margin-top: 30px;", | |
| children: [ | |
| { | |
| type: "text", | |
| text: '"{item.bio}"', | |
| id: 1711314 | |
| } | |
| ], | |
| id: 5568984 | |
| }, | |
| { | |
| type: "element", | |
| tagName: "div", | |
| name: "Info", | |
| style: "margin-top: auto;\npadding-top: 40px;", | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| name: "Name", | |
| classNames: ["has-text-weight-bold"], | |
| children: [ | |
| { | |
| type: "text", | |
| text: "{item.name}", | |
| id: 71786 | |
| } | |
| ], | |
| id: 385562 | |
| }, | |
| { | |
| type: "element", | |
| tagName: "div", | |
| name: "Company", | |
| classNames: ["link", "is-size-7"], | |
| children: [ | |
| { | |
| type: "text", | |
| text: "{item.company}", | |
| id: 2567670 | |
| } | |
| ], | |
| style: "margin-top: 3px;", | |
| id: 7909141 | |
| } | |
| ], | |
| id: 7396980 | |
| } | |
| ], | |
| id: 987401 | |
| } | |
| ], | |
| id: 3219495 | |
| } | |
| ], | |
| id: 8349892 | |
| } | |
| ], | |
| id: 9087936 | |
| } | |
| ], | |
| id: 6131369 | |
| } | |
| ] | |
| }, | |
| { | |
| type: "component", | |
| name: "Centered Columns", | |
| id: 6198410, | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: [ | |
| "columns", | |
| "is-centered", | |
| "is-variable", | |
| "is-4", | |
| "is-multiline" | |
| ], | |
| children: [{ type: "children", id: 7476441 }], | |
| id: 2388015 | |
| } | |
| ] | |
| }, | |
| { | |
| type: "component", | |
| name: "Avatar", | |
| id: 7412067, | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "figure", | |
| classNames: ["image"], | |
| classNameExpressions: [ | |
| { js: "size", classNames: ["is-{size}x{size}"] } | |
| ], | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "img", | |
| attributes: "{\n src: image,\n alt: alt,\n ...otherProps\n}", | |
| classNames: ["is-rounded"], | |
| id: 7660562 | |
| } | |
| ], | |
| id: 3545177 | |
| } | |
| ], | |
| code: "\tconst { image, size, alt, ...otherProps } = props;\n" | |
| }, | |
| { | |
| type: "component", | |
| name: "Footer", | |
| id: 203216, | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 1079246, | |
| attributes: "{\n\tcolor: props.color,\n size: props.size\n}", | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["container"], | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["brand", "left"], | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "a", | |
| attributes: "{\n href: '/' \n}", | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "img", | |
| attributes: '{\n src: props.logo,\n alt: "Logo"\n}', | |
| id: 782650 | |
| } | |
| ], | |
| id: 4753230 | |
| } | |
| ], | |
| id: 6328584 | |
| }, | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["links", "right"], | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "a", | |
| children: [{ type: "text", text: "About", id: 4566084 }], | |
| attributes: "{\n\thref: '/about'\n}", | |
| id: 5142584 | |
| }, | |
| { | |
| type: "element", | |
| tagName: "a", | |
| children: [{ type: "text", text: "FAQ", id: 41141 }], | |
| attributes: "{\n\thref: '/faq',\n}", | |
| id: 7264362 | |
| }, | |
| { | |
| type: "element", | |
| tagName: "a", | |
| children: [ | |
| { type: "text", text: "Contact", id: 9366721 } | |
| ], | |
| attributes: "{\n\thref: '/contact',\n}", | |
| id: 2333053 | |
| }, | |
| { | |
| type: "element", | |
| tagName: "a", | |
| children: [{ type: "text", text: "Blog", id: 8263046 }], | |
| attributes: | |
| '{\n target: "_blank",\n href: "https://medium.com",\n rel: "noopener noreferrer"\n}', | |
| id: 5194689 | |
| } | |
| ], | |
| id: 847974 | |
| }, | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["social", "right"], | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "a", | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "span", | |
| classNames: ["icon"], | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "i", | |
| classNames: ["fab", "fa-twitter"], | |
| id: 6283470 | |
| } | |
| ], | |
| id: 3994074 | |
| } | |
| ], | |
| attributes: | |
| "{\n\thref: 'https://twitter.com',\n\ttarget: '_blank',\n rel: 'noopener noreferrer'\n}", | |
| id: 8489828 | |
| }, | |
| { | |
| type: "element", | |
| tagName: "a", | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "span", | |
| classNames: ["icon"], | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "i", | |
| classNames: ["fab", "fa-facebook-f"], | |
| id: 8936496 | |
| } | |
| ], | |
| id: 3232684 | |
| } | |
| ], | |
| attributes: | |
| "{\n\thref: 'https://facebook.com',\n\ttarget: '_blank',\n rel: 'noopener noreferrer'\n}", | |
| id: 7606899 | |
| }, | |
| { | |
| type: "element", | |
| tagName: "a", | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "span", | |
| classNames: ["icon"], | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "i", | |
| classNames: ["fab", "fa-instagram"], | |
| id: 8331840 | |
| } | |
| ], | |
| id: 2925991 | |
| } | |
| ], | |
| attributes: | |
| "{\n\thref: 'https://instagram.com',\n\ttarget: '_blank',\n rel: 'noopener noreferrer'\n}", | |
| id: 2600085 | |
| } | |
| ], | |
| id: 617938 | |
| }, | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["copyright", "left"], | |
| children: [ | |
| { type: "text", text: "{props.copyright}", id: 9660171 } | |
| ], | |
| id: 531660 | |
| } | |
| ], | |
| style: | |
| "display: flex;\nflex-wrap: wrap;\n> div {\n display: flex;\n flex: none;\n justify-content: center;\n width: 100%;\n margin-bottom: 24px;\n}\n\n.brand {\n img {\n display: block;\n height: 32px;\n }\n}\n\n.social {\n align-items: flex-end;\n}\n\n.social, .links {\n a {\n color: inherit;\n &:hover {\n opacity: 0.8;\n }\n\n &:not(:first-of-type) {\n margin-left: 20px;\n }\n }\n}\n\n// Tablet and up\n@media screen and (min-width: 769px) {\n > div {\n flex: 50%;\n }\n\n .left {\n justify-content: flex-start;\n }\n\n .right {\n justify-content: flex-end;\n }\n \n // Move links to end (bottom right)\n // Swaps position with social\n .links {\n order: 1;\n }\n}", | |
| id: 4190157 | |
| } | |
| ], | |
| id: 4337160 | |
| } | |
| ], | |
| tags: ["Footer", "Popular"] | |
| }, | |
| { | |
| type: "component", | |
| subtype: "page-component", | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 7454246, | |
| attributes: | |
| '{\n // primary, link, info, success, warning, \n // danger, white, light, dark, black\n color: "white",\n // normal, medium, large\n size: "medium",\n title: "Your landing page title here",\n subtitle: "This landing page is perfect for showing off your awesome product and driving people to sign up for a paid plan.",\n buttonText: "Get Started",\n image: \'https://uploads.divjoy.com/undraw-japan_ubgk.svg\',\n buttonOnClick: () => {\n router.push(\'/pricing\');\n }\n}', | |
| id: 195077 | |
| }, | |
| { | |
| type: "instance", | |
| componentId: 4279952, | |
| attributes: | |
| '{\n\t// primary, link, info, success, warning, \n // danger, white, light, dark, black\n color: "light",\n // normal, medium, large\n size: "normal",\n title: "",\n subtitle: ""\n}', | |
| id: 813240 | |
| }, | |
| { | |
| type: "instance", | |
| componentId: 1166901, | |
| attributes: | |
| '{\n // primary, link, info, success, warning, \n // danger, white, light, dark, black\n\tcolor: "white",\n // normal, medium, large\n size: "medium",\n title: "Features",\n subtitle: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud."\n}', | |
| id: 8647187 | |
| }, | |
| { | |
| type: "instance", | |
| componentId: 3770170, | |
| attributes: | |
| '{\n\t// primary, link, info, success, warning, \n // danger, white, light, dark, black\n color: "light",\n // normal, medium, large\n size: "medium",\n title: "Here\'s what people are saying",\n subtitle: ""\n}', | |
| id: 5160492 | |
| }, | |
| { | |
| type: "instance", | |
| componentId: 74477, | |
| attributes: | |
| '{\n // primary, link, info, success, warning, \n // danger, white, light, dark, black\n\tcolor: "white",\n // normal, medium, large\n size: "medium",\n title: "Stay in the know",\n subtitle: "Receive our latest articles and feature updates",\n buttonText: "Subscribe",\n inputPlaceholder: "Enter your email",\n subscribedMessage: "You are now subscribed!"\n}', | |
| id: 890301 | |
| } | |
| ], | |
| id: 1513260, | |
| code: "\tconst router = useRouter();\n" | |
| }, | |
| { | |
| type: "component", | |
| subtype: "page-component", | |
| path: "about", | |
| id: 3773675, | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 4857083, | |
| attributes: | |
| '{\n // primary, link, info, success, warning, \n // danger, white, light, dark, black\n\tcolor: "primary",\n // normal, medium, large\n size: "large",\n title: "We help you make money",\n subtitle: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum consequatur numquam aliquam tenetur ad amet inventore hic beatae, quas accusantium perferendis sapiente explicabo, corporis totam!"\n}', | |
| id: 1322277 | |
| }, | |
| { | |
| type: "instance", | |
| componentId: 6816015, | |
| attributes: | |
| '{\n // primary, link, info, success, warning, \n // danger, white, light, dark, black\n\tcolor: "white",\n // normal, medium, large\n size: "medium",\n title: "Meet the Team",\n subtitle: ""\n}', | |
| id: 8526933 | |
| } | |
| ] | |
| }, | |
| { | |
| type: "component", | |
| name: "Content Section", | |
| id: 4857083, | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 1079246, | |
| attributes: | |
| "{\n\tcolor: props.color,\n size: props.size,\n backgroundImage: props.backgroundImage,\n backgroundImageOpacity: props.backgroundImageOpacity\n}", | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["container"], | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 5415335, | |
| attributes: | |
| "{\n\ttitle: props.title,\n subtitle: props.subtitle,\n centered: true,\n // value from 1-6\n size: 2\n}", | |
| id: 578586 | |
| } | |
| ], | |
| id: 5744175 | |
| } | |
| ], | |
| id: 9123185 | |
| } | |
| ], | |
| tags: ["Content"] | |
| }, | |
| { | |
| type: "component", | |
| name: "Team Bios Section", | |
| id: 6816015, | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 1079246, | |
| attributes: "{\n\tcolor: props.color,\n size: props.size\n}", | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["container"], | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 5415335, | |
| attributes: | |
| "{\n\ttitle: props.title,\n subtitle: props.subtitle,\n centered: true,\n // value from 1-6\n size: 3\n}", | |
| id: 981326 | |
| }, | |
| { | |
| type: "instance", | |
| componentId: 9687587, | |
| attributes: | |
| "{\n people: [\n {\n avatar: 'https://uploads.divjoy.com/pravatar-150x-68.jpeg',\n name: 'John Smith',\n role: 'Software Engineer',\n bio: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum consequatur numquam aliquam tenetur ad amet inventore hic beatae, quas accusantium perferendis sapiente explicabo.',\n twitterUrl: 'https://twitter.com',\n facebookUrl: 'https://facebook.com',\n linkedinUrl: 'https://linkedin.com'\n },\n {\n avatar: 'https://uploads.divjoy.com/pravatar-150x-35.jpeg',\n name: 'Lisa Zinn',\n role: 'Software Engineer',\n bio: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum consequatur numquam aliquam tenetur ad amet inventore hic beatae, quas accusantium perferendis sapiente explicabo, corporis totam! Labore reprehenderit beatae magnam animi!',\n twitterUrl: 'https://twitter.com',\n facebookUrl: 'https://facebook.com',\n linkedinUrl: 'https://linkedin.com'\n },\n {\n avatar: 'https://uploads.divjoy.com/pravatar-150x-16.jpeg',\n name: 'Diana Low',\n role: 'Designer',\n bio: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum consequatur numquam aliquam tenetur ad amet inventore hic beatae, quas accusantium perferendis sapiente explicabo, corporis totam! Labore reprehenderit beatae magnam animi!',\n twitterUrl: 'https://twitter.com',\n facebookUrl: 'https://facebook.com',\n linkedinUrl: 'https://linkedin.com'\n }\n ]\n}", | |
| id: 2949380 | |
| } | |
| ], | |
| id: 5420427 | |
| } | |
| ], | |
| id: 4242966 | |
| } | |
| ], | |
| tags: ["Popular", "Team"] | |
| }, | |
| { | |
| type: "component", | |
| name: "Team Bios", | |
| id: 9687587, | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 6198410, | |
| children: [ | |
| { | |
| type: "foreach", | |
| valName: "person", | |
| objectName: "props.people", | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: [ | |
| "column", | |
| "is-half-tablet", | |
| "is-one-third-desktop", | |
| "is-flex" | |
| ], | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["card", "is-flex"], | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: [ | |
| "card-content", | |
| "is-flex", | |
| "has-text-centered" | |
| ], | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| name: "Avatar Wrapper", | |
| style: "margin: 0 auto;", | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 7412067, | |
| attributes: | |
| "{\n\timage: person.avatar,\n size: 128,\n alt: person.name\n}", | |
| id: 4474689 | |
| } | |
| ], | |
| id: 2904923 | |
| }, | |
| { | |
| type: "element", | |
| tagName: "div", | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "p", | |
| children: [ | |
| { | |
| type: "text", | |
| text: "{person.name}", | |
| id: 830353 | |
| } | |
| ], | |
| name: "Name", | |
| classNames: ["is-size-5"], | |
| id: 5156861 | |
| }, | |
| { | |
| type: "element", | |
| tagName: "p", | |
| children: [ | |
| { | |
| type: "text", | |
| text: "{person.role}", | |
| id: 6516408 | |
| } | |
| ], | |
| name: "Role", | |
| classNames: [ | |
| "is-size-7", | |
| "is-uppercase", | |
| "has-text-weight-semibold" | |
| ], | |
| id: 8657684 | |
| }, | |
| { | |
| type: "element", | |
| tagName: "p", | |
| children: [ | |
| { | |
| type: "text", | |
| text: "{person.bio}", | |
| id: 4499683 | |
| } | |
| ], | |
| name: "Bio", | |
| style: "margin-top: 20px;", | |
| id: 9988572 | |
| } | |
| ], | |
| name: "Details", | |
| style: "margin-top: 20px;", | |
| id: 7698527 | |
| } | |
| ], | |
| style: | |
| "flex-direction: column;\nheight: 100%;\npadding: 1.8rem;", | |
| id: 3357018 | |
| } | |
| ], | |
| style: "flex-direction: column;", | |
| id: 6450664 | |
| } | |
| ], | |
| id: 287490, | |
| attributes: "{\n\tkey: index\n}" | |
| } | |
| ], | |
| id: 3706765, | |
| indexName: "index" | |
| } | |
| ], | |
| id: 99593 | |
| } | |
| ] | |
| }, | |
| { | |
| type: "component", | |
| name: "Newsletter Section", | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 1079246, | |
| attributes: "{\n\tcolor: props.color,\n size: props.size\n}", | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["container"], | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["columns", "is-centered"], | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["column", "is-12", "is-10-fullhd"], | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["columns", "is-vcentered"], | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["column", "is-half"], | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["title"], | |
| children: [ | |
| { | |
| type: "text", | |
| text: "{props.title}", | |
| id: 4153440 | |
| } | |
| ], | |
| id: 5227180 | |
| }, | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["subtitle"], | |
| children: [ | |
| { | |
| type: "text", | |
| text: "{props.subtitle}", | |
| id: 2994041 | |
| } | |
| ], | |
| id: 180416 | |
| } | |
| ], | |
| id: 8254421 | |
| }, | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["column", "is-half"], | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 4938296, | |
| id: 6723650, | |
| attributes: | |
| '{\n parentColor: props.color,\n\tbuttonText: props.buttonText,\n inputPlaceholder: props.inputPlaceholder,\n subscribedMessage: props.subscribedMessage,\n\t// small, normal, medium, large\n size: "medium"\n}' | |
| } | |
| ], | |
| id: 4936903 | |
| } | |
| ], | |
| id: 3334129 | |
| } | |
| ], | |
| id: 5195628 | |
| } | |
| ], | |
| id: 6212138 | |
| } | |
| ], | |
| id: 6031473 | |
| } | |
| ], | |
| id: 8188011 | |
| } | |
| ], | |
| id: 74477, | |
| code: " ", | |
| tags: ["Popular", "Newsletter"] | |
| }, | |
| { | |
| type: "component", | |
| name: "Newsletter", | |
| children: [ | |
| { | |
| type: "if", | |
| js: "subscribed === false", | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "form", | |
| attributes: | |
| "{\n onSubmit: (e) => {\n e.preventDefault();\n handleSubmit();\n }\n}", | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["field", "is-grouped"], | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["control", "is-expanded"], | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "input", | |
| attributes: | |
| "{\n type: 'email',\n placeholder: props.inputPlaceholder,\n onChange: (event) => setEmail(event.target.value)\n}", | |
| classNames: ["input", "is-{props.size}"], | |
| id: 2334275 | |
| } | |
| ], | |
| id: 5348542 | |
| }, | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["control"], | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 8669042, | |
| attributes: | |
| "{\n\tparentColor: props.parentColor,\n size: props.size,\n onClick: props.buttonOnClick\n}", | |
| children: [ | |
| { | |
| type: "text", | |
| text: "{props.buttonText}", | |
| id: 751726 | |
| } | |
| ], | |
| id: 7377433 | |
| } | |
| ], | |
| id: 568525 | |
| } | |
| ], | |
| id: 4088219 | |
| } | |
| ], | |
| id: 9147691 | |
| } | |
| ], | |
| id: 2699611 | |
| }, | |
| { | |
| type: "if", | |
| js: "subscribed === true", | |
| children: [ | |
| { type: "text", text: "{props.subscribedMessage}", id: 813004 } | |
| ], | |
| id: 3854440 | |
| } | |
| ], | |
| id: 4938296, | |
| code: | |
| " const [email, setEmail] = useState('');\n const [subscribed, setSubscribed] = useState(false);\n \n const handleSubmit = () => {\n if (email){\n setSubscribed(true);\n // Parent component can optionally\n // find out when subscribed.\n props.onSubscribed && props.onSubscribed();\n // Subscribe them\n newsletter.subscribe({ email });\n }\n }\n " | |
| }, | |
| { | |
| type: "component", | |
| subtype: "page-component", | |
| path: "faq", | |
| id: 327204, | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 8074567, | |
| attributes: | |
| '{\n // primary, link, info, success, warning, \n // danger, white, light, dark, black\n\tcolor: "white",\n // normal, medium, large\n size: "medium",\n\ttitle: "Frequently Asked Questions",\n subtitle: ""\n}', | |
| id: 2798265 | |
| } | |
| ] | |
| }, | |
| { | |
| type: "component", | |
| name: "FAQ Section", | |
| id: 8074567, | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 1079246, | |
| attributes: "{\n\tcolor: props.color,\n size: props.size\n}", | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["container"], | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 5415335, | |
| attributes: | |
| "{\n\ttitle: props.title,\n subtitle: props.subtitle,\n centered: true,\n // value from 1-6\n size: 3\n}", | |
| id: 4849694 | |
| }, | |
| { | |
| type: "instance", | |
| componentId: 8283571, | |
| attributes: | |
| "{\n items: [\n {\n question: 'Integer ornare neque mauris?',\n answer: 'Integer ornare neque mauris, ac vulputate lacus venenatis et. Pellentesque ut ultrices purus. Suspendisse ut tincidunt eros. In velit mi, rhoncus dictum neque a, tincidunt lobortis justo.'\n },\n {\n question: 'Lorem ipsum dolor sit amet?',\n answer: 'Nunc nulla mauris, laoreet vel cursus lacinia, consectetur sit amet tellus. Suspendisse ut tincidunt eros. In velit mi, rhoncus dictum neque a, tincidunt lobortis justo.'\n },\n {\n question: 'Suspendisse ut tincidunt?',\n answer: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lobortis, metus et mattis ullamcorper. Suspendisse ut tincidunt eros. In velit mi, rhoncus dictum neque a, tincidunt lobortis justo.'\n },\n {\n question: 'Ut enim ad minim veniam?',\n answer: 'Suspendisse ut tincidunt eros. In velit mi, rhoncus dictum neque a, tincidunt lobortis justo.'\n },\n {\n question: 'In velit mi, rhoncus dictum neque?',\n answer: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.'\n }\n ]\n}", | |
| id: 8641436 | |
| } | |
| ], | |
| id: 1107442 | |
| } | |
| ], | |
| id: 3382393 | |
| } | |
| ], | |
| tags: ["FAQ"] | |
| }, | |
| { | |
| type: "component", | |
| name: "FAQ", | |
| id: 8283571, | |
| children: [ | |
| { | |
| type: "foreach", | |
| valName: "item", | |
| objectName: "props.items", | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 4138632, | |
| attributes: | |
| "{\n\tquestion: item.question,\n answer: item.answer\n}", | |
| id: 3188134 | |
| } | |
| ], | |
| id: 3564997 | |
| } | |
| ] | |
| }, | |
| { | |
| type: "component", | |
| name: "FAQ Item", | |
| code: "\tconst [expanded, setExpanded] = useState(false);\t\n", | |
| id: 4138632, | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "article", | |
| attributes: "{\n\tonClick: () => setExpanded(!expanded)\n}", | |
| style: | |
| "cursor: pointer;\npadding: 1.6rem 0;\nborder-bottom: 1px solid #efefef;\n&:last-child { \n border-bottom: none; \n}", | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["title", "is-spaced", "is-4"], | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "span", | |
| classNames: ["icon", "is-size-5", "has-text-primary"], | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "i", | |
| classNames: ["fas"], | |
| classNameExpressions: [ | |
| { js: "expanded", classNames: ["fa-minus"] }, | |
| { js: "!expanded", classNames: ["fa-plus"] } | |
| ], | |
| id: 7252241 | |
| } | |
| ], | |
| style: "margin-right: 1rem;", | |
| id: 6314855 | |
| }, | |
| { type: "text", text: "{props.question}", id: 6690297 } | |
| ], | |
| id: 3811440 | |
| }, | |
| { | |
| type: "if", | |
| js: "expanded", | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["subtitle"], | |
| children: [ | |
| { type: "text", text: "{props.answer}", id: 3624243 } | |
| ], | |
| id: 6329152 | |
| } | |
| ], | |
| id: 9458739 | |
| } | |
| ], | |
| id: 6868745 | |
| } | |
| ] | |
| }, | |
| { | |
| type: "component", | |
| name: "Pricing Section", | |
| id: 4443176, | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 1079246, | |
| attributes: | |
| '{\n\tcolor: props.color,\n size: props.size,\n id: "pricing"\n}', | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["container"], | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 5415335, | |
| attributes: | |
| "{\n\ttitle: props.title,\n subtitle: props.subtitle,\n centered: true,\n // value from 1-6\n size: 3\n}", | |
| id: 4598409 | |
| }, | |
| { | |
| type: "instance", | |
| componentId: 2167828, | |
| attributes: | |
| "{\n // text on button\n buttonText: 'Choose',\n // callback when plan chosen (button clicked)\n onChoosePlan: (planId) => {\n // Add your own payments logic here\n \talert(`You chose the plan \"${planId}\"`);\n },\n items: [\n { \n id: 'monthly',\n timespan: \"Monthly\",\n price: \"29\",\n description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum consequatur numquam aliquam.'\n },\n { \n id: 'yearly',\n timespan: \"Yearly\",\n price: \"19\",\n description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum consequatur numquam aliquam tenetur ad amet inventore hic beatae.'\n }\n ]\n}", | |
| id: 2641926 | |
| } | |
| ], | |
| style: "max-width: 800px;", | |
| id: 5908858 | |
| } | |
| ], | |
| id: 6822629 | |
| } | |
| ], | |
| tags: ["Pricing", "Popular"] | |
| }, | |
| { | |
| type: "component", | |
| name: "Pricing", | |
| id: 2167828, | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["columns", "is-centered", "is-variable", "is-5"], | |
| children: [ | |
| { | |
| type: "foreach", | |
| valName: "item", | |
| indexName: "index", | |
| objectName: "props.items", | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["column"], | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["card"], | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["card-content"], | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| style: "font-size: 1.25rem;", | |
| classNames: ["has-text-weight-bold"], | |
| children: [ | |
| { | |
| type: "text", | |
| text: "{item.timespan}", | |
| id: 5672110 | |
| } | |
| ], | |
| name: "Period", | |
| id: 2393390 | |
| }, | |
| { | |
| type: "element", | |
| tagName: "div", | |
| style: "margin: 20px 0;", | |
| classNames: ["has-text-weight-bold"], | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "span", | |
| children: [ | |
| { type: "text", text: "$", id: 9593806 } | |
| ], | |
| classNames: ["is-size-3"], | |
| name: "Price Symbol", | |
| style: "opacity: 0.4;", | |
| id: 1967626 | |
| }, | |
| { | |
| type: "element", | |
| tagName: "span", | |
| children: [ | |
| { | |
| type: "text", | |
| text: "{item.price}", | |
| id: 8603056 | |
| } | |
| ], | |
| classNames: ["is-size-1"], | |
| name: "Price Number", | |
| id: 1984251 | |
| }, | |
| { | |
| type: "element", | |
| tagName: "span", | |
| children: [ | |
| { type: "text", text: "/m", id: 6524326 } | |
| ], | |
| classNames: ["is-size-4"], | |
| name: "Price Month", | |
| style: "opacity: 0.4;", | |
| id: 8466525 | |
| } | |
| ], | |
| name: "Price", | |
| id: 883311 | |
| }, | |
| { | |
| type: "element", | |
| tagName: "p", | |
| children: [ | |
| { | |
| type: "text", | |
| text: "{item.description}", | |
| id: 5239080 | |
| } | |
| ], | |
| name: "Description", | |
| style: "padding-bottom: 40px;", | |
| id: 999032 | |
| }, | |
| { | |
| type: "element", | |
| tagName: "button", | |
| classNames: ["button", "is-medium", "is-primary"], | |
| children: [ | |
| { | |
| type: "text", | |
| text: "{props.buttonText}", | |
| id: 9240044 | |
| } | |
| ], | |
| style: "margin-top: auto;", | |
| attributes: | |
| "{\n\tonClick: () => props.onChoosePlan(item.id)\n}", | |
| id: 2606941 | |
| } | |
| ], | |
| style: | |
| "// Flex so that button can position self at \n// bottom of card using margin-top auto.\ndisplay: flex;\nflex-direction: column;\n// Stretch to fit column width\nwidth: 100%;\npadding: 2rem;", | |
| id: 2873169 | |
| } | |
| ], | |
| style: | |
| "display: flex;\n// Stretch to fit column width\nwidth: 100%;\n// Ensure .card-content stretches to fit width\nalign-items: stretch;", | |
| classNameExpressions: [ | |
| { | |
| js: "item.emphasized === true", | |
| classNames: ["emphasized"] | |
| } | |
| ], | |
| id: 1944025 | |
| } | |
| ], | |
| style: "display: flex;\nalign-items: stretch;", | |
| attributes: "{\n key: index\n}", | |
| id: 9946607 | |
| } | |
| ], | |
| id: 3852911 | |
| } | |
| ], | |
| id: 7267633 | |
| } | |
| ] | |
| }, | |
| { | |
| type: "component", | |
| subtype: "page-component", | |
| path: "pricing", | |
| id: 9988735, | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 4443176, | |
| attributes: | |
| '{\n\t// primary, link, info, success, warning, \n // danger, white, light, dark, black\n color: "white",\n // normal, medium, large\n size: "medium",\n title: \'Pricing\',\n subtitle: ""\n}', | |
| id: 6155292 | |
| } | |
| ] | |
| }, | |
| { | |
| type: "component", | |
| name: "Form Field", | |
| id: 2768808, | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["field"], | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["control"], | |
| children: [ | |
| { | |
| type: "if", | |
| js: 'props.type === "textarea"', | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "textarea", | |
| attributes: | |
| "{\n type: props.type,\n value: props.value,\n placeholder: props.placeholder,\n onChange: (e) => props.onChange(e.target.value)\n}", | |
| classNames: ["textarea", "is-medium"], | |
| id: 398205 | |
| } | |
| ], | |
| id: 6549474 | |
| }, | |
| { | |
| type: "if", | |
| js: 'props.type !== "textarea"', | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "input", | |
| attributes: | |
| "{\n type: props.type,\n value: props.value,\n placeholder: props.placeholder,\n onChange: (e) => props.onChange(e.target.value)\n}", | |
| classNames: ["input", "is-medium"], | |
| id: 889978 | |
| } | |
| ], | |
| id: 6476692 | |
| } | |
| ], | |
| id: 5235996 | |
| }, | |
| { | |
| type: "if", | |
| js: "props.error", | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "p", | |
| classNames: ["help", "is-danger"], | |
| children: [ | |
| { type: "text", text: "{props.error.message}", id: 5299485 } | |
| ], | |
| id: 9601294 | |
| } | |
| ], | |
| id: 1823889 | |
| } | |
| ], | |
| id: 1060601 | |
| } | |
| ] | |
| }, | |
| { | |
| type: "component", | |
| subtype: "page-component", | |
| path: "contact", | |
| id: 8532180, | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 4150400, | |
| attributes: | |
| '{\n // primary, link, info, success, warning, \n // danger, white, light, dark, black\n\tcolor: "white",\n // normal, medium, large\n size: "medium",\n\ttitle: "Contact Us",\n subtitle: "",\n showNameField: true,\n buttonText: "Send message"\n}', | |
| id: 2665747 | |
| } | |
| ] | |
| }, | |
| { | |
| type: "component", | |
| name: "Contact Section", | |
| id: 4150400, | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 1079246, | |
| attributes: "{\n\tcolor: props.color,\n size: props.size\n}", | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["container"], | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 5415335, | |
| attributes: | |
| "{\n\ttitle: props.title,\n subtitle: props.subtitle,\n centered: true,\n // value from 1-6\n size: 3\n}", | |
| id: 4071896 | |
| }, | |
| { | |
| type: "instance", | |
| componentId: 5469661, | |
| attributes: | |
| "{\n parentColor: props.color,\n showNameField: props.showNameField,\n buttonText: props.buttonText,\n}", | |
| id: 8209060 | |
| } | |
| ], | |
| style: "max-width: 850px;", | |
| id: 2533263 | |
| } | |
| ], | |
| id: 5180594 | |
| } | |
| ], | |
| tags: ["Contact", "Popular"] | |
| }, | |
| { | |
| type: "component", | |
| name: "Contact Form", | |
| code: | |
| "\t// State for input values\n const [name, setName] = useState('');\n const [email, setEmail] = useState('');\n const [message, setMessage] = useState('');\n\n // Whether to show errors\n // We set to true if they submit and there are errors.\n // We only show errors after they submit because\n // it's annoying to see errors while typing.\n const [showErrors, setShowErrors] = useState(false);\n \n // Error array we'll populate\n let errors = [];\n\n // Function for fetching error for a field\n const getError = (field) => {\n return errors.find((e) => e.field === field);\n }\n \n // Function to see if field is empty\n const isEmpty = (val) => val.trim() === '';\n \n\t// Add error if email empty\n if (isEmpty(email)){\n errors.push({\n field: 'email',\n message: 'Please enter an email'\n });\n }\n \n// Add error if message empty\n if (isEmpty(message)){\n errors.push({\n field: 'message',\n message: 'Please enter a message'\n });\n }\n \n\t// Add error if name shown and empty\n if (props.showNameField){\n if (isEmpty(name)){\n errors.push({\n field: 'name',\n message: 'Please enter your name'\n });\n }\n }\n\n // Handle form submission\n const handleSubmit = (e) => {\n // If field errors then show them\n if (errors.length){\n setShowErrors(true);\n }else{\n // Otherwise call onSubmit with form data\n if (props.onSubmit){\n props.onSubmit({\n name,\n email,\n message\n });\n }\n }\n }\n ", | |
| id: 2896856, | |
| children: [ | |
| { | |
| type: "if", | |
| js: "props.status && props.status.message", | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 8324765, | |
| attributes: | |
| "{\n\ttype: props.status.type,\n message: props.status.message\n}", | |
| id: 114896 | |
| } | |
| ], | |
| id: 1815689 | |
| }, | |
| { | |
| type: "element", | |
| tagName: "form", | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["field", "is-horizontal"], | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["field-body"], | |
| children: [ | |
| { | |
| type: "if", | |
| js: "props.showNameField", | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 2768808, | |
| attributes: | |
| "{\n value: name,\n type: 'text',\n placeholder: 'Name',\n\terror: showErrors && getError('name'),\n onChange: (value) => setName(value)\n}", | |
| id: 4532532 | |
| } | |
| ], | |
| id: 2002727 | |
| }, | |
| { | |
| type: "instance", | |
| componentId: 2768808, | |
| attributes: | |
| "{\n value: email,\n type: 'email',\n placeholder: 'Email',\n\terror: showErrors && getError('email'),\n onChange: (value) => setEmail(value)\n}", | |
| id: 6729270 | |
| } | |
| ], | |
| id: 8382708 | |
| } | |
| ], | |
| id: 365257 | |
| }, | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["field", "is-horizontal"], | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["field-body"], | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 2768808, | |
| attributes: | |
| "{\n value: message,\n type: 'textarea',\n placeholder: 'Message',\n\terror: showErrors && getError('message'),\n onChange: (value) => setMessage(value)\n}", | |
| id: 8365187 | |
| } | |
| ], | |
| id: 8359098 | |
| } | |
| ], | |
| id: 1359873 | |
| }, | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["field", "is-horizontal"], | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["field-body"], | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["field"], | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["control"], | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 8669042, | |
| attributes: | |
| "{\n\tparentColor: props.parentColor,\n size: \"medium\",\n state: props.status && \n props.status.type === \"pending\" ?\n 'loading' : 'normal'\n}", | |
| children: [ | |
| { | |
| type: "text", | |
| text: "{props.buttonText}", | |
| id: 9112618 | |
| } | |
| ], | |
| id: 8423764 | |
| } | |
| ], | |
| id: 2553172 | |
| } | |
| ], | |
| id: 4119607 | |
| } | |
| ], | |
| id: 7385159 | |
| } | |
| ], | |
| id: 3883 | |
| } | |
| ], | |
| attributes: | |
| "{\n onSubmit: (e) => {\n e.preventDefault();\n handleSubmit();\n }\n}", | |
| id: 980695 | |
| } | |
| ] | |
| }, | |
| { | |
| type: "component", | |
| name: "Contact", | |
| code: | |
| '\tconst [status, setStatus] = useState();\n \n const onSubmit = ({ name, email, message }) => {\n setStatus({ type: "pending" });\n \n contact.submit({ name, email, message })\n \t.then(() => {\n \tsetStatus({\n \ttype: "success",\n \tmessage: "Your message has been sent! We\'ll get back to you soon."\n \t});\n \t})\n }', | |
| id: 5469661, | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 2896856, | |
| attributes: | |
| "{\n parentColor: props.parentColor,\n showNameField: props.showNameField,\n buttonText: props.buttonText,\n onSubmit: onSubmit,\n status: status\n}", | |
| id: 7744584 | |
| } | |
| ] | |
| }, | |
| { | |
| type: "component", | |
| name: "Form Status", | |
| id: 8324765, | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["notification"], | |
| classNameExpressions: [ | |
| { js: 'props.type === "error"', classNames: ["is-danger"] }, | |
| { js: 'props.type === "success"', classNames: ["is-success"] } | |
| ], | |
| children: [{ type: "text", text: "{props.message}", id: 6208534 }], | |
| id: 2491376 | |
| } | |
| ] | |
| }, | |
| { | |
| type: "component", | |
| subtype: "page-component", | |
| path: "dashboard", | |
| code: | |
| "\tconst auth = useAuth();\n\tconst router = useRouter();\n\n\t// Redirect to signin\n\t// if not signed in.\n\tuseEffect(() => {\n if (auth.user === false){\n \trouter.push('/signin');\n }\n }, [auth]);\n", | |
| id: 9447965, | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 8384420, | |
| attributes: | |
| '{\n // primary, link, info, success, warning, \n // danger, white, light, dark, black\n\tcolor: "white",\n // normal, medium, large\n size: "large",\n title: "Dashboard",\n subtitle: "Dashboard components are coming to the Divjoy library soon. For now, you can implement a custom dashboard here after exporting your code."\n}', | |
| id: 8433171 | |
| } | |
| ] | |
| }, | |
| { | |
| type: "component", | |
| name: "Dashboard Section", | |
| id: 8384420, | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 1079246, | |
| attributes: "{\n\tcolor: props.color,\n size: props.size\n}", | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["container"], | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 5415335, | |
| attributes: | |
| "{\n\ttitle: props.title,\n subtitle: props.subtitle,\n centered: true,\n // value from 1-6\n size: 3\n}", | |
| id: 6816971 | |
| } | |
| ], | |
| id: 4452922 | |
| } | |
| ], | |
| id: 368304 | |
| } | |
| ] | |
| }, | |
| { | |
| type: "component", | |
| subtype: "page-component", | |
| path: "signin", | |
| id: 4045617, | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 2902377, | |
| attributes: | |
| '{\n // primary, link, info, success, warning, \n // danger, white, light, dark, black\n color: "white",\n // normal, medium, large\n size: "large",\n\ttitle: "Welcome back",\n subtitle: "",\n buttonText: "Sign in",\n}', | |
| id: 6038296 | |
| } | |
| ] | |
| }, | |
| { | |
| type: "component", | |
| name: "Auth", | |
| code: | |
| "\t// State for all inputs\n const [email, setEmail] = useState('');\n const [pass, setPass] = useState('');\n const [confirmPass, setConfirmPass] = useState('');\n \n // Whether to show errors\n // We set to true if they submit and there are errors.\n // We only show errors after they submit because\n // it's annoying to see errors while typing.\n const [showErrors, setShowErrors] = useState(false);\n \n // Error array we'll populate\n let errors = [];\n\n // Function for fetching error for a field\n const getError = (field) => {\n return errors.find((e) => e.field === field);\n }\n \n // Function to see if field is empty\n const isEmpty = (val) => val.trim() === '';\n \n // Add error if email empty\n if (['signin','signup','forgotpass'].includes(props.mode)){\n if (isEmpty(email)){\n errors.push({\n field: 'email',\n message: 'Please enter an email'\n });\n }\n }\n \n // Add error if password empty\n if (['signin', 'signup', 'changepass'].includes(props.mode)){\n if (isEmpty(pass)){\n errors.push({\n field: 'pass',\n message: 'Please enter a password'\n });\n }\n }\n \n // Add error if confirmPass empty or\n\t// if it doesn't match pass.\n\t// Only for signup and changepass views.\n if (['signup', 'changepass'].includes(props.mode)){\n if (isEmpty(confirmPass)){\n errors.push({\n field: 'confirmPass',\n message: 'Please confirm password'\n });\n }else if (pass !== confirmPass){\n errors.push({\n field: 'confirmPass',\n message: `This doesn't match your password`\n });\n }\n }\n\n // Handle form submission\n const handleSubmit = () => {\n // If field errors then show them\n if (errors.length){\n setShowErrors(true);\n }else{\n // Otherwise call onSubmit with email/pass\n if (props.onSubmit){\n props.onSubmit({\n email,\n pass\n });\n }\n }\n }\n ", | |
| id: 63699, | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| children: [ | |
| { | |
| type: "if", | |
| js: "props.status && props.status.message", | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 8324765, | |
| attributes: | |
| "{\n\ttype: props.status.type,\n message: props.status.message\n}", | |
| id: 5710328 | |
| } | |
| ], | |
| id: 5805610 | |
| }, | |
| { | |
| type: "element", | |
| tagName: "form", | |
| children: [ | |
| { | |
| type: "if", | |
| js: "['signup', 'signin', 'forgotpass'].includes(props.mode)", | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 2768808, | |
| attributes: | |
| "{\n value: email,\n type: 'email',\n placeholder: 'Email',\n\terror: showErrors && getError('email'),\n onChange: (value) => setEmail(value)\n}", | |
| id: 7961212 | |
| } | |
| ], | |
| id: 9069362 | |
| }, | |
| { | |
| type: "if", | |
| js: "['signup', 'signin', 'changepass'].includes(props.mode)", | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 2768808, | |
| attributes: | |
| "{\n value: pass,\n type: 'password',\n placeholder: 'Password',\n\terror: showErrors && getError('pass'),\n onChange: (value) => setPass(value)\n}", | |
| id: 5398172 | |
| } | |
| ], | |
| id: 6566228 | |
| }, | |
| { | |
| type: "if", | |
| js: "['signup', 'changepass'].includes(props.mode)", | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 2768808, | |
| attributes: | |
| "{\n value: confirmPass,\n type: 'password',\n placeholder: 'Confirm Password',\n\terror: showErrors && getError('confirmPass'),\n onChange: (value) => setConfirmPass(value)\n}", | |
| id: 361947 | |
| } | |
| ], | |
| id: 7858956 | |
| }, | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["field"], | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "p", | |
| classNames: ["control", ""], | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 8669042, | |
| attributes: | |
| "{\n\tparentColor: props.parentColor,\n size: \"medium\",\n fullWidth: true,\n state: props.status && \n \t\t\tprops.status.type === \"pending\" ?\n\t\t\t\t\t\t'loading' : 'normal'\n}", | |
| children: [ | |
| { | |
| type: "text", | |
| text: "{props.buttonText}", | |
| id: 7223197 | |
| } | |
| ], | |
| id: 9599909 | |
| } | |
| ], | |
| id: 1976494 | |
| } | |
| ], | |
| name: "Submit", | |
| id: 2933438 | |
| }, | |
| { | |
| type: "if", | |
| js: "['signup', 'signin'].includes(props.mode)", | |
| id: 4019975, | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["has-text-centered"], | |
| children: [ | |
| { | |
| type: "if", | |
| js: 'props.mode === "signup"', | |
| children: [ | |
| { | |
| type: "text", | |
| text: "Have an account already?", | |
| id: 405129 | |
| }, | |
| { | |
| type: "element", | |
| tagName: "a", | |
| children: [ | |
| { type: "text", text: "Sign in", id: 5532821 } | |
| ], | |
| attributes: "{\n href: '/signin'\n}", | |
| id: 3021224 | |
| } | |
| ], | |
| id: 1718561 | |
| }, | |
| { | |
| type: "if", | |
| js: "props.mode === 'signin'", | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "a", | |
| children: [ | |
| { | |
| type: "text", | |
| text: "Create an account", | |
| id: 119509 | |
| } | |
| ], | |
| attributes: "{\n href: '/signup'\n}", | |
| id: 3288573 | |
| }, | |
| { | |
| type: "element", | |
| tagName: "a", | |
| attributes: "{\n href: '/forgotpass'\n}", | |
| children: [ | |
| { | |
| type: "text", | |
| text: "Forgot password", | |
| id: 5157568 | |
| } | |
| ], | |
| id: 6632095 | |
| } | |
| ], | |
| id: 4822433 | |
| } | |
| ], | |
| name: "Bottom Link", | |
| style: | |
| "margin-top: 1rem;\nfont-size: 0.9rem;\na {\n margin: 0 0.5rem;\n}", | |
| id: 1854125 | |
| } | |
| ] | |
| } | |
| ], | |
| attributes: | |
| "{\n onSubmit: (e) => {\n e.preventDefault();\n handleSubmit();\n }\n}", | |
| id: 6086474 | |
| } | |
| ], | |
| style: "width: 100%;\nmax-width: 450px;\nmargin: 0 auto;", | |
| id: 5859175 | |
| } | |
| ] | |
| }, | |
| { | |
| type: "component", | |
| name: "Sign In Section", | |
| id: 2902377, | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 1079246, | |
| attributes: "{\n\tcolor: props.color,\n size: props.size\n}", | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["container"], | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 5415335, | |
| attributes: | |
| "{\n\ttitle: props.title,\n subtitle: props.subtitle,\n centered: true,\n // value from 1-6\n size: 3\n}", | |
| id: 5988133 | |
| }, | |
| { | |
| type: "instance", | |
| componentId: 6850885, | |
| attributes: | |
| "{\n buttonText: props.buttonText,\n parentColor: props.color,\n onSignin: onSignin\n}", | |
| id: 2737557 | |
| } | |
| ], | |
| id: 9088759 | |
| } | |
| ], | |
| id: 3089850 | |
| } | |
| ], | |
| code: | |
| "\t// Go to page after signin\n const onSignin = () => {\n router.push('/dashboard');\n }\n ", | |
| tags: ["Signup"] | |
| }, | |
| { | |
| type: "component", | |
| name: "Sign In", | |
| code: | |
| '\tconst auth = useAuth();\n\tconst [status, setStatus] = useState();\n \n const onSubmit = ({ email, pass }) => {\n setStatus({ type: "pending" });\n \tauth.signin(email, pass)\n \t.then(user => {\n \tprops.onSignin && props.onSignin();\n \t})\n .catch(error => {\n \tsetStatus({\n \ttype: "error",\n message: error.message\n \t});\n \t\t});\n }\n ', | |
| id: 6850885, | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 63699, | |
| attributes: | |
| "{\n mode: 'signin',\n buttonText: props.buttonText,\n parentColor: props.parentColor,\n onSubmit: onSubmit,\n status: status\n}", | |
| id: 9415858 | |
| } | |
| ] | |
| }, | |
| { | |
| type: "component", | |
| subtype: "page-component", | |
| path: "signup", | |
| id: 4305746, | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 6969772, | |
| attributes: | |
| '{\n // primary, link, info, success, warning, \n // danger, white, light, dark, black\n color: "white",\n // normal, medium, large\n size: "large",\n\ttitle: "Get yourself an account",\n subtitle: "",\n buttonText: "Sign up",\n}', | |
| id: 5045478 | |
| } | |
| ] | |
| }, | |
| { | |
| type: "component", | |
| name: "Sign Up Section", | |
| id: 6969772, | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 1079246, | |
| attributes: "{\n\tcolor: props.color,\n size: props.size\n}", | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["container"], | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 5415335, | |
| attributes: | |
| "{\n\ttitle: props.title,\n subtitle: props.subtitle,\n centered: true,\n // value from 1-6\n size: 3\n}", | |
| id: 8892414 | |
| }, | |
| { | |
| type: "instance", | |
| componentId: 6300485, | |
| attributes: | |
| "{\n\tbuttonText: props.buttonText,\n parentColor: props.color,\n onSignup: onSignup\n}", | |
| id: 1730012 | |
| } | |
| ], | |
| id: 6557236 | |
| } | |
| ], | |
| id: 3466550 | |
| } | |
| ], | |
| code: | |
| "\t// Go to page after signup\n const onSignup = () => {\n \trouter.push('/dashboard');\n }\n ", | |
| tags: ["Signup"] | |
| }, | |
| { | |
| type: "component", | |
| name: "Sign Up", | |
| code: | |
| '\tconst auth = useAuth();\n\tconst [status, setStatus] = useState();\n \n const onSubmit = ({ email, pass }) => {\n setStatus({ type: "pending" });\n auth.signup(email, pass)\n \t.then(user => {\n \tprops.onSignup && props.onSignup();\n \t})\n .catch(error => {\n \tsetStatus({\n \ttype: "error",\n message: error.message\n \t});\n \t});\n }\n ', | |
| id: 6300485, | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 63699, | |
| attributes: | |
| '{\n mode: "signup",\n buttonText: props.buttonText,\n parentColor: props.parentColor,\n onSubmit: onSubmit,\n status: status\n}', | |
| id: 3564542 | |
| } | |
| ] | |
| }, | |
| { | |
| type: "component", | |
| subtype: "page-component", | |
| path: "forgotpass", | |
| id: 5642556, | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 4632703, | |
| attributes: | |
| '{\n // primary, link, info, success, warning, \n // danger, white, light, dark, black\n\tcolor: "white",\n // normal, medium, large\n size: "large",\n\ttitle: "Get a new password",\n subtitle: "",\n buttonText: "Reset password",\n}', | |
| id: 377481 | |
| } | |
| ] | |
| }, | |
| { | |
| type: "component", | |
| name: "Forgot Pass Section", | |
| id: 4632703, | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 1079246, | |
| attributes: "{\n\tcolor: props.color,\n size: props.size\n}", | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["container"], | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 5415335, | |
| attributes: | |
| "{\n\ttitle: props.title,\n subtitle: props.subtitle,\n centered: true,\n // value from 1-6\n size: 3\n}", | |
| id: 4448198 | |
| }, | |
| { | |
| type: "instance", | |
| componentId: 8572589, | |
| attributes: | |
| "{\n\tbuttonText: props.buttonText,\n parentColor: props.color\n}", | |
| id: 5133597 | |
| } | |
| ], | |
| id: 8356221 | |
| } | |
| ], | |
| id: 3563592 | |
| } | |
| ], | |
| tags: ["Signup"] | |
| }, | |
| { | |
| type: "component", | |
| name: "Forgot Pass", | |
| id: 8572589, | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 63699, | |
| attributes: | |
| "{\n mode: 'forgotpass',\n buttonText: props.buttonText,\n parentColor: props.parentColor,\n onSubmit: onSubmit,\n status: status\n}", | |
| id: 9813654 | |
| } | |
| ], | |
| code: | |
| '\tconst auth = useAuth();\n\tconst [status, setStatus] = useState();\n\n\tconst onSubmit = ({ email }) => {\n setStatus({ type: "pending" });\n \tauth\n \t\t.sendPasswordResetEmail(email)\n .then(() => {\n setStatus({\n type: "success",\n message: "Password reset email sent"\n });\n })\n .catch(error => {\n setStatus({\n type: "error",\n message: error.message\n });\n });\n\t}\n' | |
| }, | |
| { | |
| type: "component", | |
| subtype: "page-component", | |
| path: "changepass", | |
| id: 83283, | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 1634806, | |
| attributes: | |
| '{\n // primary, link, info, success, warning, \n // danger, white, light, dark, black\n\tcolor: "white",\n // normal, medium, large\n size: "large",\n\ttitle: "Choose a new password",\n subtitle: "",\n buttonText: "Change password",\n}', | |
| id: 3926652 | |
| } | |
| ] | |
| }, | |
| { | |
| type: "component", | |
| name: "Change Pass Section", | |
| id: 1634806, | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 1079246, | |
| attributes: "{\n\tcolor: props.color,\n size: props.size\n}", | |
| children: [ | |
| { | |
| type: "element", | |
| tagName: "div", | |
| classNames: ["container"], | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 5415335, | |
| attributes: | |
| "{\n\ttitle: props.title,\n subtitle: props.subtitle,\n centered: true,\n // value from 1-6\n size: 3\n}", | |
| id: 4614658 | |
| }, | |
| { | |
| type: "instance", | |
| componentId: 2683725, | |
| attributes: | |
| "{\n buttonText: props.buttonText,\n parentColor: props.color\n}", | |
| id: 5378004 | |
| } | |
| ], | |
| id: 3025936 | |
| } | |
| ], | |
| id: 7758873 | |
| } | |
| ], | |
| tags: ["Signup"] | |
| }, | |
| { | |
| type: "component", | |
| name: "Change Pass", | |
| code: | |
| '\tconst auth = useAuth();\n\tconst [status, setStatus] = useState();\n \n const onSubmit = ({ pass }) => {\n setStatus({ type: "pending" });\n auth\n \t.confirmPasswordReset(pass)\n \t.then(() => {\n \tsetStatus({\n \ttype: "success",\n message: "Your password has been changed"\n });\n \t})\n \t.catch(error => {\n setStatus({\n \ttype: "error",\n message: error.message\n });\n \t});\n }\n ', | |
| id: 2683725, | |
| children: [ | |
| { | |
| type: "instance", | |
| componentId: 63699, | |
| attributes: | |
| "{\n mode: 'changepass',\n buttonText: props.buttonText,\n parentColor: props.parentColor,\n onSubmit: onSubmit,\n status: status\n}", | |
| id: 340607 | |
| } | |
| ] | |
| } | |
| ] | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment