doryan
/
material-you-react
0
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity
material-you-react/app/components/text-fields.tsx

1505 lines
76 KiB
TypeScript
Raw Normal View History

ESLINT is holy crap
2024-02-01 00:58:19 +03:00
import React from 'react';
CHANGED: style and components directories, removed redundant imports from styles ADDED: container and card component, card-subcomponents WIP
2024-02-03 00:34:54 +03:00
import { TextField } from '../../src/primitive-components/input-components/text-field/text-field';
import { Button } from '../../src/primitive-components/button-components/button/button';
ESLINT is holy crap
2024-02-01 00:58:19 +03:00
export function TextFields() {
return (
<div
className={'m3 m3-wrapper'}
style={{ display: 'flex', flexDirection: 'column', gap: '2em' }}
>
<h1> Inputs </h1>
<div>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<h2> Filled Inputs </h2>
<div
style={{
display: 'flex',
flexDirection: 'row',
gap: '2em',
}}
>
<div>
<div
style={{
display: 'flex',
flexDirection: 'row',
gap: '2em',
}}
>
<div
style={{
width: '210px',
display: 'flex',
flexDirection: 'column',
gap: '2em',
}}
>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField variant={'filled'} />
</div>
<form
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
required
type={'email'}
variant={'filled'}
/>
<Button
type={'submit'}
variant={'filled'}
>
Send
</Button>
</form>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
placeholder={'Placeholder'}
type={'email'}
variant={'filled'}
/>
</div>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
disabled
placeholder={'Placeholder'}
type={'email'}
variant={'filled'}
/>
</div>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
disabled
type={'email'}
variant={'filled'}
/>
</div>
</div>
<div
style={{
width: '210px',
display: 'flex',
flexDirection: 'column',
gap: '2em',
}}
>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
supportingText={'Supporting text'}
variant={'filled'}
/>
</div>
<form
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
required
supportingText={'Supporting text'}
type={'email'}
variant={'filled'}
/>
<Button
type={'submit'}
variant={'filled'}
>
Send
</Button>
</form>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
placeholder={'Placeholder'}
supportingText={'Supporting text'}
type={'email'}
variant={'filled'}
/>
</div>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
disabled
placeholder={'Placeholder'}
supportingText={'Supporting text'}
type={'email'}
variant={'filled'}
/>
</div>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
disabled
supportingText={'Supporting text'}
type={'email'}
variant={'filled'}
/>
</div>
</div>
</div>
<div
style={{
display: 'flex',
flexDirection: 'row',
gap: '2em',
}}
>
<div
style={{
width: '210px',
display: 'flex',
flexDirection: 'column',
gap: '2em',
}}
>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
variant={'filled'}
withAfterIcon
/>
</div>
<form
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
required
type={'email'}
variant={'filled'}
withAfterIcon
/>
<Button
type={'submit'}
variant={'filled'}
>
Send
</Button>
</form>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
placeholder={'Placeholder'}
type={'email'}
variant={'filled'}
withAfterIcon
/>
</div>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
disabled
placeholder={'Placeholder'}
type={'email'}
variant={'filled'}
withAfterIcon
/>
</div>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
disabled
type={'email'}
variant={'filled'}
withAfterIcon
/>
</div>
</div>
<div
style={{
width: '210px',
display: 'flex',
flexDirection: 'column',
gap: '2em',
}}
>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
supportingText={'Supporting text'}
variant={'filled'}
withAfterIcon
/>
</div>
<form
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
required
supportingText={'Supporting text'}
type={'email'}
variant={'filled'}
withAfterIcon
/>
<Button
type={'submit'}
variant={'filled'}
>
Send
</Button>
</form>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
placeholder={'Placeholder'}
supportingText={'Supporting text'}
type={'email'}
variant={'filled'}
withAfterIcon
/>
</div>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
disabled
placeholder={'Placeholder'}
supportingText={'Supporting text'}
type={'email'}
variant={'filled'}
withAfterIcon
/>
</div>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
disabled
supportingText={'Supporting text'}
type={'email'}
variant={'filled'}
withAfterIcon
/>
</div>
</div>
</div>
</div>
<div>
<div
style={{
display: 'flex',
flexDirection: 'row',
gap: '2em',
}}
>
<div
style={{
width: '210px',
display: 'flex',
flexDirection: 'column',
gap: '2em',
}}
>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
variant={'filled'}
withBeforeIcon
/>
</div>
<form
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
required
type={'email'}
variant={'filled'}
withBeforeIcon
/>
<Button
type={'submit'}
variant={'filled'}
>
Send
</Button>
</form>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
placeholder={'Placeholder'}
type={'email'}
variant={'filled'}
withBeforeIcon
/>
</div>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
disabled
placeholder={'Placeholder'}
type={'email'}
variant={'filled'}
withBeforeIcon
/>
</div>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
disabled
type={'email'}
variant={'filled'}
withBeforeIcon
/>
</div>
</div>
<div
style={{
width: '210px',
display: 'flex',
flexDirection: 'column',
gap: '2em',
}}
>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
supportingText={'Supporting text'}
variant={'filled'}
withBeforeIcon
/>
</div>
<form
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
required
supportingText={'Supporting text'}
type={'email'}
variant={'filled'}
withBeforeIcon
/>
<Button
type={'submit'}
variant={'filled'}
>
Send
</Button>
</form>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
placeholder={'Placeholder'}
supportingText={'Supporting text'}
type={'email'}
variant={'filled'}
withBeforeIcon
/>
</div>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
disabled
placeholder={'Placeholder'}
supportingText={'Supporting text'}
type={'email'}
variant={'filled'}
withBeforeIcon
/>
</div>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
disabled
supportingText={'Supporting text'}
type={'email'}
variant={'filled'}
withBeforeIcon
/>
</div>
</div>
</div>
<div
style={{
display: 'flex',
flexDirection: 'row',
gap: '2em',
}}
>
<div
style={{
width: '210px',
display: 'flex',
flexDirection: 'column',
gap: '2em',
}}
>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
variant={'filled'}
withAfterIcon
withBeforeIcon
/>
</div>
<form
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
required
type={'email'}
variant={'filled'}
withAfterIcon
withBeforeIcon
/>
<Button
type={'submit'}
variant={'filled'}
>
Send
</Button>
</form>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
placeholder={'Placeholder'}
type={'email'}
variant={'filled'}
withAfterIcon
withBeforeIcon
/>
</div>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
disabled
placeholder={'Placeholder'}
type={'email'}
variant={'filled'}
withAfterIcon
withBeforeIcon
/>
</div>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
disabled
type={'email'}
variant={'filled'}
withAfterIcon
withBeforeIcon
/>
</div>
</div>
<div
style={{
width: '210px',
display: 'flex',
flexDirection: 'column',
gap: '2em',
}}
>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
supportingText={'Supporting text'}
variant={'filled'}
withAfterIcon
withBeforeIcon
/>
</div>
<form
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
required
supportingText={'Supporting text'}
type={'email'}
variant={'filled'}
withAfterIcon
withBeforeIcon
/>
<Button
type={'submit'}
variant={'filled'}
>
Send
</Button>
</form>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
placeholder={'Placeholder'}
supportingText={'Supporting text'}
type={'email'}
variant={'filled'}
withAfterIcon
withBeforeIcon
/>
</div>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
disabled
placeholder={'Placeholder'}
supportingText={'Supporting text'}
type={'email'}
variant={'filled'}
withAfterIcon
withBeforeIcon
/>
</div>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
disabled
supportingText={'Supporting text'}
type={'email'}
variant={'filled'}
withAfterIcon
withBeforeIcon
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<h2> Outlined Inputs </h2>
<div
style={{
display: 'flex',
flexDirection: 'row',
gap: '2em',
}}
>
<div>
<div
style={{
display: 'flex',
flexDirection: 'row',
gap: '2em',
}}
>
<div
style={{
width: '210px',
display: 'flex',
flexDirection: 'column',
gap: '2em',
}}
>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField variant={'outlined'} />
</div>
<form
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
required
type={'email'}
variant={'outlined'}
/>
<Button
type={'submit'}
variant={'outlined'}
>
Send
</Button>
</form>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
placeholder={'Placeholder'}
type={'email'}
variant={'outlined'}
/>
</div>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
disabled
placeholder={'Placeholder'}
type={'email'}
variant={'outlined'}
/>
</div>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
disabled
type={'email'}
variant={'outlined'}
/>
</div>
</div>
<div
style={{
width: '210px',
display: 'flex',
flexDirection: 'column',
gap: '2em',
}}
>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
supportingText={'Supporting text'}
variant={'outlined'}
/>
</div>
<form
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
required
supportingText={'Supporting text'}
type={'email'}
variant={'outlined'}
/>
<Button
type={'submit'}
variant={'outlined'}
>
Send
</Button>
</form>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
placeholder={'Placeholder'}
supportingText={'Supporting text'}
type={'email'}
variant={'outlined'}
/>
</div>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
disabled
placeholder={'Placeholder'}
supportingText={'Supporting text'}
type={'email'}
variant={'outlined'}
/>
</div>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
disabled
supportingText={'Supporting text'}
type={'email'}
variant={'outlined'}
/>
</div>
</div>
</div>
<div
style={{
display: 'flex',
flexDirection: 'row',
gap: '2em',
}}
>
<div
style={{
width: '210px',
display: 'flex',
flexDirection: 'column',
gap: '2em',
}}
>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
variant={'outlined'}
withAfterIcon
/>
</div>
<form
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
required
type={'email'}
variant={'outlined'}
withAfterIcon
/>
<Button
type={'submit'}
variant={'outlined'}
>
Send
</Button>
</form>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
placeholder={'Placeholder'}
type={'email'}
variant={'outlined'}
withAfterIcon
/>
</div>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
disabled
placeholder={'Placeholder'}
type={'email'}
variant={'outlined'}
withAfterIcon
/>
</div>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
disabled
type={'email'}
variant={'outlined'}
withAfterIcon
/>
</div>
</div>
<div
style={{
width: '210px',
display: 'flex',
flexDirection: 'column',
gap: '2em',
}}
>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
supportingText={'Supporting text'}
variant={'outlined'}
withAfterIcon
/>
</div>
<form
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
required
supportingText={'Supporting text'}
type={'email'}
variant={'outlined'}
withAfterIcon
/>
<Button
type={'submit'}
variant={'outlined'}
>
Send
</Button>
</form>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
placeholder={'Placeholder'}
supportingText={'Supporting text'}
type={'email'}
variant={'outlined'}
withAfterIcon
/>
</div>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
disabled
placeholder={'Placeholder'}
supportingText={'Supporting text'}
type={'email'}
variant={'outlined'}
withAfterIcon
/>
</div>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
disabled
supportingText={'Supporting text'}
type={'email'}
variant={'outlined'}
withAfterIcon
/>
</div>
</div>
</div>
</div>
<div>
<div
style={{
display: 'flex',
flexDirection: 'row',
gap: '2em',
}}
>
<div
style={{
width: '210px',
display: 'flex',
flexDirection: 'column',
gap: '2em',
}}
>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
variant={'outlined'}
withBeforeIcon
/>
</div>
<form
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
required
type={'email'}
variant={'outlined'}
withBeforeIcon
/>
<Button
type={'submit'}
variant={'outlined'}
>
Send
</Button>
</form>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
placeholder={'Placeholder'}
type={'email'}
variant={'outlined'}
withBeforeIcon
/>
</div>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
disabled
placeholder={'Placeholder'}
type={'email'}
variant={'outlined'}
withBeforeIcon
/>
</div>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
disabled
type={'email'}
variant={'outlined'}
withBeforeIcon
/>
</div>
</div>
<div
style={{
width: '210px',
display: 'flex',
flexDirection: 'column',
gap: '2em',
}}
>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
supportingText={'Supporting text'}
variant={'outlined'}
withBeforeIcon
/>
</div>
<form
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
required
supportingText={'Supporting text'}
type={'email'}
variant={'outlined'}
withBeforeIcon
/>
<Button
type={'submit'}
variant={'outlined'}
>
Send
</Button>
</form>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
placeholder={'Placeholder'}
supportingText={'Supporting text'}
type={'email'}
variant={'outlined'}
withBeforeIcon
/>
</div>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
disabled
placeholder={'Placeholder'}
supportingText={'Supporting text'}
type={'email'}
variant={'outlined'}
withBeforeIcon
/>
</div>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
disabled
supportingText={'Supporting text'}
type={'email'}
variant={'outlined'}
withBeforeIcon
/>
</div>
</div>
</div>
<div
style={{
display: 'flex',
flexDirection: 'row',
gap: '2em',
}}
>
<div
style={{
width: '210px',
display: 'flex',
flexDirection: 'column',
gap: '2em',
}}
>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
variant={'outlined'}
withAfterIcon
withBeforeIcon
/>
</div>
<form
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
required
type={'email'}
variant={'outlined'}
withAfterIcon
withBeforeIcon
/>
<Button
type={'submit'}
variant={'outlined'}
>
Send
</Button>
</form>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
placeholder={'Placeholder'}
type={'email'}
variant={'outlined'}
withAfterIcon
withBeforeIcon
/>
</div>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
disabled
placeholder={'Placeholder'}
type={'email'}
variant={'outlined'}
withAfterIcon
withBeforeIcon
/>
</div>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
disabled
type={'email'}
variant={'outlined'}
withAfterIcon
withBeforeIcon
/>
</div>
</div>
<div
style={{
width: '210px',
display: 'flex',
flexDirection: 'column',
gap: '2em',
}}
>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
supportingText={'Supporting text'}
variant={'outlined'}
withAfterIcon
withBeforeIcon
/>
</div>
<form
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
required
supportingText={'Supporting text'}
type={'email'}
variant={'outlined'}
withAfterIcon
withBeforeIcon
/>
<Button
type={'submit'}
variant={'outlined'}
>
Send
</Button>
</form>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
placeholder={'Placeholder'}
supportingText={'Supporting text'}
type={'email'}
variant={'outlined'}
withAfterIcon
withBeforeIcon
/>
</div>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
disabled
placeholder={'Placeholder'}
supportingText={'Supporting text'}
type={'email'}
variant={'outlined'}
withAfterIcon
withBeforeIcon
/>
</div>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
}}
>
<TextField
disabled
supportingText={'Supporting text'}
type={'email'}
variant={'outlined'}
withAfterIcon
withBeforeIcon
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}