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

fix: flexboxes containers

Browse Source
This commit is contained in:
doryan
2024-02-02 17:42:45 +04:00
parent d970f5a5b3
commit 627e33c4b7
20 changed files with 816 additions and 1128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
app/page.tsx
View File

@@ -1,113 +1,24 @@
import React, { Fragment } from 'react';
import Fabs from './components/fabs';
import Badges from './components/badges';
import Radios from './components/radios';
import Buttons from './components/buttons';
import Switches from './components/switches';
import Checkboxes from './components/checkboxes';
import IconButtons from './components/icon-buttons';
import { TextFields } from './components/text-fields';
import {
ButtonLayout,
Divider,
SegmentedButtons,
} from '../src/primitive-components/components';
import { Button, Divider } from '../src/primitive-components/components';
export default function Page() {
return (
<Fragment>
<div
style={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
overflowX: 'auto',
gap: '0em',
}}
>
<h1>Google Material You UI kit</h1>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
justifyContent: 'center',
alignItems: 'center',
}}
>
<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 />
<TextFields />
<Fabs />
<div className={'m3 m3-wrapper'}>
<div>
<Button>Label</Button>
</div>
<Divider orientation={'vertical'} variant={'full-width'} />
<div>
<Button>Label</Button>
</div>
<Divider orientation={'vertical'} variant={'inset'} />
<div>
<Button>Label</Button>
</div>
<Divider orientation={'vertical'} variant={'middle-inset'} />
<div>
<Button disabled>Label</Button>
</div>
</div>
</Fragment>