doryan/material-you-react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CHANGED: README

Browse Source
This commit is contained in:
doryan04
2024-02-02 14:39:02 +04:00
parent 231bdbec3a
commit d970f5a5b3
23 changed files with 206 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
app/components/buttons.tsx
View File

@@ -12,9 +12,24 @@ export default function Buttons() {
);
return (
<div className={'m3 m3-wrapper'}>
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
}}
>
<h1> Buttons </h1>
<div style={{ display: 'flex', flexDirection: 'row', gap: '2em' }}>
<div
style={{
display: 'flex',
flexDirection: 'row',
gap: '2em',
width: '100%',
height: '100%',
}}
>
<div>
<h2> Default buttons </h2>
<div
@@ -30,7 +45,7 @@ export default function Buttons() {
onClick={callback}
variant={'filled'}
>
Label + {state}
Label
</Button>
<Button variant={'outlined'}>Label</Button>
<Button variant={'tonal'}>Label</Button>

9
app/components/icon-buttons.tsx
View File

@@ -5,7 +5,14 @@ import { IconButton } from '../../src/primitive-components/components';
function IconButtons() {
return (
<div className={'m3 m3-wrapper'}>
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
}}
>
<h1> Icon buttons </h1>
<div style={{ display: 'flex', flexDirection: 'row', gap: '2em' }}>
<div>

83
app/page.tsx
View File

@@ -9,6 +9,7 @@ import IconButtons from './components/icon-buttons';
import { TextFields } from './components/text-fields';
import {
ButtonLayout,
Divider,
SegmentedButtons,
} from '../src/primitive-components/components';
@@ -35,23 +36,79 @@ export default function Page() {
alignItems: 'center',
}}
>
<Buttons />
<IconButtons />
<div className={'m3 m3-wrapper'}>
<div
style={{
display: 'flex',
flexDirection: 'row',
padding: '25px',
}}
>
<SegmentedButtons>
<ButtonLayout>Segment 1</ButtonLayout>
<ButtonLayout>Segment 2</ButtonLayout>
</SegmentedButtons>
</div>
</div>
<div
className={'m3 m3-wrapper'}
style={{
display: 'flex',
flexDirection: 'row',
gap: '0.5em',
justifyContent: 'space-evenly',
alignItems: 'center',
}}
>
<div
style={{
display: 'flex',
flexDirection: 'row',
padding: '25px',
}}
>
<Buttons />
</div>
<Divider
orientation={'vertical'}
variant={'middle-inset'}
/>
<div
style={{
display: 'flex',
flexDirection: 'row',
padding: '25px',
}}
>
<IconButtons />
</div>
</div>
<div
className={'m3 m3-wrapper'}
style={{
display: 'flex',
flexDirection: 'row',
gap: '0.5em',
justifyContent: 'space-evenly',
alignItems: 'center',
}}
>
<Checkboxes />
<Divider
orientation={'vertical'}
variant={'middle-inset'}
/>
<Radios />
<Divider
orientation={'vertical'}
variant={'middle-inset'}
/>
<Badges />
</div>
<Switches />
<Checkboxes />
<Radios />
<TextFields />
<Fabs />
<Badges />
</div>
<SegmentedButtons>
<ButtonLayout>
<span>Segment 1</span>
</ButtonLayout>
<ButtonLayout>
<span>Segment 1</span>
</ButtonLayout>
</SegmentedButtons>
</div>
</Fragment>
);