@wulperstudio/cms
Version:
Wulper Studio Library Components CMS
100 lines • 3.25 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import React from 'react';
import { Icon } from '@iconify/react';
import { Divider, useTheme, Stack, useMediaQuery, Box } from '@mui/material';
import { ICONS_NAME } from '../../../../helpers/icons';
import { Button } from '../../../../components/Button';
import { IconButtonComponent } from '../../../../components/IconButtonComponent';
import { TextFieldV5LabelOut } from '../../../../components/TextFieldV5LabelOut';
import { AutocompleteSimpleV2 } from '../../../../components/AutocompleteSimplev2';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export var Form = function Form() {
var theme = useTheme();
var isMqMd = useMediaQuery(theme.breakpoints.down('md'));
return /*#__PURE__*/_jsxs(Box, {
component: "form",
sx: _defineProperty({
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__*/_jsxs(Stack, {
direction: "row",
alignItems: "center",
columnGap: "15px",
sx: _defineProperty({
flex: 1
}, theme.breakpoints.down('md'), {
flexDirection: 'column',
width: '100%'
}),
children: [/*#__PURE__*/_jsx(TextFieldV5LabelOut, {
variant: "unfilled",
placeholder: "Job title or keyword",
boxProps: {
width: isMqMd ? '100%' : undefined
},
fullWidth: true,
InputProps: {
startAdornment: /*#__PURE__*/_jsx(IconButtonComponent, {
children: /*#__PURE__*/_jsx(Icon, {
icon: ICONS_NAME.search,
color: theme.palette.text.primary
})
})
}
}), !isMqMd && /*#__PURE__*/_jsx(Divider, {
variant: "middle",
orientation: "vertical",
flexItem: true,
sx: {
borderColor: theme.palette.background.paper
}
}), /*#__PURE__*/_jsx(AutocompleteSimpleV2, {
options: ['CABA, Argentina', 'Mendoza', 'Bariloche'],
variant: "unfilled",
boxProps: {
width: isMqMd ? '100%' : undefined
},
textFieldProps: {
placeholder: 'New York, USA',
InputProps: {
startAdornment: /*#__PURE__*/_jsx(IconButtonComponent, {
children: /*#__PURE__*/_jsx(Icon, {
icon: ICONS_NAME.location,
color: theme.palette.text.primary
})
})
}
}
})]
}), /*#__PURE__*/_jsx(Button, {
color: "primary",
variant: "contained",
disableElevation: true,
fullWidth: !!isMqMd,
sx: _defineProperty({
borderRadius: '50px',
textTransform: 'none',
height: '100%',
minWidth: '100px'
}, theme.breakpoints.down('md'), {
minWidth: '100%',
minHeight: '42px'
}),
children: "Search"
})]
});
};