@lote-design-system/marketing-blocks
Version:
531 lines (508 loc) • 24.8 kB
JavaScript
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import React from 'react';
import PropTypes from 'prop-types';
import styled, { css } from 'styled-components';
import { Icon } from '@lote-design-system/icons';
import { Container, Row, Column, Button, Input } from '@lote-design-system/core';
import { CountryFlagCanada } from '../svg'; // => Dependent styled-components
// Our main component depends upon the following styled-components
const Feature = styled.section.withConfig({
displayName: "Feature5__Feature",
componentId: "px3v6i-0"
})(["padding:48px 16px;", "{padding:64px 32px;}", "{padding-top:96px;padding-bottom:96px;}"], ({
theme
}) => theme.mediaQueries.sm, ({
theme
}) => theme.mediaQueries.md);
const FeatureHeader = styled.div.withConfig({
displayName: "Feature5__FeatureHeader",
componentId: "px3v6i-1"
})(["text-align:center;margin-bottom:48px;", "{margin-bottom:64px;}"], ({
theme
}) => theme.mediaQueries.md);
const FeatureContainer = styled(Container).withConfig({
displayName: "Feature5__FeatureContainer",
componentId: "px3v6i-2"
})(["max-width:", ";"], ({
theme
}) => theme.maxContainerWidth);
const FeatureTitle = styled.h1.withConfig({
displayName: "Feature5__FeatureTitle",
componentId: "px3v6i-3"
})(["font-size:40px;font-weight:700;color:", ";margin-bottom:8px;"], ({
theme: {
colors
}
}) => colors.text.title);
const FeatureDescription = styled.p.withConfig({
displayName: "Feature5__FeatureDescription",
componentId: "px3v6i-4"
})(["margin:0 auto 16px;max-width:720px;font-size:16px;color:", ";"], ({
theme: {
colors
}
}) => colors.text.primary); // Second Part => has left and Right Side
// Left Side contains column and one `div` which contain cards
const ColumnModify = styled(Column).withConfig({
displayName: "Feature5__ColumnModify",
componentId: "px3v6i-5"
})(["margin-bottom:64px;", "{margin-bottom:96px;}"], ({
theme
}) => theme.mediaQueries.lg);
const FeatureUpper = styled.div.withConfig({
displayName: "Feature5__FeatureUpper",
componentId: "px3v6i-6"
})(["margin-bottom:64px;"]);
const FeatureUpperTitle = styled.h1.withConfig({
displayName: "Feature5__FeatureUpperTitle",
componentId: "px3v6i-7"
})(["font-size:28px;font-weight:500;color:", ";margin-bottom:8px;"], ({
theme: {
colors
}
}) => colors.text.title);
const FeatureUpperDescription = styled.p.withConfig({
displayName: "Feature5__FeatureUpperDescription",
componentId: "px3v6i-8"
})(["max-width:720px;font-size:16px;color:", ";", "{margin:0 auto;}"], ({
theme: {
colors
}
}) => colors.text.primary, ({
theme
}) => theme.mediaQueries.lg); // Card
const CardFeature = styled.div.withConfig({
displayName: "Feature5__CardFeature",
componentId: "px3v6i-9"
})(["position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;:not(:last-child){margin-bottom:64px;}"]);
const CardFeatureBody = styled.div.withConfig({
displayName: "Feature5__CardFeatureBody",
componentId: "px3v6i-10"
})(["display:flex;"]);
const CardFeatureIconWrapper = styled.div.withConfig({
displayName: "Feature5__CardFeatureIconWrapper",
componentId: "px3v6i-11"
})(["flex:0 0 auto;margin-right:16px;"]);
const CardFeatureSvgWrapper = styled.div.withConfig({
displayName: "Feature5__CardFeatureSvgWrapper",
componentId: "px3v6i-12"
})(["width:60px;height:60px;background-color:", ";color:#fff;border-radius:0.25rem;display:inline-flex;justify-content:center;align-items:center;> svg{width:25px;height:25px;}", ";"], ({
theme: {
colors
}
}) => colors.primary, ({
styled
}) => {
if (styled) {
return css(["&{", ";}"], styled);
}
});
const CardFeatureContent = styled.div.withConfig({
displayName: "Feature5__CardFeatureContent",
componentId: "px3v6i-13"
})(["flex:1 1 auto;text-align:left;"]);
const CardHeading = styled.h1.withConfig({
displayName: "Feature5__CardHeading",
componentId: "px3v6i-14"
})(["font-size:18px;font-weight:500;margin-bottom:4px;color:", ";"], ({
theme: {
colors
}
}) => colors.text.title);
const CardDescription = styled.p.withConfig({
displayName: "Feature5__CardDescription",
componentId: "px3v6i-15"
})(["font-size:14px;margin-bottom:0;color:", ";"], ({
theme: {
colors
}
}) => colors.text.primary); // Right Side Form => It is divided into 3 parts header, body, footer
const FormWrapper = styled.div.withConfig({
displayName: "Feature5__FormWrapper",
componentId: "px3v6i-16"
})(["box-shadow:", ";"], ({
theme
}) => theme.boxShadows.lg); // From Header
const FormHeader = styled.div.withConfig({
displayName: "Feature5__FormHeader",
componentId: "px3v6i-17"
})(["padding:32px 24px 18px;"]);
const HeaderH4 = styled.h4.withConfig({
displayName: "Feature5__HeaderH4",
componentId: "px3v6i-18"
})(["font-size:16px;font-weight:500;margin-bottom:8px;color:", ";"], ({
theme: {
colors
}
}) => colors.text.title);
const HeaderP = styled.p.withConfig({
displayName: "Feature5__HeaderP",
componentId: "px3v6i-19"
})(["font-size:14px;margin-bottom:16px;color:", ";"], ({
theme: {
colors
}
}) => colors.text.primary);
const FormGroup = styled.div.withConfig({
displayName: "Feature5__FormGroup",
componentId: "px3v6i-20"
})(["margin-bottom:16px;"]);
const Label = styled.label.withConfig({
displayName: "Feature5__Label",
componentId: "px3v6i-21"
})(["font-size:14px;font-weight:500;color:", ";display:block;margin-bottom:12px;"], ({
theme: {
colors
}
}) => colors.text.primary); // Form Body
const FormBody = styled.div.withConfig({
displayName: "Feature5__FormBody",
componentId: "px3v6i-22"
})(["border-top:1px solid #f7f7f7;border-bottom:1px solid #f7f7f7;padding:32px 0;"]);
const FormBodyContent = styled.div.withConfig({
displayName: "Feature5__FormBodyContent",
componentId: "px3v6i-23"
})(["padding:0 24px;"]); // Components for Select-with-icon
const SelectIconWrapper = styled.div.withConfig({
displayName: "Feature5__SelectIconWrapper",
componentId: "px3v6i-24"
})(["align-items:center;display:inline-flex;justify-content:center;height:24px;width:24px;"]);
const SelectIconGroup = styled.div.withConfig({
displayName: "Feature5__SelectIconGroup",
componentId: "px3v6i-25"
})(["position:relative;select{padding-left:42px;}", "{color:", ";pointer-events:none;position:absolute;top:0;", " left:0;width:50px;height:50px;z-index:4;}"], SelectIconWrapper, ({
theme: {
colors
}
}) => colors.text.title, ''
/* For left side */
); // -- End --
// Group Components for input-text and select-with-icon
const GroupInput = styled.div.withConfig({
displayName: "Feature5__GroupInput",
componentId: "px3v6i-26"
})(["position:relative;width:100%;div input{padding-right:128px;}div select{width:128px;border-radius:0;}div:last-child{position:absolute;top:0;right:0;}"]); // -- End --
// List Group
const ListGroup = styled.ul.withConfig({
displayName: "Feature5__ListGroup",
componentId: "px3v6i-27"
})(["display:flex;flex-direction:column;padding-left:0;margin:26px 0;> li{position:relative;list-style:none;padding:12px 20px;margin-bottom:-1px;background-color:#fff;border:1px solid #f7f7f7;> span{display:block;&:first-child{font-size:14px;font-weight:500;color:", ";}&:last-child{font-size:14px;color:", ";}}&:first-child{border-top-left-radius:4px;border-top-right-radius:4px;}&:last-child{margin-bottom:0;border-bottom-right-radius:4px;border-bottom-left-radius:4px;}}", "{> li{display:flex;align-items:center;justify-content:space-between;> span{display:inline-block;}}}"], ({
theme: {
colors
}
}) => colors.text.title, ({
theme: {
colors
}
}) => colors.text.primary, ({
theme
}) => theme.mediaQueries.sm); // -- End --
// Form Footer
const FormFooter = styled.div.withConfig({
displayName: "Feature5__FormFooter",
componentId: "px3v6i-28"
})(["background-color:#fbfbfb;padding:12px 48px;button{display:block;width:100%;}button:first-child{margin-bottom:16px;}", "{display:flex;justify-content:flex-end;button{display:inline-block;width:auto;}button:first-child{margin-right:16px;margin-bottom:0;}}"], ({
theme
}) => theme.mediaQueries.sm); // -- End Right Side Form --
// List Group 2
const ListGroup2 = styled.ul.withConfig({
displayName: "Feature5__ListGroup2",
componentId: "px3v6i-29"
})(["display:flex;flex-direction:column;padding-left:0;> li{list-style:none;box-shadow:", ";padding:12px 20px;background-color:#fbfbfb;border-radius:4px;&:not(:last-child){margin-bottom:24px;}}", "{> li{display:flex;justify-content:space-between;align-items:center;}}"], ({
theme
}) => theme.boxShadows.md, ({
theme
}) => theme.mediaQueries.sm);
const AvatarWrapper = styled.div.withConfig({
displayName: "Feature5__AvatarWrapper",
componentId: "px3v6i-30"
})(["display:flex;margin-bottom:16px;", "{margin-bottom:0;}"], ({
theme
}) => theme.mediaQueries.sm);
const Avatar = styled.div.withConfig({
displayName: "Feature5__Avatar",
componentId: "px3v6i-31"
})(["flex:0 0 auto;margin-right:1rem;> img{display:block;width:50px;height:50px;border-radius:50%;background-color:#f7f7f7;}"]);
const InfoWrapper = styled.div.withConfig({
displayName: "Feature5__InfoWrapper",
componentId: "px3v6i-32"
})(["flex:1 1 auto;text-align:left;"]);
const PersonName = styled.p.withConfig({
displayName: "Feature5__PersonName",
componentId: "px3v6i-33"
})(["font-size:14px;color:", ";margin-bottom:0;font-weight:500;"], ({
theme: {
colors
}
}) => colors.text.title);
const PersonAmount = styled.p.withConfig({
displayName: "Feature5__PersonAmount",
componentId: "px3v6i-34"
})(["font-size:14px;color:", ";margin-bottom:0;font-weight:500;span{font-weight:400;color:", ";}"], ({
theme: {
colors
}
}) => colors.text.title, ({
theme: {
colors
}
}) => colors.text.primary);
const Badge = styled.p.withConfig({
displayName: "Feature5__Badge",
componentId: "px3v6i-35"
})(["display:flex;align-items:center;justify-content:center;padding:8px 16px;border-radius:9999px;font-size:14px;font-weight:500;&:before{content:'';width:8px;height:8px;border-radius:50%;margin-right:8px;}", ""], props => {
const {
theme: {
palettes
}
} = props;
if (props.status === 'info') {
return css(["background-color:", ";color:", ";&:before{background-color:", ";}"], palettes.primary[0], palettes.primary[5], palettes.primary[5]);
} else if (props.status === 'success') {
return css(["background-color:", ";color:", ";&:before{background-color:", ";}"], palettes.success[0], palettes.success[5], palettes.success[5]);
}
}); // -- End --
// <= End Dependent styled-components
const typeASchema = {
title: 'We takes away the hard process',
description: "We believe brand interaction is key in communication. Real innovations and a positive customer experience are the heart of successful communication. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s and used by everywhere.",
shift: false,
features: [{
id: 1,
icon: /*#__PURE__*/React.createElement(Icon, {
name: "database"
}),
title: 'Marketing Analysis rates',
description: 'We believe brand interaction is key in communication. Real innovations and a positive customer experience are the heart of successful communication. No fake products and services.'
}, {
id: 2,
icon: /*#__PURE__*/React.createElement(Icon, {
name: "code"
}),
title: 'Website Optimization rates',
description: 'We believe brand interaction is key in communication. Real innovations and a positive customer experience are the heart of successful communication. No fake products and services.'
}, {
id: 3,
icon: /*#__PURE__*/React.createElement(Icon, {
name: "clock"
}),
title: 'SEO Analysis rates',
description: 'We believe brand interaction is key in communication. Real innovations and a positive customer experience are the heart of successful communication. No fake products and services.'
}]
};
const typeBSchema = {
title: 'Always in the loop',
description: "We believe brand interaction is key in communication. Real innovations and a positive customer experience are the heart of successful communication. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s and used by everywhere.",
shift: true,
features: [{
id: 1,
icon: /*#__PURE__*/React.createElement(Icon, {
name: "database"
}),
title: 'Marketing Analysis rates',
description: 'We believe brand interaction is key in communication. Real innovations and a positive customer experience are the heart of successful communication. No fake products and services.'
}, {
id: 2,
icon: /*#__PURE__*/React.createElement(Icon, {
name: "code"
}),
title: 'Website Optimization rates',
description: 'We believe brand interaction is key in communication. Real innovations and a positive customer experience are the heart of successful communication. No fake products and services.'
}, {
id: 3,
icon: /*#__PURE__*/React.createElement(Icon, {
name: "clock"
}),
title: 'SEO Analysis rates',
description: 'We believe brand interaction is key in communication. Real innovations and a positive customer experience are the heart of successful communication. No fake products and services.'
}]
};
const featureShape = {
id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
title: PropTypes.string.isRequired,
description: PropTypes.string.isRequired
};
const typeShape = {
shift: PropTypes.bool.isRequired,
title: PropTypes.string.isRequired,
description: PropTypes.string.isRequired,
features: PropTypes.arrayOf(PropTypes.shape(featureShape)).isRequired
};
const propTypes = {
/** The title for the feature section. */
title: PropTypes.string.isRequired,
/** The description for the feature section. */
description: PropTypes.string.isRequired,
/** The following feature section is divided into 2 types of data
Type-A and Type-B. Both have an object datatype. Type-A will appear above. Type-B will
appear below Type-A. */
typeA: PropTypes.shape(typeShape),
typeB: PropTypes.shape(typeShape)
};
const defaultProps = {
title: 'Creative features with optimal choices',
description: 'We believe brand interaction is key in communication. Real innovations and a positive customer experience are the heart of successful communication.',
typeA: typeASchema,
typeB: typeBSchema
};
/**
* Returns the JSX or null for the icon.
* @param icon {*} - The icon will React.element or a string
* @return {null|*} - Returns the JSX or null
*/
const renderIcon = icon => {
if (React.isValidElement(icon)) {
return icon;
} else if (typeof icon === 'string' && icon.length > 0) {
return /*#__PURE__*/React.createElement(Icon, {
name: icon
});
} else {
return null;
}
};
/**
* It will render the data of your type.
* @param type {object} - A type object
* @return {*} - Returns the JSX
*/
const renderData = type => {
return /*#__PURE__*/React.createElement(ColumnModify, {
lg: 6
}, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(FeatureUpper, null, /*#__PURE__*/React.createElement(FeatureUpperTitle, null, type.title), /*#__PURE__*/React.createElement(FeatureUpperDescription, null, type.description)), Array.isArray(type.features) && type.features.length > 0 ? type.features.map(({
id,
icon,
title,
description
}) => {
return /*#__PURE__*/React.createElement(CardFeature, {
key: id
}, /*#__PURE__*/React.createElement(CardFeatureBody, null, /*#__PURE__*/React.createElement(CardFeatureIconWrapper, null, /*#__PURE__*/React.createElement(CardFeatureSvgWrapper, null, renderIcon(icon))), /*#__PURE__*/React.createElement(CardFeatureContent, null, /*#__PURE__*/React.createElement(CardHeading, null, title), /*#__PURE__*/React.createElement(CardDescription, null, description))));
}) : null));
};
/**
* It will render the type structure.
* @param typeA {object} - A typeA data
* @param typeB {object} - A typeB data
* @return {null|*} - Returns the JSX or null
*/
const renderBody = (typeA, typeB) => {
if (typeA != null && (typeof typeA === 'object' || typeof typeA === 'function') || typeB != null && (typeof typeB === 'object' || typeof typeB === 'function')) {
// Image 1
const col1 = /*#__PURE__*/React.createElement(ColumnModify, {
lg: 6
}, /*#__PURE__*/React.createElement(FormWrapper, null, /*#__PURE__*/React.createElement("form", {
method: "post"
}, /*#__PURE__*/React.createElement(FormHeader, null, /*#__PURE__*/React.createElement(HeaderH4, null, "Request quote"), /*#__PURE__*/React.createElement(HeaderP, null, "Select a service and the amount you want to send"), /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Label, {
htmlFor: "service"
}, "Service"), /*#__PURE__*/React.createElement(Input, {
type: "select",
id: "service",
defaultValue: "web"
}, /*#__PURE__*/React.createElement("option", {
value: "",
disabled: true
}, "Which Service Are You Interested In?"), /*#__PURE__*/React.createElement("option", {
value: "web"
}, "Web Development"), /*#__PURE__*/React.createElement("option", {
value: "progressive"
}, "Progressive Web application")))), /*#__PURE__*/React.createElement(FormBody, null, /*#__PURE__*/React.createElement(FormBodyContent, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Label, {
htmlFor: "currency"
}, "How much do you want to spend"), /*#__PURE__*/React.createElement(GroupInput, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Input, {
type: "text",
id: "currency",
placeholder: "$0.00",
autoComplete: "off",
defaultValue: "$1000"
})), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(SelectIconGroup, null, /*#__PURE__*/React.createElement(Input, {
type: "select",
defaultValue: "cad"
}, /*#__PURE__*/React.createElement("option", {
value: "",
disabled: true
}, "Choose currency?"), /*#__PURE__*/React.createElement("option", {
value: "cad"
}, "CAD"), /*#__PURE__*/React.createElement("option", {
value: "usd"
}, "USD")), /*#__PURE__*/React.createElement(SelectIconWrapper, null, /*#__PURE__*/React.createElement(CountryFlagCanada, {
width: 28,
height: 28
})))))), /*#__PURE__*/React.createElement(ListGroup, null, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("span", null, "$12.17 CAD"), /*#__PURE__*/React.createElement("span", null, "Total Fee")), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("span", null, "0.754129"), /*#__PURE__*/React.createElement("span", null, "Exchange Rate"))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Label, {
htmlFor: "recipient"
}, "Recipient gets"), /*#__PURE__*/React.createElement(GroupInput, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Input, {
type: "text",
id: "recipient",
placeholder: "$0.00",
autoComplete: "off",
defaultValue: "$744.95"
})), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(SelectIconGroup, null, /*#__PURE__*/React.createElement(Input, {
type: "select",
defaultValue: "cad"
}, /*#__PURE__*/React.createElement("option", {
value: "",
disabled: true
}, "Choose currency?"), /*#__PURE__*/React.createElement("option", {
value: "cad"
}, "CAD"), /*#__PURE__*/React.createElement("option", {
value: "usd"
}, "USD")), /*#__PURE__*/React.createElement(SelectIconWrapper, null, /*#__PURE__*/React.createElement(CountryFlagCanada, {
width: 28,
height: 28
})))))))), /*#__PURE__*/React.createElement(FormFooter, null, /*#__PURE__*/React.createElement(Button, {
type: "button",
variation: "light"
}, "Cancel"), /*#__PURE__*/React.createElement(Button, {
type: "submit",
color: "primary",
variation: "fill"
}, "Submit"))))); // Image 2
const col2 = /*#__PURE__*/React.createElement(ColumnModify, {
lg: 6
}, /*#__PURE__*/React.createElement(ListGroup2, null, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(AvatarWrapper, null, /*#__PURE__*/React.createElement(Avatar, null, /*#__PURE__*/React.createElement("img", {
src: "https://i.imgur.com/F80hD1h.jpg",
alt: "Avatar"
})), /*#__PURE__*/React.createElement(InfoWrapper, null, /*#__PURE__*/React.createElement(PersonName, null, "Payment to Alexandra Suda"), /*#__PURE__*/React.createElement(PersonAmount, null, "$20,000 ", /*#__PURE__*/React.createElement("span", null, "USD")))), /*#__PURE__*/React.createElement(Badge, {
status: "info"
}, "Finished")), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(AvatarWrapper, null, /*#__PURE__*/React.createElement(Avatar, null, /*#__PURE__*/React.createElement("img", {
src: "https://i.imgur.com/ILmHmHq.jpg",
alt: "Avatar"
})), /*#__PURE__*/React.createElement(InfoWrapper, null, /*#__PURE__*/React.createElement(PersonName, null, "Payment to Aleksandr Solzhenitsyn"), /*#__PURE__*/React.createElement(PersonAmount, null, "$20,000 ", /*#__PURE__*/React.createElement("span", null, "USD")))), /*#__PURE__*/React.createElement(Badge, {
status: "success"
}, "Success")), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(AvatarWrapper, null, /*#__PURE__*/React.createElement(Avatar, null, /*#__PURE__*/React.createElement("img", {
src: "https://i.imgur.com/F80hD1h.jpg",
alt: "Avatar"
})), /*#__PURE__*/React.createElement(InfoWrapper, null, /*#__PURE__*/React.createElement(PersonName, null, "Payment to Alexandra Suda"), /*#__PURE__*/React.createElement(PersonAmount, null, "$20,000 ", /*#__PURE__*/React.createElement("span", null, "USD")))), /*#__PURE__*/React.createElement(Badge, {
status: "info"
}, "Finished")), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(AvatarWrapper, null, /*#__PURE__*/React.createElement(Avatar, null, /*#__PURE__*/React.createElement("img", {
src: "https://i.imgur.com/ILmHmHq.jpg",
alt: "Avatar"
})), /*#__PURE__*/React.createElement(InfoWrapper, null, /*#__PURE__*/React.createElement(PersonName, null, "Payment to Aleksandr Solzhenitsyn"), /*#__PURE__*/React.createElement(PersonAmount, null, "$20,000 ", /*#__PURE__*/React.createElement("span", null, "USD")))), /*#__PURE__*/React.createElement(Badge, {
status: "success"
}, "Success")), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(AvatarWrapper, null, /*#__PURE__*/React.createElement(Avatar, null, /*#__PURE__*/React.createElement("img", {
src: "https://i.imgur.com/F80hD1h.jpg",
alt: "Avatar"
})), /*#__PURE__*/React.createElement(InfoWrapper, null, /*#__PURE__*/React.createElement(PersonName, null, "Payment to Alexandra Suda"), /*#__PURE__*/React.createElement(PersonAmount, null, "$20,000 ", /*#__PURE__*/React.createElement("span", null, "USD")))), /*#__PURE__*/React.createElement(Badge, {
status: "info"
}, "Finished"))));
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(FeatureContainer, {
fluid: true
}, /*#__PURE__*/React.createElement(Row, null, typeA.shift ? /*#__PURE__*/React.createElement(React.Fragment, null, renderData(typeA), col1) : /*#__PURE__*/React.createElement(React.Fragment, null, renderData(typeA), col1), typeB.shift ? /*#__PURE__*/React.createElement(React.Fragment, null, col2, renderData(typeB)) : /*#__PURE__*/React.createElement(React.Fragment, null, renderData(typeB), col2))));
} else {
return null;
}
};
export const Feature5 = props => {
const {
title,
description,
typeA,
typeB
} = props,
attributes = _objectWithoutProperties(props, ["title", "description", "typeA", "typeB"]);
return /*#__PURE__*/React.createElement(Feature, attributes, /*#__PURE__*/React.createElement(FeatureHeader, null, /*#__PURE__*/React.createElement(FeatureContainer, {
fluid: true
}, /*#__PURE__*/React.createElement(FeatureTitle, null, title), /*#__PURE__*/React.createElement(FeatureDescription, null, description))), renderBody(typeA, typeB));
};
Feature5.propTypes = propTypes;
Feature5.defaultProps = defaultProps;