material-you-react/app/components/text-fields.tsx

649 lines
44 KiB
TypeScript

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 (
<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 variant={"filled"}
type={"email"}
required/>
<Button variant={"filled"}
type={"submit"}>
Send
</Button>
</form>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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"}}>
<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 variant={"outlined"}
type={"email"}
required/>
<Button variant={"outlined"}
type={"submit"}>
Send
</Button>
</form>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
);
}