rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: format with prettier

Browse source
This commit is contained in:
swve 2024-02-09 21:22:15 +01:00
parent 03fb09c3d6
commit a147ad6610
164 changed files with 11257 additions and 8154 deletions
Download patch file Download diff file Expand all files Collapse all files

168
apps/web/components/StyledElements/Form/Form.tsx
View file

@ -1,104 +1,110 @@
import React from 'react';
import * as Form from '@radix-ui/react-form';
import { styled } from '@stitches/react';
import { blackA } from '@radix-ui/colors';
import { Info } from 'lucide-react';
import React from 'react'
import * as Form from '@radix-ui/react-form'
import { styled } from '@stitches/react'
import { blackA } from '@radix-ui/colors'
import { Info } from 'lucide-react'
const FormLayout = (props: any, onSubmit: any) => (
<FormRoot className='h-fit' onSubmit={props.onSubmit}>
{props.children}
</FormRoot>
);
<FormRoot className="h-fit" onSubmit={props.onSubmit}>
{props.children}
</FormRoot>
)
export const FormLabelAndMessage = (props: { label: string, message?: string }) => (
<div className='flex items-center space-x-3'>
<FormLabel className='grow'>{props.label}</FormLabel>
{props.message && <div className='text-red-700 text-sm items-center rounded-md flex space-x-1'><Info size={10} /><div>{props.message}</div></div> || <></>}
</div>
);
export const FormLabelAndMessage = (props: {
label: string
message?: string
}) => (
<div className="flex items-center space-x-3">
<FormLabel className="grow">{props.label}</FormLabel>
{(props.message && (
<div className="text-red-700 text-sm items-center rounded-md flex space-x-1">
<Info size={10} />
<div>{props.message}</div>
</div>
)) || <></>}
</div>
)
export const FormRoot = styled(Form.Root, {
margin: 7
});
margin: 7,
})
export const FormField = styled(Form.Field, {
display: 'grid',
marginBottom: 10,
});
display: 'grid',
marginBottom: 10,
})
export const FormLabel = styled(Form.Label, {
fontSize: 15,
fontWeight: 500,
lineHeight: '35px',
color: 'black',
});
fontSize: 15,
fontWeight: 500,
lineHeight: '35px',
color: 'black',
})
export const FormMessage = styled(Form.Message, {
fontSize: 13,
color: 'white',
opacity: 0.8,
});
fontSize: 13,
color: 'white',
opacity: 0.8,
})
export const Flex = styled('div', { display: 'flex' });
export const Flex = styled('div', { display: 'flex' })
export const inputStyles = {
all: 'unset',
boxSizing: 'border-box',
width: '100%',
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 4,
fontSize: 15,
color: '#7c7c7c',
background: "#F9FAFB",
boxShadow: `0 0 0 1px #edeeef`,
'&:hover': { boxShadow: `0 0 0 1px #edeeef` },
'&:focus': { boxShadow: `0 0 0 2px #edeeef` },
'&::selection': { backgroundColor: blackA.blackA9, color: 'white' },
};
all: 'unset',
boxSizing: 'border-box',
width: '100%',
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 4,
fontSize: 15,
color: '#7c7c7c',
background: '#F9FAFB',
boxShadow: `0 0 0 1px #edeeef`,
'&:hover': { boxShadow: `0 0 0 1px #edeeef` },
'&:focus': { boxShadow: `0 0 0 2px #edeeef` },
'&::selection': { backgroundColor: blackA.blackA9, color: 'white' },
}
export const Input = styled('input', {
...inputStyles,
height: 35,
lineHeight: 1,
padding: '0 10px',
border: 'none',
});
...inputStyles,
height: 35,
lineHeight: 1,
padding: '0 10px',
border: 'none',
})
export const Textarea = styled('textarea', {
...inputStyles,
resize: 'none',
padding: 10,
});
...inputStyles,
resize: 'none',
padding: 10,
})
export const ButtonBlack = styled('button', {
variants: {
state: {
"loading": {
pointerEvents: 'none',
backgroundColor: "#808080",
},
"none": {
},
},
variants: {
state: {
loading: {
pointerEvents: 'none',
backgroundColor: '#808080',
},
none: {},
},
all: 'unset',
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 8,
padding: '0 15px',
fontSize: 15,
lineHeight: 1,
fontWeight: 500,
height: 35,
},
all: 'unset',
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 8,
padding: '0 15px',
fontSize: 15,
lineHeight: 1,
fontWeight: 500,
height: 35,
background: "#000000",
color: "#FFFFFF",
'&:hover': { backgroundColor: "#181818", cursor: "pointer" },
'&:focus': { boxShadow: `0 0 0 2px black` },
});
background: '#000000',
color: '#FFFFFF',
'&:hover': { backgroundColor: '#181818', cursor: 'pointer' },
'&:focus': { boxShadow: `0 0 0 2px black` },
})
export default FormLayout;
export default FormLayout