{ "data": [ { "type": "instance", "subtype": "app-instance", "componentId": "app", "id": 4010090, "isVisible": true, "children": [] } ], "components": [ { "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, "isVisible": true, "image": "", "name": "", "classNameExpressions": [], "style": "", "children": [], "propsArray": [ { "key": "src", "value": "props.logo", "isString": false, "type": "MemberExpression" }, { "key": "alt", "value": "Logo", "isString": true, "type": "StringLiteral" } ] } ], "id": 2503295, "isVisible": true, "image": "", "name": "", "classNames": [], "classNameExpressions": [], "style": "", "propsArray": [ { "key": "href", "value": "/", "isString": true, "type": "StringLiteral" } ] } ], "id": 1945490, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] }, { "type": "element", "tagName": "div", "children": [ { "type": "element", "tagName": "span", "id": 4597590, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNames": [], "classNameExpressions": [], "style": "", "children": [], "propsArray": [] }, { "type": "element", "tagName": "span", "id": 3843238, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNames": [], "classNameExpressions": [], "style": "", "children": [], "propsArray": [] }, { "type": "element", "tagName": "span", "id": 5574078, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNames": [], "classNameExpressions": [], "style": "", "children": [], "propsArray": [] } ], "classNames": [ "navbar-burger", "burger" ], "attributes": "{\n onClick: () => setMenuOpen(!menuOpen)\n}", "classNameExpressions": [ { "js": "menuOpen", "classNames": [ "is-active" ] } ], "id": 3211285, "isVisible": true, "image": "", "name": "", "style": "", "propsArray": [ { "key": "onClick", "value": "() => setMenuOpen(!menuOpen)", "isString": false, "type": "ArrowFunctionExpression" } ] } ], "id": 1224919, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] }, { "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, "isVisible": true, "children": [] } ], "classNames": [ "navbar-link" ], "id": 9738087, "isVisible": true, "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [ { "key": "href", "value": "/", "isString": true, "type": "StringLiteral" } ] }, { "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, "isVisible": true, "children": [] } ], "classNames": [ "navbar-item" ], "id": 2586971, "isVisible": true, "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [ { "key": "href", "value": "/dashboard", "isString": true, "type": "StringLiteral" } ] }, { "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, "isVisible": true, "children": [] } ], "classNames": [ "navbar-item" ], "id": 8221397, "isVisible": true, "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [ { "key": "href", "value": "/signout", "isString": true, "type": "StringLiteral" }, { "key": "onClick", "value": "(e) => {\n e.preventDefault();\n auth.signout();\n}", "isString": false, "type": "ArrowFunctionExpression" } ] } ], "id": 3892263, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] } ], "id": 2746102, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] } ], "id": 3173739, "isVisible": true }, { "type": "if", "js": "!auth.user", "children": [ { "type": "element", "tagName": "a", "attributes": "{\n href: '/signin'\n}", "children": [ { "type": "text", "text": "Sign in", "id": 7986864, "isVisible": true, "children": [] } ], "classNames": [ "navbar-item" ], "id": 5577253, "isVisible": true, "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [ { "key": "href", "value": "/signin", "isString": true, "type": "StringLiteral" } ] } ], "id": 6673849, "isVisible": true } ], "id": 916218, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] } ], "classNameExpressions": [ { "js": "menuOpen", "classNames": [ "is-active" ] } ], "id": 753773, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "style": "", "propsArray": [] } ], "id": 9875662, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] } ], "id": 1027311, "isVisible": true, "propsArray": [ { "key": "spaced", "value": "props.spaced", "isString": false, "type": "MemberExpression" }, { "key": "color", "value": "props.color", "isString": false, "type": "MemberExpression" } ] } ], "code": "\tconst auth = useAuth(); \n\tconst [menuOpen, setMenuOpen] = useState(false);\n \n ", "tags": [ "Navigation" ], "isVisible": true, "nameLibrary": "", "description": "", "nameFormatted": "Navbar", "nameStyleModule": "NavbarComponent", "modulePath": "src/components/Navbar" }, { "type": "component", "name": "Navbar Container", "id": 3871614, "children": [ { "type": "element", "tagName": "nav", "classNames": [ "navbar" ], "children": [ { "type": "children", "id": 3170614, "isVisible": true, "children": [] } ], "classNameExpressions": [ { "js": "props.color", "classNames": [ "is-{props.color}" ] }, { "js": "props.spaced", "classNames": [ "is-spaced" ] } ], "id": 6664260, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "style": "", "propsArray": [] } ], "isVisible": true, "nameLibrary": "", "description": "", "tags": [], "code": "", "nameFormatted": "NavbarContainer", "nameStyleModule": "NavbarContainer", "modulePath": "src/components/NavbarContainer" }, { "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, "isVisible": true, "children": [], "propsArray": [ { "key": "image", "value": "backgroundImage", "isString": false, "type": "Identifier" }, { "key": "opacity", "value": "backgroundImageOpacity", "isString": false, "type": "Identifier" } ] } ], "id": 4689902, "isVisible": true }, { "type": "children", "id": 6313629, "isVisible": true, "children": [] } ], "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, "isVisible": true, "image": "", "name": "", "propsArray": [ { "key": null, "value": "otherProps", "isString": false, "type": "SpreadElement" } ] } ], "code": "\tconst {\n color, \n size, \n backgroundImage,\n backgroundImageOpacity,\n children,\n // Passed to section element\n ...otherProps \n } = props;\n", "isVisible": true, "nameLibrary": "", "description": "", "tags": [], "nameFormatted": "Section", "nameStyleModule": "SectionComponent", "modulePath": "src/components/Section" }, { "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, "isVisible": true, "children": [], "propsArray": [ { "key": "title", "value": "props.title", "isString": false, "type": "MemberExpression" }, { "key": "subtitle", "value": "props.subtitle", "isString": false, "type": "MemberExpression" }, { "key": "size", "value": "1", "isString": false, "type": "NumericLiteral" } ] }, { "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, "isVisible": true, "children": [] } ], "id": 9572835, "isVisible": true, "propsArray": [ { "key": "parentColor", "value": "props.color", "isString": false, "type": "MemberExpression" }, { "key": "size", "value": "medium", "isString": true, "type": "StringLiteral" }, { "key": "onClick", "value": "props.buttonOnClick", "isString": false, "type": "MemberExpression" } ] } ], "id": 6733235, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] }, { "type": "element", "tagName": "div", "classNames": [ "column", "is-1" ], "name": "Spacer", "id": 8571842, "isVisible": true, "attributes": "{\n\n}", "image": "", "classNameExpressions": [], "style": "", "children": [], "propsArray": [] }, { "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, "isVisible": true, "image": "", "name": "", "classNames": [], "classNameExpressions": [], "style": "", "children": [], "propsArray": [ { "key": "src", "value": "props.image", "isString": false, "type": "MemberExpression" }, { "key": "alt", "value": "Illustration", "isString": true, "type": "StringLiteral" } ] } ], "style": "margin: 0 auto;\nmax-width: 570px;", "id": 6832296, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "propsArray": [] } ], "id": 6527102, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] } ], "id": 3243841, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] } ], "id": 580002, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] } ], "id": 8181092, "isVisible": true, "propsArray": [ { "key": "color", "value": "props.color", "isString": false, "type": "MemberExpression" }, { "key": "size", "value": "props.size", "isString": false, "type": "MemberExpression" } ] } ], "tags": [ "Popular", "Hero" ], "isVisible": true, "nameLibrary": "", "description": "", "code": "", "nameFormatted": "HeroSection", "nameStyleModule": "HeroSection", "modulePath": "src/components/HeroSection" }, { "type": "component", "name": "Section Button", "id": 8669042, "children": [ { "type": "element", "tagName": "button", "classNames": [ "button" ], "children": [ { "type": "children", "id": 776571, "isVisible": true, "children": [] } ], "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, "isVisible": true, "image": "", "name": "", "style": "", "propsArray": [ { "key": null, "value": "otherProps", "isString": false, "type": "SpreadElement" } ] } ], "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", "isVisible": true, "nameLibrary": "", "tags": [], "nameFormatted": "SectionButton", "nameStyleModule": "SectionButton", "modulePath": "src/components/SectionButton" }, { "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, "isVisible": true, "children": [] } ], "classNameExpressions": [ { "js": "props.size", "classNames": [ "is-{props.size}" ] }, { "js": "props.size === 1", "classNames": [ "is-size-2-mobile" ] } ], "id": 5428871, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "style": "", "propsArray": [] } ], "isVisible": true }, { "type": "if", "js": "props.subtitle", "children": [ { "type": "element", "tagName": "p", "classNames": [ "subtitle" ], "children": [ { "type": "text", "text": "{props.subtitle}", "id": 4050505, "isVisible": true, "children": [] } ], "id": 2045497, "classNameExpressions": [ { "js": "props.size > 4", "classNames": [ "is-6" ] } ], "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "style": "", "propsArray": [] } ], "id": 4428299, "isVisible": true } ], "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", "isVisible": true, "attributes": "{\n\n}", "image": "", "classNames": [], "propsArray": [] } ], "isVisible": true } ], "isVisible": true, "nameLibrary": "", "description": "", "tags": [], "code": "", "nameFormatted": "SectionHeader", "nameStyleModule": "SectionHeader", "modulePath": "src/components/SectionHeader" }, { "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, "isVisible": true, "image": "", "name": "", "classNames": [], "classNameExpressions": [], "children": [], "propsArray": [ { "key": "style", "value": "{\n '--image': `url(${props.image})`,\n '--opacity': props.opacity\n}", "isString": false, "type": "ObjectExpression" } ] } ], "isVisible": true, "nameLibrary": "", "description": "", "tags": [], "code": "", "nameFormatted": "BackgroundImage", "nameStyleModule": "BackgroundImage", "modulePath": "src/components/BackgroundImage" }, { "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, "isVisible": true, "children": [], "propsArray": [ { "key": "title", "value": "props.title", "isString": false, "type": "MemberExpression" }, { "key": "subtitle", "value": "props.subtitle", "isString": false, "type": "MemberExpression" }, { "key": "centered", "value": "true", "isString": false, "type": "BooleanLiteral" }, { "key": "size", "value": "3", "isString": false, "type": "NumericLiteral" } ] }, { "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, "isVisible": true, "children": [], "propsArray": [ { "key": "items", "value": "[\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]", "isString": false, "type": "ArrayExpression" } ] } ], "id": 2018945, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] } ], "id": 1636201, "isVisible": true, "propsArray": [ { "key": "color", "value": "props.color", "isString": false, "type": "MemberExpression" }, { "key": "size", "value": "props.size", "isString": false, "type": "MemberExpression" } ] } ], "tags": [ "Clients", "Popular" ], "isVisible": true, "nameLibrary": "", "description": "", "code": "", "nameFormatted": "ClientsSection", "nameStyleModule": "ClientsSection", "modulePath": "src/components/ClientsSection" }, { "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, "isVisible": true, "image": "", "name": "", "classNames": [], "classNameExpressions": [], "style": "", "children": [], "propsArray": [ { "key": "src", "value": "item.image", "isString": false, "type": "MemberExpression" }, { "key": "width", "value": "item.width", "isString": false, "type": "MemberExpression" }, { "key": "alt", "value": "item.name", "isString": false, "type": "MemberExpression" } ] } ], "name": "Logo", "id": 4646506, "isVisible": true, "attributes": "{\n\n}", "image": "", "classNames": [], "classNameExpressions": [], "propsArray": [] } ], "attributes": "{\n key: index\n}", "id": 6330706, "isVisible": true, "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [ { "key": "key", "value": "index", "isString": false, "type": "Identifier" } ] } ], "id": 2176993, "isVisible": true, "objectType": "array" } ], "id": 2434375, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] } ], "isVisible": true, "nameLibrary": "", "description": "", "tags": [], "code": "", "nameFormatted": "Clients", "nameStyleModule": "Clients", "modulePath": "src/components/Clients" }, { "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, "isVisible": true, "children": [], "propsArray": [ { "key": "title", "value": "props.title", "isString": false, "type": "MemberExpression" }, { "key": "subtitle", "value": "props.subtitle", "isString": false, "type": "MemberExpression" }, { "key": "centered", "value": "true", "isString": false, "type": "BooleanLiteral" }, { "key": "size", "value": "3", "isString": false, "type": "NumericLiteral" } ] }, { "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, "isVisible": true, "children": [], "propsArray": [ { "key": "items", "value": "[\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]", "isString": false, "type": "ArrayExpression" } ] } ], "id": 2630198, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] } ], "id": 7879233, "isVisible": true, "propsArray": [ { "key": "color", "value": "props.color", "isString": false, "type": "MemberExpression" }, { "key": "size", "value": "props.size", "isString": false, "type": "MemberExpression" } ] } ], "tags": [ "Features", "Popular" ], "isVisible": true, "nameLibrary": "", "description": "", "code": "", "nameFormatted": "FeaturesSection", "nameStyleModule": "FeaturesSection", "modulePath": "src/components/FeaturesSection" }, { "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, "isVisible": true, "children": [] } ], "id": 9683929, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "propsArray": [] }, { "type": "element", "tagName": "p", "classNames": [ "subtitle" ], "children": [ { "type": "text", "text": "{item.description}", "id": 4810067, "isVisible": true, "children": [] } ], "id": 1911482, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] } ], "id": 836366, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] }, { "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, "isVisible": true, "image": "", "name": "", "classNames": [], "classNameExpressions": [], "style": "", "children": [], "propsArray": [ { "key": "src", "value": "item.image", "isString": false, "type": "MemberExpression" }, { "key": "alt", "value": "item.title", "isString": false, "type": "MemberExpression" } ] } ], "id": 2009629, "style": "max-width: 300px;\nmargin: 30px auto;", "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "propsArray": [] } ], "id": 5005051, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] } ], "id": 7839467, "attributes": "{\n\tkey: index\n}", "isVisible": true, "image": "", "name": "", "classNameExpressions": [], "propsArray": [ { "key": "key", "value": "index", "isString": false, "type": "Identifier" } ] } ], "id": 426775, "isVisible": true, "objectType": "array" } ], "id": 2124975, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNames": [], "classNameExpressions": [], "propsArray": [] } ], "isVisible": true, "nameLibrary": "", "description": "", "tags": [], "code": "", "nameFormatted": "Features", "nameStyleModule": "Features", "modulePath": "src/components/Features" }, { "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, "isVisible": true, "children": [], "propsArray": [ { "key": "title", "value": "props.title", "isString": false, "type": "MemberExpression" }, { "key": "subtitle", "value": "props.subtitle", "isString": false, "type": "MemberExpression" }, { "key": "centered", "value": "true", "isString": false, "type": "BooleanLiteral" }, { "key": "size", "value": "3", "isString": false, "type": "NumericLiteral" } ] }, { "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, "isVisible": true, "children": [], "propsArray": [ { "key": "items", "value": "[\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]", "isString": false, "type": "ArrayExpression" } ] } ], "id": 9651265, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] } ], "id": 1543239, "isVisible": true, "propsArray": [ { "key": "color", "value": "props.color", "isString": false, "type": "MemberExpression" }, { "key": "size", "value": "props.size", "isString": false, "type": "MemberExpression" } ] } ], "tags": [ "Testimonials" ], "isVisible": true, "nameLibrary": "", "description": "", "code": "", "nameFormatted": "TestimonialsSection", "nameStyleModule": "TestimonialsSection", "modulePath": "src/components/TestimonialsSection" }, { "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, "isVisible": true, "children": [], "propsArray": [ { "key": "image", "value": "item.avatar", "isString": false, "type": "MemberExpression" }, { "key": "size", "value": "96", "isString": false, "type": "NumericLiteral" }, { "key": "alt", "value": "item.name", "isString": false, "type": "MemberExpression" } ] } ], "id": 3316611, "isVisible": true, "attributes": "{\n\n}", "image": "", "classNames": [], "classNameExpressions": [], "propsArray": [] }, { "type": "element", "tagName": "p", "name": "Quote", "style": "margin-top: 30px;", "children": [ { "type": "text", "text": "\"{item.bio}\"", "id": 1711314, "isVisible": true, "children": [] } ], "id": 5568984, "isVisible": true, "attributes": "{\n\n}", "image": "", "classNames": [], "classNameExpressions": [], "propsArray": [] }, { "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, "isVisible": true, "children": [] } ], "id": 385562, "isVisible": true, "attributes": "{\n\n}", "image": "", "classNameExpressions": [], "style": "", "propsArray": [] }, { "type": "element", "tagName": "div", "name": "Company", "classNames": [ "link", "is-size-7" ], "children": [ { "type": "text", "text": "{item.company}", "id": 2567670, "isVisible": true, "children": [] } ], "style": "margin-top: 3px;", "id": 7909141, "isVisible": true, "attributes": "{\n\n}", "image": "", "classNameExpressions": [], "propsArray": [] } ], "id": 7396980, "isVisible": true, "attributes": "{\n\n}", "image": "", "classNames": [], "classNameExpressions": [], "propsArray": [] } ], "id": 987401, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "propsArray": [] } ], "id": 3219495, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "propsArray": [] } ], "id": 8349892, "attributes": "{\n\tkey: index\n}", "isVisible": true, "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [ { "key": "key", "value": "index", "isString": false, "type": "Identifier" } ] } ], "id": 9087936, "indexName": "index", "isVisible": true, "objectType": "array" } ], "id": 6131369, "isVisible": true, "attributes": "{\n\n}", "propsArray": [] } ], "isVisible": true, "nameLibrary": "", "description": "", "tags": [], "code": "", "nameFormatted": "Testimonials", "nameStyleModule": "Testimonials", "modulePath": "src/components/Testimonials" }, { "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, "isVisible": true, "children": [] } ], "id": 2388015, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] } ], "isVisible": true, "nameLibrary": "", "description": "", "tags": [], "code": "", "nameFormatted": "CenteredColumns", "nameStyleModule": "CenteredColumns", "modulePath": "src/components/CenteredColumns" }, { "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, "isVisible": true, "image": "", "name": "", "classNameExpressions": [], "style": "", "children": [], "propsArray": [ { "key": "src", "value": "image", "isString": false, "type": "Identifier" }, { "key": "alt", "value": "alt", "isString": false, "type": "Identifier" }, { "key": null, "value": "otherProps", "isString": false, "type": "SpreadElement" } ] } ], "id": 3545177, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "style": "", "propsArray": [] } ], "code": "\tconst { image, size, alt, ...otherProps } = props;\n", "isVisible": true, "nameLibrary": "", "description": "", "tags": [], "nameFormatted": "Avatar", "nameStyleModule": "Avatar", "modulePath": "src/components/Avatar" }, { "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, "isVisible": true, "image": "", "name": "", "classNames": [], "classNameExpressions": [], "style": "", "children": [], "propsArray": [ { "key": "src", "value": "props.logo", "isString": false, "type": "MemberExpression" }, { "key": "alt", "value": "Logo", "isString": true, "type": "StringLiteral" } ] } ], "id": 4753230, "isVisible": true, "image": "", "name": "", "classNames": [], "classNameExpressions": [], "style": "", "propsArray": [ { "key": "href", "value": "/", "isString": true, "type": "StringLiteral" } ] } ], "id": 6328584, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] }, { "type": "element", "tagName": "div", "classNames": [ "links", "right" ], "children": [ { "type": "element", "tagName": "a", "children": [ { "type": "text", "text": "About", "id": 4566084, "isVisible": true, "children": [] } ], "attributes": "{\n\thref: '/about'\n}", "id": 5142584, "isVisible": true, "image": "", "name": "", "classNames": [], "classNameExpressions": [], "style": "", "propsArray": [ { "key": "href", "value": "/about", "isString": true, "type": "StringLiteral" } ] }, { "type": "element", "tagName": "a", "children": [ { "type": "text", "text": "FAQ", "id": 41141, "isVisible": true, "children": [] } ], "attributes": "{\n\thref: '/faq',\n}", "id": 7264362, "isVisible": true, "image": "", "name": "", "classNames": [], "classNameExpressions": [], "style": "", "propsArray": [ { "key": "href", "value": "/faq", "isString": true, "type": "StringLiteral" } ] }, { "type": "element", "tagName": "a", "children": [ { "type": "text", "text": "Contact", "id": 9366721, "isVisible": true, "children": [] } ], "attributes": "{\n\thref: '/contact',\n}", "id": 2333053, "isVisible": true, "image": "", "name": "", "classNames": [], "classNameExpressions": [], "style": "", "propsArray": [ { "key": "href", "value": "/contact", "isString": true, "type": "StringLiteral" } ] }, { "type": "element", "tagName": "a", "children": [ { "type": "text", "text": "Blog", "id": 8263046, "isVisible": true, "children": [] } ], "attributes": "{\n target: \"_blank\",\n href: \"https://medium.com\",\n rel: \"noopener noreferrer\"\n}", "id": 5194689, "isVisible": true, "image": "", "name": "", "classNames": [], "classNameExpressions": [], "style": "", "propsArray": [ { "key": "target", "value": "_blank", "isString": true, "type": "StringLiteral" }, { "key": "href", "value": "https://medium.com", "isString": true, "type": "StringLiteral" }, { "key": "rel", "value": "noopener noreferrer", "isString": true, "type": "StringLiteral" } ] } ], "id": 847974, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] }, { "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, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "children": [], "propsArray": [] } ], "id": 3994074, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] } ], "attributes": "{\n\thref: 'https://twitter.com',\n\ttarget: '_blank',\n rel: 'noopener noreferrer'\n}", "id": 8489828, "isVisible": true, "image": "", "name": "", "classNames": [], "classNameExpressions": [], "style": "", "propsArray": [ { "key": "href", "value": "https://twitter.com", "isString": true, "type": "StringLiteral" }, { "key": "target", "value": "_blank", "isString": true, "type": "StringLiteral" }, { "key": "rel", "value": "noopener noreferrer", "isString": true, "type": "StringLiteral" } ] }, { "type": "element", "tagName": "a", "children": [ { "type": "element", "tagName": "span", "classNames": [ "icon" ], "children": [ { "type": "element", "tagName": "i", "classNames": [ "fab", "fa-facebook-f" ], "id": 8936496, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "children": [], "propsArray": [] } ], "id": 3232684, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] } ], "attributes": "{\n\thref: 'https://facebook.com',\n\ttarget: '_blank',\n rel: 'noopener noreferrer'\n}", "id": 7606899, "isVisible": true, "image": "", "name": "", "classNames": [], "classNameExpressions": [], "style": "", "propsArray": [ { "key": "href", "value": "https://facebook.com", "isString": true, "type": "StringLiteral" }, { "key": "target", "value": "_blank", "isString": true, "type": "StringLiteral" }, { "key": "rel", "value": "noopener noreferrer", "isString": true, "type": "StringLiteral" } ] }, { "type": "element", "tagName": "a", "children": [ { "type": "element", "tagName": "span", "classNames": [ "icon" ], "children": [ { "type": "element", "tagName": "i", "classNames": [ "fab", "fa-instagram" ], "id": 8331840, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "children": [], "propsArray": [] } ], "id": 2925991, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] } ], "attributes": "{\n\thref: 'https://instagram.com',\n\ttarget: '_blank',\n rel: 'noopener noreferrer'\n}", "id": 2600085, "isVisible": true, "image": "", "name": "", "classNames": [], "classNameExpressions": [], "style": "", "propsArray": [ { "key": "href", "value": "https://instagram.com", "isString": true, "type": "StringLiteral" }, { "key": "target", "value": "_blank", "isString": true, "type": "StringLiteral" }, { "key": "rel", "value": "noopener noreferrer", "isString": true, "type": "StringLiteral" } ] } ], "id": 617938, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] }, { "type": "element", "tagName": "div", "classNames": [ "copyright", "left" ], "children": [ { "type": "text", "text": "{props.copyright}", "id": 9660171, "isVisible": true, "children": [] } ], "id": 531660, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] } ], "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, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "propsArray": [] } ], "id": 4337160, "isVisible": true, "propsArray": [ { "key": "color", "value": "props.color", "isString": false, "type": "MemberExpression" }, { "key": "size", "value": "props.size", "isString": false, "type": "MemberExpression" } ] } ], "tags": [ "Footer", "Popular" ], "isVisible": true, "nameLibrary": "", "description": "", "code": "", "nameFormatted": "Footer", "nameStyleModule": "FooterComponent", "modulePath": "src/components/Footer" }, { "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: \"To Do App Beta\",\n subtitle: \"Keep things in order\",\n buttonText: \"Get Started\",\n image: 'https://uploads.divjoy.com/undraw-japan_ubgk.svg',\n buttonOnClick: () => {\n router.push('/pricing');\n }\n}", "id": 195077, "isVisible": true, "children": [], "propsArray": [ { "key": "color", "value": "white", "isString": true, "type": "StringLiteral" }, { "key": "size", "value": "medium", "isString": true, "type": "StringLiteral" }, { "key": "title", "value": "To Do App Beta", "isString": true, "type": "StringLiteral" }, { "key": "subtitle", "value": "Keep things in order", "isString": true, "type": "StringLiteral" }, { "key": "buttonText", "value": "Get Started", "isString": true, "type": "StringLiteral" }, { "key": "image", "value": "https://uploads.divjoy.com/undraw-japan_ubgk.svg", "isString": true, "type": "StringLiteral" }, { "key": "buttonOnClick", "value": "() => {\n router.push('/pricing');\n}", "isString": false, "type": "ArrowFunctionExpression" } ] }, { "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, "isVisible": true, "children": [], "propsArray": [ { "key": "color", "value": "light", "isString": true, "type": "StringLiteral" }, { "key": "size", "value": "normal", "isString": true, "type": "StringLiteral" }, { "key": "title", "value": "", "isString": true, "type": "StringLiteral" }, { "key": "subtitle", "value": "", "isString": true, "type": "StringLiteral" } ] }, { "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, "isVisible": true, "children": [], "propsArray": [ { "key": "color", "value": "white", "isString": true, "type": "StringLiteral" }, { "key": "size", "value": "medium", "isString": true, "type": "StringLiteral" }, { "key": "title", "value": "Features", "isString": true, "type": "StringLiteral" }, { "key": "subtitle", "value": "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.", "isString": true, "type": "StringLiteral" } ] }, { "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, "isVisible": true, "children": [], "propsArray": [ { "key": "color", "value": "light", "isString": true, "type": "StringLiteral" }, { "key": "size", "value": "medium", "isString": true, "type": "StringLiteral" }, { "key": "title", "value": "Here's what people are saying", "isString": true, "type": "StringLiteral" }, { "key": "subtitle", "value": "", "isString": true, "type": "StringLiteral" } ] }, { "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, "isVisible": true, "children": [], "propsArray": [ { "key": "color", "value": "white", "isString": true, "type": "StringLiteral" }, { "key": "size", "value": "medium", "isString": true, "type": "StringLiteral" }, { "key": "title", "value": "Stay in the know", "isString": true, "type": "StringLiteral" }, { "key": "subtitle", "value": "Receive our latest articles and feature updates", "isString": true, "type": "StringLiteral" }, { "key": "buttonText", "value": "Subscribe", "isString": true, "type": "StringLiteral" }, { "key": "inputPlaceholder", "value": "Enter your email", "isString": true, "type": "StringLiteral" }, { "key": "subscribedMessage", "value": "You are now subscribed!", "isString": true, "type": "StringLiteral" } ] } ], "id": 1513260, "code": "\tconst router = useRouter();\n", "isVisible": true, "path": "", "nameFormatted": "IndexPage", "nameStyleModule": "IndexPage", "modulePath": "src/pages/index" }, { "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, "isVisible": true, "children": [], "propsArray": [ { "key": "color", "value": "primary", "isString": true, "type": "StringLiteral" }, { "key": "size", "value": "large", "isString": true, "type": "StringLiteral" }, { "key": "title", "value": "We help you make money", "isString": true, "type": "StringLiteral" }, { "key": "subtitle", "value": "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!", "isString": true, "type": "StringLiteral" } ] }, { "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, "isVisible": true, "children": [], "propsArray": [ { "key": "color", "value": "white", "isString": true, "type": "StringLiteral" }, { "key": "size", "value": "medium", "isString": true, "type": "StringLiteral" }, { "key": "title", "value": "Meet the Team", "isString": true, "type": "StringLiteral" }, { "key": "subtitle", "value": "", "isString": true, "type": "StringLiteral" } ] } ], "isVisible": true, "code": "", "nameFormatted": "AboutPage", "nameStyleModule": "AboutPage", "modulePath": "src/pages/about" }, { "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, "isVisible": true, "children": [], "propsArray": [ { "key": "title", "value": "props.title", "isString": false, "type": "MemberExpression" }, { "key": "subtitle", "value": "props.subtitle", "isString": false, "type": "MemberExpression" }, { "key": "centered", "value": "true", "isString": false, "type": "BooleanLiteral" }, { "key": "size", "value": "2", "isString": false, "type": "NumericLiteral" } ] } ], "id": 5744175, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] } ], "id": 9123185, "isVisible": true, "propsArray": [ { "key": "color", "value": "props.color", "isString": false, "type": "MemberExpression" }, { "key": "size", "value": "props.size", "isString": false, "type": "MemberExpression" }, { "key": "backgroundImage", "value": "props.backgroundImage", "isString": false, "type": "MemberExpression" }, { "key": "backgroundImageOpacity", "value": "props.backgroundImageOpacity", "isString": false, "type": "MemberExpression" } ] } ], "tags": [ "Content" ], "isVisible": true, "nameLibrary": "", "description": "", "code": "", "nameFormatted": "ContentSection", "nameStyleModule": "ContentSection", "modulePath": "src/components/ContentSection" }, { "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, "isVisible": true, "children": [], "propsArray": [ { "key": "title", "value": "props.title", "isString": false, "type": "MemberExpression" }, { "key": "subtitle", "value": "props.subtitle", "isString": false, "type": "MemberExpression" }, { "key": "centered", "value": "true", "isString": false, "type": "BooleanLiteral" }, { "key": "size", "value": "3", "isString": false, "type": "NumericLiteral" } ] }, { "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, "isVisible": true, "children": [], "propsArray": [ { "key": "people", "value": "[\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]", "isString": false, "type": "ArrayExpression" } ] } ], "id": 5420427, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] } ], "id": 4242966, "isVisible": true, "propsArray": [ { "key": "color", "value": "props.color", "isString": false, "type": "MemberExpression" }, { "key": "size", "value": "props.size", "isString": false, "type": "MemberExpression" } ] } ], "tags": [ "Popular", "Team" ], "isVisible": true, "nameLibrary": "", "description": "", "code": "", "nameFormatted": "TeamBiosSection", "nameStyleModule": "TeamBiosSection", "modulePath": "src/components/TeamBiosSection" }, { "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, "isVisible": true, "children": [], "propsArray": [ { "key": "image", "value": "person.avatar", "isString": false, "type": "MemberExpression" }, { "key": "size", "value": "128", "isString": false, "type": "NumericLiteral" }, { "key": "alt", "value": "person.name", "isString": false, "type": "MemberExpression" } ] } ], "id": 2904923, "isVisible": true, "attributes": "{\n\n}", "image": "", "classNames": [], "classNameExpressions": [], "propsArray": [] }, { "type": "element", "tagName": "div", "children": [ { "type": "element", "tagName": "p", "children": [ { "type": "text", "text": "{person.name}", "id": 830353, "isVisible": true, "children": [] } ], "name": "Name", "classNames": [ "is-size-5" ], "id": 5156861, "isVisible": true, "attributes": "{\n\n}", "image": "", "classNameExpressions": [], "style": "", "propsArray": [] }, { "type": "element", "tagName": "p", "children": [ { "type": "text", "text": "{person.role}", "id": 6516408, "isVisible": true, "children": [] } ], "name": "Role", "classNames": [ "is-size-7", "is-uppercase", "has-text-weight-semibold" ], "id": 8657684, "isVisible": true, "attributes": "{\n\n}", "image": "", "classNameExpressions": [], "style": "", "propsArray": [] }, { "type": "element", "tagName": "p", "children": [ { "type": "text", "text": "{person.bio}", "id": 4499683, "isVisible": true, "children": [] } ], "name": "Bio", "style": "margin-top: 20px;", "id": 9988572, "isVisible": true, "attributes": "{\n\n}", "image": "", "classNames": [], "classNameExpressions": [], "propsArray": [] } ], "name": "Details", "style": "margin-top: 20px;", "id": 7698527, "isVisible": true, "attributes": "{\n\n}", "image": "", "classNames": [], "classNameExpressions": [], "propsArray": [] } ], "style": "flex-direction: column;\nheight: 100%;\npadding: 1.8rem;", "id": 3357018, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "propsArray": [] } ], "style": "flex-direction: column;", "id": 6450664, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "propsArray": [] } ], "id": 287490, "attributes": "{\n\tkey: index\n}", "isVisible": true, "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [ { "key": "key", "value": "index", "isString": false, "type": "Identifier" } ] } ], "id": 3706765, "indexName": "index", "isVisible": true, "objectType": "array" } ], "id": 99593, "isVisible": true, "attributes": "{\n\n}", "propsArray": [] } ], "isVisible": true, "nameLibrary": "", "description": "", "tags": [], "code": "", "nameFormatted": "TeamBios", "nameStyleModule": "TeamBios", "modulePath": "src/components/TeamBios" }, { "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, "isVisible": true, "children": [] } ], "id": 5227180, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] }, { "type": "element", "tagName": "div", "classNames": [ "subtitle" ], "children": [ { "type": "text", "text": "{props.subtitle}", "id": 2994041, "isVisible": true, "children": [] } ], "id": 180416, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] } ], "id": 8254421, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] }, { "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}", "isVisible": true, "children": [], "propsArray": [ { "key": "parentColor", "value": "props.color", "isString": false, "type": "MemberExpression" }, { "key": "buttonText", "value": "props.buttonText", "isString": false, "type": "MemberExpression" }, { "key": "inputPlaceholder", "value": "props.inputPlaceholder", "isString": false, "type": "MemberExpression" }, { "key": "subscribedMessage", "value": "props.subscribedMessage", "isString": false, "type": "MemberExpression" }, { "key": "size", "value": "medium", "isString": true, "type": "StringLiteral" } ] } ], "id": 4936903, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] } ], "id": 3334129, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] } ], "id": 5195628, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] } ], "id": 6212138, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] } ], "id": 6031473, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] } ], "id": 8188011, "isVisible": true, "propsArray": [ { "key": "color", "value": "props.color", "isString": false, "type": "MemberExpression" }, { "key": "size", "value": "props.size", "isString": false, "type": "MemberExpression" } ] } ], "id": 74477, "code": " ", "tags": [ "Popular", "Newsletter" ], "isVisible": true, "nameLibrary": "", "description": "", "nameFormatted": "NewsletterSection", "nameStyleModule": "NewsletterSection", "modulePath": "src/components/NewsletterSection" }, { "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, "isVisible": true, "image": "", "name": "", "classNameExpressions": [], "style": "", "children": [], "propsArray": [ { "key": "type", "value": "email", "isString": true, "type": "StringLiteral" }, { "key": "placeholder", "value": "props.inputPlaceholder", "isString": false, "type": "MemberExpression" }, { "key": "onChange", "value": "(event) => setEmail(event.target.value)", "isString": false, "type": "ArrowFunctionExpression" } ] } ], "id": 5348542, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] }, { "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, "isVisible": true, "children": [] } ], "id": 7377433, "isVisible": true, "propsArray": [ { "key": "parentColor", "value": "props.parentColor", "isString": false, "type": "MemberExpression" }, { "key": "size", "value": "props.size", "isString": false, "type": "MemberExpression" }, { "key": "onClick", "value": "props.buttonOnClick", "isString": false, "type": "MemberExpression" } ] } ], "id": 568525, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] } ], "id": 4088219, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] } ], "id": 9147691, "isVisible": true, "image": "", "name": "", "classNames": [], "classNameExpressions": [], "style": "", "propsArray": [ { "key": "onSubmit", "value": "(e) => {\n e.preventDefault();\n handleSubmit();\n}", "isString": false, "type": "ArrowFunctionExpression" } ] } ], "id": 2699611, "isVisible": true }, { "type": "if", "js": "subscribed === true", "children": [ { "type": "text", "text": "{props.subscribedMessage}", "id": 813004, "isVisible": true, "children": [] } ], "id": 3854440, "isVisible": true } ], "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 ", "isVisible": true, "nameLibrary": "", "description": "", "tags": [], "nameFormatted": "Newsletter", "nameStyleModule": "Newsletter", "modulePath": "src/components/Newsletter" }, { "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, "isVisible": true, "children": [], "propsArray": [ { "key": "color", "value": "white", "isString": true, "type": "StringLiteral" }, { "key": "size", "value": "medium", "isString": true, "type": "StringLiteral" }, { "key": "title", "value": "Frequently Asked Questions", "isString": true, "type": "StringLiteral" }, { "key": "subtitle", "value": "", "isString": true, "type": "StringLiteral" } ] } ], "isVisible": true, "code": "", "nameFormatted": "FaqPage", "nameStyleModule": "FaqPage", "modulePath": "src/pages/faq" }, { "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, "isVisible": true, "children": [], "propsArray": [ { "key": "title", "value": "props.title", "isString": false, "type": "MemberExpression" }, { "key": "subtitle", "value": "props.subtitle", "isString": false, "type": "MemberExpression" }, { "key": "centered", "value": "true", "isString": false, "type": "BooleanLiteral" }, { "key": "size", "value": "3", "isString": false, "type": "NumericLiteral" } ] }, { "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, "isVisible": true, "children": [], "propsArray": [ { "key": "items", "value": "[\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]", "isString": false, "type": "ArrayExpression" } ] } ], "id": 1107442, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] } ], "id": 3382393, "isVisible": true, "propsArray": [ { "key": "color", "value": "props.color", "isString": false, "type": "MemberExpression" }, { "key": "size", "value": "props.size", "isString": false, "type": "MemberExpression" } ] } ], "tags": [ "FAQ", "Popular" ], "isVisible": true, "nameLibrary": "", "description": "", "code": "", "nameFormatted": "FaqSection", "nameStyleModule": "FaqSection", "modulePath": "src/components/FaqSection" }, { "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 key: index\n}", "id": 3188134, "isVisible": true, "children": [], "propsArray": [ { "key": "question", "value": "item.question", "isString": false, "type": "MemberExpression" }, { "key": "answer", "value": "item.answer", "isString": false, "type": "MemberExpression" }, { "key": "key", "value": "index", "isString": false, "type": "Identifier" } ] } ], "id": 3564997, "indexName": "index", "isVisible": true, "objectType": "array" } ], "isVisible": true, "nameLibrary": "", "description": "", "tags": [], "code": "", "nameFormatted": "Faq", "nameStyleModule": "Faq", "modulePath": "src/components/Faq" }, { "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, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "style": "", "children": [], "propsArray": [] } ], "style": "margin-right: 1rem;", "id": 6314855, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "propsArray": [] }, { "type": "text", "text": "{props.question}", "id": 6690297, "isVisible": true, "children": [] } ], "id": 3811440, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] }, { "type": "if", "js": "expanded", "children": [ { "type": "element", "tagName": "div", "classNames": [ "subtitle" ], "children": [ { "type": "text", "text": "{props.answer}", "id": 3624243, "isVisible": true, "children": [] } ], "id": 6329152, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] } ], "id": 9458739, "isVisible": true } ], "id": 6868745, "isVisible": true, "image": "", "name": "", "classNames": [], "classNameExpressions": [], "propsArray": [ { "key": "onClick", "value": "() => setExpanded(!expanded)", "isString": false, "type": "ArrowFunctionExpression" } ] } ], "isVisible": true, "nameLibrary": "", "description": "", "tags": [], "nameFormatted": "FaqItem", "nameStyleModule": "FaqItem", "modulePath": "src/components/FaqItem" }, { "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, "isVisible": true, "children": [], "propsArray": [ { "key": "title", "value": "props.title", "isString": false, "type": "MemberExpression" }, { "key": "subtitle", "value": "props.subtitle", "isString": false, "type": "MemberExpression" }, { "key": "centered", "value": "true", "isString": false, "type": "BooleanLiteral" }, { "key": "size", "value": "3", "isString": false, "type": "NumericLiteral" } ] }, { "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, "isVisible": true, "children": [], "propsArray": [ { "key": "buttonText", "value": "Choose", "isString": true, "type": "StringLiteral" }, { "key": "onChoosePlan", "value": "(planId) => {\n // Add your own payments logic here\n alert(`You chose the plan \"${planId}\"`);\n}", "isString": false, "type": "ArrowFunctionExpression" }, { "key": "items", "value": "[\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]", "isString": false, "type": "ArrayExpression" } ] } ], "style": "max-width: 800px;", "id": 5908858, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "propsArray": [] } ], "id": 6822629, "isVisible": true, "propsArray": [ { "key": "color", "value": "props.color", "isString": false, "type": "MemberExpression" }, { "key": "size", "value": "props.size", "isString": false, "type": "MemberExpression" }, { "key": "id", "value": "pricing", "isString": true, "type": "StringLiteral" } ] } ], "tags": [ "Pricing", "Popular" ], "isVisible": true, "nameLibrary": "", "description": "", "code": "", "nameFormatted": "PricingSection", "nameStyleModule": "PricingSection", "modulePath": "src/components/PricingSection" }, { "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, "isVisible": true, "children": [] } ], "name": "Period", "id": 2393390, "isVisible": true, "attributes": "{\n\n}", "image": "", "classNameExpressions": [], "propsArray": [] }, { "type": "element", "tagName": "div", "style": "margin: 20px 0;", "classNames": [ "has-text-weight-bold" ], "children": [ { "type": "element", "tagName": "span", "children": [ { "type": "text", "text": "$", "id": 9593806, "isVisible": true, "children": [] } ], "classNames": [ "is-size-3" ], "name": "Price Symbol", "style": "opacity: 0.4;", "id": 1967626, "isVisible": true, "attributes": "{\n\n}", "image": "", "classNameExpressions": [], "propsArray": [] }, { "type": "element", "tagName": "span", "children": [ { "type": "text", "text": "{item.price}", "id": 8603056, "isVisible": true, "children": [] } ], "classNames": [ "is-size-1" ], "name": "Price Number", "id": 1984251, "isVisible": true, "attributes": "{\n\n}", "image": "", "classNameExpressions": [], "style": "", "propsArray": [] }, { "type": "element", "tagName": "span", "children": [ { "type": "text", "text": "/m", "id": 6524326, "isVisible": true, "children": [] } ], "classNames": [ "is-size-4" ], "name": "Price Month", "style": "opacity: 0.4;", "id": 8466525, "isVisible": true, "attributes": "{\n\n}", "image": "", "classNameExpressions": [], "propsArray": [] } ], "name": "Price", "id": 883311, "isVisible": true, "attributes": "{\n\n}", "image": "", "classNameExpressions": [], "propsArray": [] }, { "type": "element", "tagName": "p", "children": [ { "type": "text", "text": "{item.description}", "id": 5239080, "isVisible": true, "children": [] } ], "name": "Description", "style": "padding-bottom: 40px;", "id": 999032, "isVisible": true, "attributes": "{\n\n}", "image": "", "classNames": [], "classNameExpressions": [], "propsArray": [] }, { "type": "element", "tagName": "button", "classNames": [ "button", "is-medium", "is-primary" ], "children": [ { "type": "text", "text": "{props.buttonText}", "id": 9240044, "isVisible": true, "children": [] } ], "style": "margin-top: auto;", "attributes": "{\n\tonClick: () => props.onChoosePlan(item.id)\n}", "id": 2606941, "isVisible": true, "image": "", "name": "", "classNameExpressions": [], "propsArray": [ { "key": "onClick", "value": "() => props.onChoosePlan(item.id)", "isString": false, "type": "ArrowFunctionExpression" } ] } ], "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, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "propsArray": [] } ], "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, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "propsArray": [] } ], "style": "display: flex;\nalign-items: stretch;", "attributes": "{\n key: index\n}", "id": 9946607, "isVisible": true, "image": "", "name": "", "classNameExpressions": [], "propsArray": [ { "key": "key", "value": "index", "isString": false, "type": "Identifier" } ] } ], "id": 3852911, "isVisible": true, "objectType": "array" } ], "id": 7267633, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] } ], "isVisible": true, "nameLibrary": "", "description": "", "tags": [], "code": "", "nameFormatted": "Pricing", "nameStyleModule": "Pricing", "modulePath": "src/components/Pricing" }, { "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, "isVisible": true, "children": [], "propsArray": [ { "key": "color", "value": "white", "isString": true, "type": "StringLiteral" }, { "key": "size", "value": "medium", "isString": true, "type": "StringLiteral" }, { "key": "title", "value": "Pricing", "isString": true, "type": "StringLiteral" }, { "key": "subtitle", "value": "", "isString": true, "type": "StringLiteral" } ] } ], "isVisible": true, "code": "", "nameFormatted": "PricingPage", "nameStyleModule": "PricingPage", "modulePath": "src/pages/pricing" }, { "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, "isVisible": true, "image": "", "name": "", "classNameExpressions": [], "style": "", "children": [], "propsArray": [ { "key": "type", "value": "props.type", "isString": false, "type": "MemberExpression" }, { "key": "value", "value": "props.value", "isString": false, "type": "MemberExpression" }, { "key": "placeholder", "value": "props.placeholder", "isString": false, "type": "MemberExpression" }, { "key": "onChange", "value": "(e) => props.onChange(e.target.value)", "isString": false, "type": "ArrowFunctionExpression" } ] } ], "id": 6549474, "isVisible": true }, { "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, "isVisible": true, "image": "", "name": "", "classNameExpressions": [], "style": "", "children": [], "propsArray": [ { "key": "type", "value": "props.type", "isString": false, "type": "MemberExpression" }, { "key": "value", "value": "props.value", "isString": false, "type": "MemberExpression" }, { "key": "placeholder", "value": "props.placeholder", "isString": false, "type": "MemberExpression" }, { "key": "onChange", "value": "(e) => props.onChange(e.target.value)", "isString": false, "type": "ArrowFunctionExpression" } ] } ], "id": 6476692, "isVisible": true } ], "id": 5235996, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] }, { "type": "if", "js": "props.error", "children": [ { "type": "element", "tagName": "p", "classNames": [ "help", "is-danger" ], "children": [ { "type": "text", "text": "{props.error.message}", "id": 5299485, "isVisible": true, "children": [] } ], "id": 9601294, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] } ], "id": 1823889, "isVisible": true } ], "id": 1060601, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] } ], "isVisible": true, "nameLibrary": "", "description": "", "tags": [], "code": "", "nameFormatted": "FormField", "nameStyleModule": "FormField", "modulePath": "src/components/FormField" }, { "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, "isVisible": true, "children": [], "propsArray": [ { "key": "color", "value": "white", "isString": true, "type": "StringLiteral" }, { "key": "size", "value": "medium", "isString": true, "type": "StringLiteral" }, { "key": "title", "value": "Contact Us", "isString": true, "type": "StringLiteral" }, { "key": "subtitle", "value": "", "isString": true, "type": "StringLiteral" }, { "key": "showNameField", "value": "true", "isString": false, "type": "BooleanLiteral" }, { "key": "buttonText", "value": "Send message", "isString": true, "type": "StringLiteral" } ] } ], "isVisible": true, "code": "", "nameFormatted": "ContactPage", "nameStyleModule": "ContactPage", "modulePath": "src/pages/contact" }, { "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, "isVisible": true, "children": [], "propsArray": [ { "key": "title", "value": "props.title", "isString": false, "type": "MemberExpression" }, { "key": "subtitle", "value": "props.subtitle", "isString": false, "type": "MemberExpression" }, { "key": "centered", "value": "true", "isString": false, "type": "BooleanLiteral" }, { "key": "size", "value": "3", "isString": false, "type": "NumericLiteral" } ] }, { "type": "instance", "componentId": 5469661, "attributes": "{\n parentColor: props.color,\n showNameField: props.showNameField,\n buttonText: props.buttonText,\n}", "id": 8209060, "isVisible": true, "children": [], "propsArray": [ { "key": "parentColor", "value": "props.color", "isString": false, "type": "MemberExpression" }, { "key": "showNameField", "value": "props.showNameField", "isString": false, "type": "MemberExpression" }, { "key": "buttonText", "value": "props.buttonText", "isString": false, "type": "MemberExpression" } ] } ], "style": "max-width: 850px;", "id": 2533263, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "propsArray": [] } ], "id": 5180594, "isVisible": true, "propsArray": [ { "key": "color", "value": "props.color", "isString": false, "type": "MemberExpression" }, { "key": "size", "value": "props.size", "isString": false, "type": "MemberExpression" } ] } ], "tags": [ "Contact", "Popular" ], "isVisible": true, "nameLibrary": "", "description": "", "code": "", "nameFormatted": "ContactSection", "nameStyleModule": "ContactSection", "modulePath": "src/components/ContactSection" }, { "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, "isVisible": true, "children": [], "propsArray": [ { "key": "type", "value": "props.status.type", "isString": false, "type": "MemberExpression" }, { "key": "message", "value": "props.status.message", "isString": false, "type": "MemberExpression" } ] } ], "id": 1815689, "isVisible": true }, { "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, "isVisible": true, "children": [], "propsArray": [ { "key": "value", "value": "name", "isString": false, "type": "Identifier" }, { "key": "type", "value": "text", "isString": true, "type": "StringLiteral" }, { "key": "placeholder", "value": "Name", "isString": true, "type": "StringLiteral" }, { "key": "error", "value": "showErrors && getError('name')", "isString": false, "type": "LogicalExpression" }, { "key": "onChange", "value": "(value) => setName(value)", "isString": false, "type": "ArrowFunctionExpression" } ] } ], "id": 2002727, "isVisible": true }, { "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, "isVisible": true, "children": [], "propsArray": [ { "key": "value", "value": "email", "isString": false, "type": "Identifier" }, { "key": "type", "value": "email", "isString": true, "type": "StringLiteral" }, { "key": "placeholder", "value": "Email", "isString": true, "type": "StringLiteral" }, { "key": "error", "value": "showErrors && getError('email')", "isString": false, "type": "LogicalExpression" }, { "key": "onChange", "value": "(value) => setEmail(value)", "isString": false, "type": "ArrowFunctionExpression" } ] } ], "id": 8382708, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] } ], "id": 365257, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] }, { "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, "isVisible": true, "children": [], "propsArray": [ { "key": "value", "value": "message", "isString": false, "type": "Identifier" }, { "key": "type", "value": "textarea", "isString": true, "type": "StringLiteral" }, { "key": "placeholder", "value": "Message", "isString": true, "type": "StringLiteral" }, { "key": "error", "value": "showErrors && getError('message')", "isString": false, "type": "LogicalExpression" }, { "key": "onChange", "value": "(value) => setMessage(value)", "isString": false, "type": "ArrowFunctionExpression" } ] } ], "id": 8359098, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] } ], "id": 1359873, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] }, { "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, "isVisible": true, "children": [] } ], "id": 8423764, "isVisible": true, "propsArray": [ { "key": "parentColor", "value": "props.parentColor", "isString": false, "type": "MemberExpression" }, { "key": "size", "value": "medium", "isString": true, "type": "StringLiteral" }, { "key": "state", "value": "props.status && \n props.status.type === \"pending\" ?\n 'loading' : 'normal'", "isString": false, "type": "ConditionalExpression" } ] } ], "id": 2553172, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] } ], "id": 4119607, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] } ], "id": 7385159, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] } ], "id": 3883, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] } ], "attributes": "{\n onSubmit: (e) => {\n e.preventDefault();\n handleSubmit();\n }\n}", "id": 980695, "isVisible": true, "image": "", "name": "", "classNames": [], "classNameExpressions": [], "style": "", "propsArray": [ { "key": "onSubmit", "value": "(e) => {\n e.preventDefault();\n handleSubmit();\n}", "isString": false, "type": "ArrowFunctionExpression" } ] } ], "isVisible": true, "nameLibrary": "", "description": "", "tags": [], "nameFormatted": "ContactForm", "nameStyleModule": "ContactForm", "modulePath": "src/components/ContactForm" }, { "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, "isVisible": true, "children": [], "propsArray": [ { "key": "parentColor", "value": "props.parentColor", "isString": false, "type": "MemberExpression" }, { "key": "showNameField", "value": "props.showNameField", "isString": false, "type": "MemberExpression" }, { "key": "buttonText", "value": "props.buttonText", "isString": false, "type": "MemberExpression" }, { "key": "onSubmit", "value": "onSubmit", "isString": false, "type": "Identifier" }, { "key": "status", "value": "status", "isString": false, "type": "Identifier" } ] } ], "isVisible": true, "nameLibrary": "", "description": "", "tags": [], "nameFormatted": "Contact", "nameStyleModule": "Contact", "modulePath": "src/components/Contact" }, { "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, "isVisible": true, "children": [] } ], "id": 2491376, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "style": "", "propsArray": [] } ], "isVisible": true, "nameLibrary": "", "description": "", "tags": [], "code": "", "nameFormatted": "FormStatus", "nameStyleModule": "FormStatus", "modulePath": "src/components/FormStatus" }, { "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, router]);\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, "isVisible": true, "children": [], "propsArray": [ { "key": "color", "value": "white", "isString": true, "type": "StringLiteral" }, { "key": "size", "value": "large", "isString": true, "type": "StringLiteral" }, { "key": "title", "value": "Dashboard", "isString": true, "type": "StringLiteral" }, { "key": "subtitle", "value": "Dashboard components are coming to the Divjoy library soon. For now, you can implement a custom dashboard here after exporting your code.", "isString": true, "type": "StringLiteral" } ] } ], "isVisible": true, "nameFormatted": "DashboardPage", "nameStyleModule": "DashboardPage", "modulePath": "src/pages/dashboard" }, { "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, "isVisible": true, "children": [], "propsArray": [ { "key": "title", "value": "props.title", "isString": false, "type": "MemberExpression" }, { "key": "subtitle", "value": "props.subtitle", "isString": false, "type": "MemberExpression" }, { "key": "centered", "value": "true", "isString": false, "type": "BooleanLiteral" }, { "key": "size", "value": "3", "isString": false, "type": "NumericLiteral" } ] } ], "id": 4452922, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] } ], "id": 368304, "isVisible": true, "propsArray": [ { "key": "color", "value": "props.color", "isString": false, "type": "MemberExpression" }, { "key": "size", "value": "props.size", "isString": false, "type": "MemberExpression" } ] } ], "isVisible": true, "nameLibrary": "", "description": "", "tags": [], "code": "", "nameFormatted": "DashboardSection", "nameStyleModule": "DashboardSection", "modulePath": "src/components/DashboardSection" }, { "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, "isVisible": true, "children": [], "propsArray": [ { "key": "color", "value": "white", "isString": true, "type": "StringLiteral" }, { "key": "size", "value": "large", "isString": true, "type": "StringLiteral" }, { "key": "title", "value": "Welcome back", "isString": true, "type": "StringLiteral" }, { "key": "subtitle", "value": "", "isString": true, "type": "StringLiteral" }, { "key": "buttonText", "value": "Sign in", "isString": true, "type": "StringLiteral" } ] } ], "isVisible": true, "code": "", "nameFormatted": "SigninPage", "nameStyleModule": "SigninPage", "modulePath": "src/pages/signin" }, { "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, "isVisible": true, "children": [], "propsArray": [ { "key": "type", "value": "props.status.type", "isString": false, "type": "MemberExpression" }, { "key": "message", "value": "props.status.message", "isString": false, "type": "MemberExpression" } ] } ], "id": 5805610, "isVisible": true }, { "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, "isVisible": true, "children": [], "propsArray": [ { "key": "value", "value": "email", "isString": false, "type": "Identifier" }, { "key": "type", "value": "email", "isString": true, "type": "StringLiteral" }, { "key": "placeholder", "value": "Email", "isString": true, "type": "StringLiteral" }, { "key": "error", "value": "showErrors && getError('email')", "isString": false, "type": "LogicalExpression" }, { "key": "onChange", "value": "(value) => setEmail(value)", "isString": false, "type": "ArrowFunctionExpression" } ] } ], "id": 9069362, "isVisible": true }, { "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, "isVisible": true, "children": [], "propsArray": [ { "key": "value", "value": "pass", "isString": false, "type": "Identifier" }, { "key": "type", "value": "password", "isString": true, "type": "StringLiteral" }, { "key": "placeholder", "value": "Password", "isString": true, "type": "StringLiteral" }, { "key": "error", "value": "showErrors && getError('pass')", "isString": false, "type": "LogicalExpression" }, { "key": "onChange", "value": "(value) => setPass(value)", "isString": false, "type": "ArrowFunctionExpression" } ] } ], "id": 6566228, "isVisible": true }, { "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, "isVisible": true, "children": [], "propsArray": [ { "key": "value", "value": "confirmPass", "isString": false, "type": "Identifier" }, { "key": "type", "value": "password", "isString": true, "type": "StringLiteral" }, { "key": "placeholder", "value": "Confirm Password", "isString": true, "type": "StringLiteral" }, { "key": "error", "value": "showErrors && getError('confirmPass')", "isString": false, "type": "LogicalExpression" }, { "key": "onChange", "value": "(value) => setConfirmPass(value)", "isString": false, "type": "ArrowFunctionExpression" } ] } ], "id": 7858956, "isVisible": true }, { "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, "isVisible": true, "children": [] } ], "id": 9599909, "isVisible": true, "propsArray": [ { "key": "parentColor", "value": "props.parentColor", "isString": false, "type": "MemberExpression" }, { "key": "size", "value": "medium", "isString": true, "type": "StringLiteral" }, { "key": "fullWidth", "value": "true", "isString": false, "type": "BooleanLiteral" }, { "key": "state", "value": "props.status && \n props.status.type === \"pending\" ?\n 'loading' : 'normal'", "isString": false, "type": "ConditionalExpression" } ] } ], "id": 1976494, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] } ], "name": "Submit", "id": 2933438, "isVisible": true, "attributes": "{\n\n}", "image": "", "classNameExpressions": [], "style": "", "propsArray": [] }, { "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, "isVisible": true, "children": [] }, { "type": "element", "tagName": "a", "children": [ { "type": "text", "text": "Sign in", "id": 5532821, "isVisible": true, "children": [] } ], "attributes": "{\n href: '/signin'\n}", "id": 3021224, "isVisible": true, "image": "", "name": "", "classNames": [], "classNameExpressions": [], "style": "", "propsArray": [ { "key": "href", "value": "/signin", "isString": true, "type": "StringLiteral" } ] } ], "id": 1718561, "isVisible": true }, { "type": "if", "js": "props.mode === 'signin'", "children": [ { "type": "element", "tagName": "a", "children": [ { "type": "text", "text": "Create an account", "id": 119509, "isVisible": true, "children": [] } ], "attributes": "{\n href: '/signup'\n}", "id": 3288573, "isVisible": true, "image": "", "name": "", "classNames": [], "classNameExpressions": [], "style": "", "propsArray": [ { "key": "href", "value": "/signup", "isString": true, "type": "StringLiteral" } ] }, { "type": "element", "tagName": "a", "attributes": "{\n href: '/forgotpass'\n}", "children": [ { "type": "text", "text": "Forgot password", "id": 5157568, "isVisible": true, "children": [] } ], "id": 6632095, "isVisible": true, "image": "", "name": "", "classNames": [], "classNameExpressions": [], "style": "", "propsArray": [ { "key": "href", "value": "/forgotpass", "isString": true, "type": "StringLiteral" } ] } ], "id": 4822433, "isVisible": true } ], "name": "Bottom Link", "style": "margin-top: 1rem;\nfont-size: 0.9rem;\na {\n margin: 0 0.5rem;\n}", "id": 1854125, "isVisible": true, "attributes": "{\n\n}", "image": "", "classNameExpressions": [], "propsArray": [] } ], "isVisible": true } ], "attributes": "{\n onSubmit: (e) => {\n e.preventDefault();\n handleSubmit();\n }\n}", "id": 6086474, "isVisible": true, "image": "", "name": "", "classNames": [], "classNameExpressions": [], "style": "", "propsArray": [ { "key": "onSubmit", "value": "(e) => {\n e.preventDefault();\n handleSubmit();\n}", "isString": false, "type": "ArrowFunctionExpression" } ] } ], "style": "width: 100%;\nmax-width: 450px;\nmargin: 0 auto;", "id": 5859175, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNames": [], "classNameExpressions": [], "propsArray": [] } ], "isVisible": true, "nameLibrary": "", "description": "", "tags": [], "nameFormatted": "Auth", "nameStyleModule": "Auth", "modulePath": "src/components/Auth" }, { "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, "isVisible": true, "children": [], "propsArray": [ { "key": "title", "value": "props.title", "isString": false, "type": "MemberExpression" }, { "key": "subtitle", "value": "props.subtitle", "isString": false, "type": "MemberExpression" }, { "key": "centered", "value": "true", "isString": false, "type": "BooleanLiteral" }, { "key": "size", "value": "3", "isString": false, "type": "NumericLiteral" } ] }, { "type": "instance", "componentId": 6850885, "attributes": "{\n buttonText: props.buttonText,\n parentColor: props.color,\n onSignin: onSignin\n}", "id": 2737557, "isVisible": true, "children": [], "propsArray": [ { "key": "buttonText", "value": "props.buttonText", "isString": false, "type": "MemberExpression" }, { "key": "parentColor", "value": "props.color", "isString": false, "type": "MemberExpression" }, { "key": "onSignin", "value": "onSignin", "isString": false, "type": "Identifier" } ] } ], "id": 9088759, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] } ], "id": 3089850, "isVisible": true, "propsArray": [ { "key": "color", "value": "props.color", "isString": false, "type": "MemberExpression" }, { "key": "size", "value": "props.size", "isString": false, "type": "MemberExpression" } ] } ], "code": "\t// Go to page after signin\n const onSignin = () => {\n router.push('/dashboard');\n }\n ", "tags": [ "Signup" ], "isVisible": true, "nameLibrary": "", "description": "", "nameFormatted": "SignInSection", "nameStyleModule": "SignInSection", "modulePath": "src/components/SignInSection" }, { "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, "isVisible": true, "children": [], "propsArray": [ { "key": "mode", "value": "signin", "isString": true, "type": "StringLiteral" }, { "key": "buttonText", "value": "props.buttonText", "isString": false, "type": "MemberExpression" }, { "key": "parentColor", "value": "props.parentColor", "isString": false, "type": "MemberExpression" }, { "key": "onSubmit", "value": "onSubmit", "isString": false, "type": "Identifier" }, { "key": "status", "value": "status", "isString": false, "type": "Identifier" } ] } ], "isVisible": true, "nameLibrary": "", "description": "", "tags": [], "nameFormatted": "SignIn", "nameStyleModule": "SignIn", "modulePath": "src/components/SignIn" }, { "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, "isVisible": true, "children": [], "propsArray": [ { "key": "color", "value": "white", "isString": true, "type": "StringLiteral" }, { "key": "size", "value": "large", "isString": true, "type": "StringLiteral" }, { "key": "title", "value": "Get yourself an account", "isString": true, "type": "StringLiteral" }, { "key": "subtitle", "value": "", "isString": true, "type": "StringLiteral" }, { "key": "buttonText", "value": "Sign up", "isString": true, "type": "StringLiteral" } ] } ], "isVisible": true, "code": "", "nameFormatted": "SignupPage", "nameStyleModule": "SignupPage", "modulePath": "src/pages/signup" }, { "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, "isVisible": true, "children": [], "propsArray": [ { "key": "title", "value": "props.title", "isString": false, "type": "MemberExpression" }, { "key": "subtitle", "value": "props.subtitle", "isString": false, "type": "MemberExpression" }, { "key": "centered", "value": "true", "isString": false, "type": "BooleanLiteral" }, { "key": "size", "value": "3", "isString": false, "type": "NumericLiteral" } ] }, { "type": "instance", "componentId": 6300485, "attributes": "{\n\tbuttonText: props.buttonText,\n parentColor: props.color,\n onSignup: onSignup\n}", "id": 1730012, "isVisible": true, "children": [], "propsArray": [ { "key": "buttonText", "value": "props.buttonText", "isString": false, "type": "MemberExpression" }, { "key": "parentColor", "value": "props.color", "isString": false, "type": "MemberExpression" }, { "key": "onSignup", "value": "onSignup", "isString": false, "type": "Identifier" } ] } ], "id": 6557236, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] } ], "id": 3466550, "isVisible": true, "propsArray": [ { "key": "color", "value": "props.color", "isString": false, "type": "MemberExpression" }, { "key": "size", "value": "props.size", "isString": false, "type": "MemberExpression" } ] } ], "code": "\t// Go to page after signup\n const onSignup = () => {\n \trouter.push('/dashboard');\n }\n ", "tags": [ "Signup" ], "isVisible": true, "nameLibrary": "", "description": "", "nameFormatted": "SignUpSection", "nameStyleModule": "SignUpSection", "modulePath": "src/components/SignUpSection" }, { "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, "isVisible": true, "children": [], "propsArray": [ { "key": "mode", "value": "signup", "isString": true, "type": "StringLiteral" }, { "key": "buttonText", "value": "props.buttonText", "isString": false, "type": "MemberExpression" }, { "key": "parentColor", "value": "props.parentColor", "isString": false, "type": "MemberExpression" }, { "key": "onSubmit", "value": "onSubmit", "isString": false, "type": "Identifier" }, { "key": "status", "value": "status", "isString": false, "type": "Identifier" } ] } ], "isVisible": true, "nameLibrary": "", "description": "", "tags": [], "nameFormatted": "SignUp", "nameStyleModule": "SignUp", "modulePath": "src/components/SignUp" }, { "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, "isVisible": true, "children": [], "propsArray": [ { "key": "color", "value": "white", "isString": true, "type": "StringLiteral" }, { "key": "size", "value": "large", "isString": true, "type": "StringLiteral" }, { "key": "title", "value": "Get a new password", "isString": true, "type": "StringLiteral" }, { "key": "subtitle", "value": "", "isString": true, "type": "StringLiteral" }, { "key": "buttonText", "value": "Reset password", "isString": true, "type": "StringLiteral" } ] } ], "isVisible": true, "code": "", "nameFormatted": "ForgotpassPage", "nameStyleModule": "ForgotpassPage", "modulePath": "src/pages/forgotpass" }, { "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, "isVisible": true, "children": [], "propsArray": [ { "key": "title", "value": "props.title", "isString": false, "type": "MemberExpression" }, { "key": "subtitle", "value": "props.subtitle", "isString": false, "type": "MemberExpression" }, { "key": "centered", "value": "true", "isString": false, "type": "BooleanLiteral" }, { "key": "size", "value": "3", "isString": false, "type": "NumericLiteral" } ] }, { "type": "instance", "componentId": 8572589, "attributes": "{\n\tbuttonText: props.buttonText,\n parentColor: props.color\n}", "id": 5133597, "isVisible": true, "children": [], "propsArray": [ { "key": "buttonText", "value": "props.buttonText", "isString": false, "type": "MemberExpression" }, { "key": "parentColor", "value": "props.color", "isString": false, "type": "MemberExpression" } ] } ], "id": 8356221, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] } ], "id": 3563592, "isVisible": true, "propsArray": [ { "key": "color", "value": "props.color", "isString": false, "type": "MemberExpression" }, { "key": "size", "value": "props.size", "isString": false, "type": "MemberExpression" } ] } ], "tags": [ "Signup" ], "isVisible": true, "nameLibrary": "", "description": "", "code": "", "nameFormatted": "ForgotPassSection", "nameStyleModule": "ForgotPassSection", "modulePath": "src/components/ForgotPassSection" }, { "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, "isVisible": true, "children": [], "propsArray": [ { "key": "mode", "value": "forgotpass", "isString": true, "type": "StringLiteral" }, { "key": "buttonText", "value": "props.buttonText", "isString": false, "type": "MemberExpression" }, { "key": "parentColor", "value": "props.parentColor", "isString": false, "type": "MemberExpression" }, { "key": "onSubmit", "value": "onSubmit", "isString": false, "type": "Identifier" }, { "key": "status", "value": "status", "isString": false, "type": "Identifier" } ] } ], "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", "isVisible": true, "nameLibrary": "", "description": "", "tags": [], "nameFormatted": "ForgotPass", "nameStyleModule": "ForgotPass", "modulePath": "src/components/ForgotPass" }, { "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, "isVisible": true, "children": [], "propsArray": [ { "key": "color", "value": "white", "isString": true, "type": "StringLiteral" }, { "key": "size", "value": "large", "isString": true, "type": "StringLiteral" }, { "key": "title", "value": "Choose a new password", "isString": true, "type": "StringLiteral" }, { "key": "subtitle", "value": "", "isString": true, "type": "StringLiteral" }, { "key": "buttonText", "value": "Change password", "isString": true, "type": "StringLiteral" } ] } ], "isVisible": true, "code": "", "nameFormatted": "ChangepassPage", "nameStyleModule": "ChangepassPage", "modulePath": "src/pages/changepass" }, { "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, "isVisible": true, "children": [], "propsArray": [ { "key": "title", "value": "props.title", "isString": false, "type": "MemberExpression" }, { "key": "subtitle", "value": "props.subtitle", "isString": false, "type": "MemberExpression" }, { "key": "centered", "value": "true", "isString": false, "type": "BooleanLiteral" }, { "key": "size", "value": "3", "isString": false, "type": "NumericLiteral" } ] }, { "type": "instance", "componentId": 2683725, "attributes": "{\n buttonText: props.buttonText,\n parentColor: props.color\n}", "id": 5378004, "isVisible": true, "children": [], "propsArray": [ { "key": "buttonText", "value": "props.buttonText", "isString": false, "type": "MemberExpression" }, { "key": "parentColor", "value": "props.color", "isString": false, "type": "MemberExpression" } ] } ], "id": 3025936, "isVisible": true, "attributes": "{\n\n}", "image": "", "name": "", "classNameExpressions": [], "style": "", "propsArray": [] } ], "id": 7758873, "isVisible": true, "propsArray": [ { "key": "color", "value": "props.color", "isString": false, "type": "MemberExpression" }, { "key": "size", "value": "props.size", "isString": false, "type": "MemberExpression" } ] } ], "tags": [ "Signup" ], "isVisible": true, "nameLibrary": "", "description": "", "code": "", "nameFormatted": "ChangePassSection", "nameStyleModule": "ChangePassSection", "modulePath": "src/components/ChangePassSection" }, { "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, "isVisible": true, "children": [], "propsArray": [ { "key": "mode", "value": "changepass", "isString": true, "type": "StringLiteral" }, { "key": "buttonText", "value": "props.buttonText", "isString": false, "type": "MemberExpression" }, { "key": "parentColor", "value": "props.parentColor", "isString": false, "type": "MemberExpression" }, { "key": "onSubmit", "value": "onSubmit", "isString": false, "type": "Identifier" }, { "key": "status", "value": "status", "isString": false, "type": "Identifier" } ] } ], "isVisible": true, "nameLibrary": "", "description": "", "tags": [], "nameFormatted": "ChangePass", "nameStyleModule": "ChangePass", "modulePath": "src/components/ChangePass" }, { "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, "isVisible": true, "children": [], "propsArray": [ { "key": "color", "value": "white", "isString": true, "type": "StringLiteral" }, { "key": "spaced", "value": "true", "isString": false, "type": "BooleanLiteral" }, { "key": "logo", "value": "https://uploads.divjoy.com/logo.svg", "isString": true, "type": "StringLiteral" } ] }, { "type": "pages", "id": 7407840, "isVisible": true, "children": [ { "type": "instance", "subtype": "page-instance", "componentId": 1513260, "id": 5876810, "isVisible": true, "children": [] }, { "type": "instance", "subtype": "page-instance", "componentId": 3773675, "id": 8317181, "isVisible": true, "children": [] }, { "type": "instance", "subtype": "page-instance", "componentId": 327204, "id": 2126949, "isVisible": true, "children": [] }, { "type": "instance", "subtype": "page-instance", "componentId": 9988735, "id": 2201384, "isVisible": true, "children": [] }, { "type": "instance", "subtype": "page-instance", "componentId": 8532180, "id": 6844142, "isVisible": true, "children": [] }, { "type": "instance", "subtype": "page-instance", "componentId": 9447965, "id": 9711986, "isVisible": true, "children": [] }, { "type": "instance", "subtype": "page-instance", "componentId": 4045617, "id": 5820999, "isVisible": true, "children": [] }, { "type": "instance", "subtype": "page-instance", "componentId": 4305746, "id": 5610030, "isVisible": true, "children": [] }, { "type": "instance", "subtype": "page-instance", "componentId": 5642556, "id": 6664312, "isVisible": true, "children": [] }, { "type": "instance", "subtype": "page-instance", "componentId": 83283, "id": 3098743, "isVisible": true, "children": [] } ] }, { "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, "isVisible": true, "children": [], "propsArray": [ { "key": "color", "value": "light", "isString": true, "type": "StringLiteral" }, { "key": "size", "value": "normal", "isString": true, "type": "StringLiteral" }, { "key": "logo", "value": "https://uploads.divjoy.com/logo.svg", "isString": true, "type": "StringLiteral" }, { "key": "copyright", "value": "© 2019 Company", "isString": true, "type": "StringLiteral" } ] } ], "isVisible": true, "code": "", "nameFormatted": "App", "nameStyleModule": "App", "modulePath": "src/pages/_app" } ] }