@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.55 kB
JavaScript
import{jsx as r,jsxs as o}from"react/jsx-runtime";import{EmailOutlined as e}from"@mui/icons-material";import{useTheme as i,Stack as n,Box as t}from"@mui/material";import a from"../../BrandCore/Icon/Icon.js";import c from"../AuthContainerSurface/AuthContainerSurface.js";import l from"../../WebCore/AuthFormHeader/AuthFormHeader.js";import m from"../../WebCore/Button/Button.js";import u from"../../WebCore/ColorBackgroundContainer/ColorBackgroundContainer.js";import d from"../../WebCore/Link/Link.js";import s from"../../WebCore/TextBarDivider/TextBarDivider.js";import h from"../../WebCore/Typography/Typography.js";const p=()=>{const p=i();return r(u,{sx:{display:"flex",justifyContent:"center",py:[2,5,5]},gradient:"tone4",children:o(c,{variation:"overlay",children:[r(l,{headerText:"Create your account"}),o(n,{gap:1,width:"100%",children:[r(m,{variation:"secondary",fullWidth:!0,startIcon:r(a,{name:"social-google-full-colour",size:20}),children:"Log in up using Google"}),r(m,{variation:"secondary",fullWidth:!0,startIcon:r(a,{name:"social-linkedin-full-colour",size:20}),children:"Log in using LinkedIn"})]}),r(s,{text:"or"}),r(t,{mb:p.spacing(p.custom.margin.lg),width:"100%",children:r(m,{variation:"secondary",fullWidth:!0,startIcon:r(e,{}),children:"Sign up with email"})}),o(h,{align:"center",variation:"sm",component:"p",children:["By confirming your email, you agree to our ",r(d,{children:"Terms of use"})," and that you have read and understood our ",r(d,{children:"Privacy & Cookies Policy"}),"."]})]})})};export{p as default};