116 lines
4.1 KiB
TypeScript
116 lines
4.1 KiB
TypeScript
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';
|
|
|
|
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>
|
|
</div>
|
|
</Fragment>
|
|
);
|
|
}
|