@wulperstudio/cms
Version:
Wulper Studio Library Components CMS
189 lines • 6.62 kB
JavaScript
var _div, _AvatarGroupOutput, _TextMultiline;
import React from 'react';
import { Icon } from '@iconify/react';
import { Divider, Stack, Tooltip, useTheme } from '@mui/material';
import { LayoutDrawer } from '../../../LayoutDrawer';
import { consts } from '../../../../helpers/consts';
import { ICONS_NAME } from '../../../../helpers/icons';
import { DrawerSection, HeaderFlex } from '../../../../organisms';
import { AvatarGroupOutput, AvatarV2, ChipOutput, IconButtonComponent, IconButtonOutput, TextForLinesOutput, TextMultiline } from '../../../../components';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
export var Drawer = function Drawer(_ref) {
var _onClick = _ref.onClick;
var theme = useTheme();
return /*#__PURE__*/_jsx(LayoutDrawer, {
rowGap: "15px",
header: /*#__PURE__*/_jsxs(HeaderFlex, {
sx: {
width: '100%'
},
backgroundColor: theme.palette.background["default"],
children: [/*#__PURE__*/_jsxs(Stack, {
direction: "row",
justifyContent: "space-between",
alignItems: "center",
sx: {
paddingBottom: '8px',
width: '100%'
},
children: [/*#__PURE__*/_jsx(IconButtonComponent, {
children: /*#__PURE__*/_jsx(Icon, {
icon: ICONS_NAME.back_chevron,
color: theme.palette.text.primary
})
}), _div || (_div = /*#__PURE__*/_jsx("div", {
children: /*#__PURE__*/_jsx(TextForLinesOutput, {
clines: 1,
text: "Contact info",
fontSize: "18px",
fontWeight: "600"
})
})), /*#__PURE__*/_jsx(IconButtonComponent, {
iconProps: {
onClick: function onClick() {
return _onClick && _onClick();
}
},
children: /*#__PURE__*/_jsx(Icon, {
icon: ICONS_NAME.close,
color: theme.palette.text.primary
})
})]
}), /*#__PURE__*/_jsx(Divider, {
variant: "fullWidth",
sx: {
borderColor: theme.palette.background.paper
}
})]
}),
body: /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(DrawerSection, {
image: consts.backgroundImageRandom,
titleText: "Company Name",
subtitleText: "Barcelona, Spain",
sizeAvatar: "75px"
}), /*#__PURE__*/_jsxs(Stack, {
rowGap: "10px",
children: [/*#__PURE__*/_jsx(IconButtonOutput, {
label: "Social profiles",
backgroundColor: true,
iconProps: {
sx: {
boxShadow: '0px 4px 24px rgba(0, 0, 0, 0.04)'
}
},
listIcon: [{
icon: /*#__PURE__*/_jsx(Icon, {
icon: ICONS_NAME.web,
color: theme.palette.text.primary
}),
url: ''
}, {
icon: /*#__PURE__*/_jsx(Icon, {
icon: ICONS_NAME.linkedin,
color: theme.palette.text.primary
}),
url: ''
}, {
icon: /*#__PURE__*/_jsx(Icon, {
icon: ICONS_NAME.instagram,
color: theme.palette.text.primary
}),
url: ''
}, {
icon: /*#__PURE__*/_jsx(Icon, {
icon: ICONS_NAME.youtube,
color: theme.palette.text.primary
}),
url: ''
}]
}), /*#__PURE__*/_jsx(Divider, {
variant: "fullWidth",
sx: {
borderColor: theme.palette.background.paper
}
}), /*#__PURE__*/_jsx(ChipOutput, {
label: "Sector",
backgroundColor: "transparent",
listChip: [{
label: 'In progress'
}, {
label: 'lorem'
}, {
label: 'In progress lorem ipsum dolorem'
}, {
label: 'In progress iin progress'
}],
textColor: "#2236CB",
backgroundColorChip: "#2236cb26"
}), /*#__PURE__*/_jsx(Divider, {
variant: "fullWidth",
sx: {
borderColor: theme.palette.background.paper
}
}), /*#__PURE__*/_jsx(Divider, {
variant: "fullWidth",
sx: {
borderColor: theme.palette.background.paper
}
}), _AvatarGroupOutput || (_AvatarGroupOutput = /*#__PURE__*/_jsxs(AvatarGroupOutput, {
label: "Members",
backgroundColor: true,
borderColor: "#fff",
maxAvatars: 7,
children: [/*#__PURE__*/_jsx(AvatarV2, {
size: "medium",
alt: "Remy",
src: "https://mui.com/static/images/avatar/1.jpg"
}), /*#__PURE__*/_jsx(Tooltip, {
title: "Jefferson Farfan",
children: /*#__PURE__*/_jsx(AvatarV2, {
size: "medium",
alt: "Doe",
src: "https://mui.com/static/images/avatar/1.jpg"
})
}), /*#__PURE__*/_jsx(AvatarV2, {
size: "medium",
alt: "Jenny",
src: "https://mui.com/static/images/avatar/1.jpg"
}), /*#__PURE__*/_jsx(AvatarV2, {
size: "medium",
alt: "Alex",
src: "https://mui.com/static/images/avatar/1.jpg"
}), /*#__PURE__*/_jsx(AvatarV2, {
size: "medium",
alt: "Jenny",
src: "https://mui.com/static/images/avatar/1.jpg"
}), /*#__PURE__*/_jsx(AvatarV2, {
size: "medium",
alt: "Alex",
src: "https://mui.com/static/images/avatar/1.jpg"
}), /*#__PURE__*/_jsx(AvatarV2, {
size: "medium",
alt: "Alex",
src: "https://mui.com/static/images/avatar/1.jpg"
}), /*#__PURE__*/_jsx(AvatarV2, {
size: "medium",
alt: "Alex",
src: "https://mui.com/static/images/avatar/1.jpg"
})]
})), /*#__PURE__*/_jsx(Divider, {
variant: "fullWidth",
sx: {
borderColor: theme.palette.background.paper
}
}), _TextMultiline || (_TextMultiline = /*#__PURE__*/_jsx(TextMultiline, {
label: "Description",
text: "Casa, de aspecto rural, con 3 banos de nivel intermedio, dos camas y cocina de alto nivel",
backgroundColor: true,
borderColor: "#fff"
})), /*#__PURE__*/_jsx(Divider, {
variant: "fullWidth",
sx: {
borderColor: theme.palette.background.paper
}
})]
})]
})
});
};