@wulperstudio/cms
Version:
Wulper Studio Library Components CMS
107 lines (106 loc) • 3.84 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Form = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@iconify/react");
var _material = require("@mui/material");
var _icons = require("../../../../helpers/icons");
var _Button = require("../../../../components/Button");
var _IconButtonComponent = require("../../../../components/IconButtonComponent");
var _TextFieldV5LabelOut = require("../../../../components/TextFieldV5LabelOut");
var _AutocompleteSimplev = require("../../../../components/AutocompleteSimplev2");
var _jsxRuntime = require("react/jsx-runtime");
var Form = exports.Form = function Form() {
var theme = (0, _material.useTheme)();
var isMqMd = (0, _material.useMediaQuery)(theme.breakpoints.down('md'));
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
component: "form",
sx: (0, _defineProperty2["default"])({
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
width: '100%',
boxShadow: theme.shadows[1],
padding: '10px 18px',
borderRadius: '50px',
boxSizing: 'border-box',
height: '75px'
}, theme.breakpoints.down('md'), {
flexDirection: 'column',
height: 'auto',
rowGap: '15px',
padding: '15px',
borderRadius: '20px'
}),
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
direction: "row",
alignItems: "center",
columnGap: "15px",
sx: (0, _defineProperty2["default"])({
flex: 1
}, theme.breakpoints.down('md'), {
flexDirection: 'column',
width: '100%'
}),
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextFieldV5LabelOut.TextFieldV5LabelOut, {
variant: "unfilled",
placeholder: "Job title or keyword",
boxProps: {
width: isMqMd ? '100%' : undefined
},
fullWidth: true,
InputProps: {
startAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButtonComponent.IconButtonComponent, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
icon: _icons.ICONS_NAME.search,
color: theme.palette.text.primary
})
})
}
}), !isMqMd && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {
variant: "middle",
orientation: "vertical",
flexItem: true,
sx: {
borderColor: theme.palette.background.paper
}
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_AutocompleteSimplev.AutocompleteSimpleV2, {
options: ['CABA, Argentina', 'Mendoza', 'Bariloche'],
variant: "unfilled",
boxProps: {
width: isMqMd ? '100%' : undefined
},
textFieldProps: {
placeholder: 'New York, USA',
InputProps: {
startAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButtonComponent.IconButtonComponent, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
icon: _icons.ICONS_NAME.location,
color: theme.palette.text.primary
})
})
}
}
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
color: "primary",
variant: "contained",
disableElevation: true,
fullWidth: !!isMqMd,
sx: (0, _defineProperty2["default"])({
borderRadius: '50px',
textTransform: 'none',
height: '100%',
minWidth: '100px'
}, theme.breakpoints.down('md'), {
minWidth: '100%',
minHeight: '42px'
}),
children: "Search"
})]
});
};