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

649 lines
44 KiB
TypeScript
Raw Normal View History

postgres mudila
2024-01-25 22:43:42 +03:00
import React from 'react';
import {TextField} from "../../src/primitive-components/text-field/text-field";
import {Button} from "../../src/primitive-components/button/button";
export function TextFields(_props : any) {
return (
TODO: fix checkbox styles DONE: text fields error state styles and etc
2024-01-28 18:01:07 +03:00
<div className={"m3 m3-wrapper"} style={{display: "flex", flexDirection:"column", gap: "2em"}}>
<h1> Inputs </h1>
postgres mudila
2024-01-25 22:43:42 +03:00
<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 variant={"filled"}
type={"email"}
required/>
<Button variant={"filled"}
type={"submit"}>
Send
</Button>
</form>
TODO: fix checkbox styles DONE: text fields error state styles and etc
2024-01-28 18:01:07 +03:00
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField placeholder={"Placeholder"}
variant={"filled"}
type={"email"}/>
</div>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField placeholder={"Placeholder"}
variant={"filled"}
type={"email"}
disabled/>
</div>
postgres mudila
2024-01-25 22:43:42 +03:00
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
type={"email"}
disabled/>
</div>
</div>
<div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
supportingText={"Supporting text"}/>
</div>
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
type={"email"}
supportingText={"Supporting text"}
required/>
<Button variant={"filled"}
type={"submit"}>
Send
</Button>
</form>
TODO: fix checkbox styles DONE: text fields error state styles and etc
2024-01-28 18:01:07 +03:00
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
type={"email"}
placeholder={"Placeholder"}
supportingText={"Supporting text"}/>
</div>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
type={"email"}
placeholder={"Placeholder"}
supportingText={"Supporting text"}
disabled/>
</div>
postgres mudila
2024-01-25 22:43:42 +03:00
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
type={"email"}
supportingText={"Supporting text"}
disabled/>
</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 variant={"filled"}
type={"email"}
withAfterIcon
required/>
<Button variant={"filled"}
type={"submit"}>
Send
</Button>
</form>
TODO: fix checkbox styles DONE: text fields error state styles and etc
2024-01-28 18:01:07 +03:00
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
placeholder={"Placeholder"}
type={"email"}
withAfterIcon/>
</div>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
placeholder={"Placeholder"}
type={"email"}
withAfterIcon
disabled/>
</div>
postgres mudila
2024-01-25 22:43:42 +03:00
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
type={"email"}
withAfterIcon
disabled/>
</div>
</div>
<div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
withAfterIcon
supportingText={"Supporting text"}/>
</div>
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
type={"email"} withAfterIcon
supportingText={"Supporting text"}
required/>
<Button variant={"filled"}
type={"submit"}>
Send
</Button>
</form>
TODO: fix checkbox styles DONE: text fields error state styles and etc
2024-01-28 18:01:07 +03:00
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
type={"email"}
withAfterIcon
placeholder={"Placeholder"}
supportingText={"Supporting text"}/>
</div>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
type={"email"}
withAfterIcon
placeholder={"Placeholder"}
supportingText={"Supporting text"}
disabled/>
</div>
postgres mudila
2024-01-25 22:43:42 +03:00
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
type={"email"}
withAfterIcon
supportingText={"Supporting text"}
disabled/>
</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 variant={"filled"}
type={"email"}
withBeforeIcon
required/>
<Button variant={"filled"}
type={"submit"}>
Send
</Button>
</form>
TODO: fix checkbox styles DONE: text fields error state styles and etc
2024-01-28 18:01:07 +03:00
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
type={"email"}
placeholder={"Placeholder"}
withBeforeIcon/>
</div>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
type={"email"}
placeholder={"Placeholder"}
withBeforeIcon
disabled/>
</div>
postgres mudila
2024-01-25 22:43:42 +03:00
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
type={"email"}
withBeforeIcon
disabled/>
</div>
</div>
<div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
supportingText={"Supporting text"}
withBeforeIcon/>
</div>
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
type={"email"}
supportingText={"Supporting text"}
withBeforeIcon
required/>
<Button variant={"filled"}
type={"submit"}>
Send
</Button>
</form>
TODO: fix checkbox styles DONE: text fields error state styles and etc
2024-01-28 18:01:07 +03:00
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
type={"email"}
placeholder={"Placeholder"}
supportingText={"Supporting text"}
withBeforeIcon/>
</div>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
type={"email"}
placeholder={"Placeholder"}
supportingText={"Supporting text"}
withBeforeIcon
disabled/>
</div>
postgres mudila
2024-01-25 22:43:42 +03:00
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
type={"email"}
supportingText={"Supporting text"}
withBeforeIcon
disabled/>
</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
withAfterIcon/>
</div>
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
type={"email"}
withBeforeIcon
withAfterIcon
required/>
<Button variant={"filled"}
type={"submit"}>
Send
</Button>
</form>
TODO: fix checkbox styles DONE: text fields error state styles and etc
2024-01-28 18:01:07 +03:00
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
type={"email"}
placeholder={"Placeholder"}
withBeforeIcon
withAfterIcon
/>
</div>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
type={"email"}
placeholder={"Placeholder"}
withBeforeIcon
withAfterIcon
disabled/>
</div>
postgres mudila
2024-01-25 22:43:42 +03:00
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
type={"email"}
withBeforeIcon
withAfterIcon
disabled/>
</div>
</div>
<div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
withBeforeIcon
supportingText={"Supporting text"}
withAfterIcon/>
</div>
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
type={"email"}
withBeforeIcon
withAfterIcon
supportingText={"Supporting text"}
required/>
<Button variant={"filled"}
type={"submit"}>
Send
</Button>
</form>
TODO: fix checkbox styles DONE: text fields error state styles and etc
2024-01-28 18:01:07 +03:00
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
type={"email"}
withBeforeIcon
withAfterIcon
placeholder={"Placeholder"}
supportingText={"Supporting text"}
/>
</div>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
type={"email"}
withBeforeIcon
withAfterIcon
placeholder={"Placeholder"}
supportingText={"Supporting text"}
disabled/>
</div>
postgres mudila
2024-01-25 22:43:42 +03:00
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"filled"}
type={"email"}
withBeforeIcon
withAfterIcon
supportingText={"Supporting text"}
disabled/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
TODO: fix checkbox styles DONE: text fields error state styles and etc
2024-01-28 18:01:07 +03:00
<h2> Outlined Inputs </h2>
postgres mudila
2024-01-25 22:43:42 +03:00
<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 variant={"outlined"}
type={"email"}
required/>
<Button variant={"outlined"}
type={"submit"}>
Send
</Button>
</form>
TODO: fix checkbox styles DONE: text fields error state styles and etc
2024-01-28 18:01:07 +03:00
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
placeholder={"Placeholder"}/>
</div>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
placeholder={"Placeholder"}
disabled/>
</div>
postgres mudila
2024-01-25 22:43:42 +03:00
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
disabled/>
</div>
</div>
<div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
supportingText={"Supporting text"}/>
</div>
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
supportingText={"Supporting text"}
required/>
<Button variant={"outlined"}
type={"submit"}>
Send
</Button>
</form>
TODO: fix checkbox styles DONE: text fields error state styles and etc
2024-01-28 18:01:07 +03:00
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
supportingText={"Supporting text"}
placeholder={"Placeholder"}/>
</div>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
supportingText={"Supporting text"}
placeholder={"Placeholder"}
disabled/>
</div>
postgres mudila
2024-01-25 22:43:42 +03:00
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
supportingText={"Supporting text"}
disabled/>
</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 variant={"outlined"}
type={"email"}
withAfterIcon
required/>
<Button variant={"outlined"}
type={"submit"}>
Send
</Button>
</form>
TODO: fix checkbox styles DONE: text fields error state styles and etc
2024-01-28 18:01:07 +03:00
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
withAfterIcon
placeholder={"Placeholder"}/>
</div>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
withAfterIcon
placeholder={"Placeholder"}
disabled/>
</div>
postgres mudila
2024-01-25 22:43:42 +03:00
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
withAfterIcon
disabled/>
</div>
</div>
<div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
withAfterIcon
supportingText={"Supporting text"}/>
</div>
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"} withAfterIcon
supportingText={"Supporting text"}
required/>
<Button variant={"outlined"}
type={"submit"}>
Send
</Button>
</form>
TODO: fix checkbox styles DONE: text fields error state styles and etc
2024-01-28 18:01:07 +03:00
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
withAfterIcon
supportingText={"Supporting text"}
placeholder={"Placeholder"}/>
</div>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
withAfterIcon
supportingText={"Supporting text"}
placeholder={"Placeholder"}
disabled/>
</div>
postgres mudila
2024-01-25 22:43:42 +03:00
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
withAfterIcon
supportingText={"Supporting text"}
disabled/>
</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 variant={"outlined"}
type={"email"}
withBeforeIcon
required/>
<Button variant={"outlined"}
type={"submit"}>
Send
</Button>
</form>
TODO: fix checkbox styles DONE: text fields error state styles and etc
2024-01-28 18:01:07 +03:00
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
withBeforeIcon
placeholder={"Placeholder"}/>
</div>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
withBeforeIcon
placeholder={"Placeholder"}
disabled/>
</div>
postgres mudila
2024-01-25 22:43:42 +03:00
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
withBeforeIcon
disabled/>
</div>
</div>
<div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
supportingText={"Supporting text"}
withBeforeIcon/>
</div>
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
supportingText={"Supporting text"}
withBeforeIcon
required/>
<Button variant={"outlined"}
type={"submit"}>
Send
</Button>
</form>
TODO: fix checkbox styles DONE: text fields error state styles and etc
2024-01-28 18:01:07 +03:00
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
supportingText={"Supporting text"}
withBeforeIcon
placeholder={"Placeholder"}/>
</div>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
supportingText={"Supporting text"}
withBeforeIcon
placeholder={"Placeholder"}
disabled/>
</div>
postgres mudila
2024-01-25 22:43:42 +03:00
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
supportingText={"Supporting text"}
withBeforeIcon
disabled/>
</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
withAfterIcon/>
</div>
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
withBeforeIcon
withAfterIcon
required/>
<Button variant={"outlined"}
type={"submit"}>
Send
</Button>
</form>
TODO: fix checkbox styles DONE: text fields error state styles and etc
2024-01-28 18:01:07 +03:00
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
withBeforeIcon
withAfterIcon
placeholder={"Placeholder"}/>
</div>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
withBeforeIcon
withAfterIcon
placeholder={"Placeholder"}
disabled/>
</div>
postgres mudila
2024-01-25 22:43:42 +03:00
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
withBeforeIcon
withAfterIcon
disabled/>
</div>
</div>
<div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
withBeforeIcon
supportingText={"Supporting text"}
withAfterIcon/>
</div>
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
withBeforeIcon
withAfterIcon
supportingText={"Supporting text"}
required/>
<Button variant={"outlined"}
type={"submit"}>
Send
</Button>
</form>
TODO: fix checkbox styles DONE: text fields error state styles and etc
2024-01-28 18:01:07 +03:00
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
withBeforeIcon
withAfterIcon
supportingText={"Supporting text"}
placeholder={"Placeholder"}/>
</div>
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
withBeforeIcon
withAfterIcon
supportingText={"Supporting text"}
placeholder={"Placeholder"}
disabled/>
</div>
postgres mudila
2024-01-25 22:43:42 +03:00
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
<TextField variant={"outlined"}
type={"email"}
withBeforeIcon
withAfterIcon
supportingText={"Supporting text"}
disabled/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}