2024-02-02 01:52:36 +03:00
|
|
|
import React, { Fragment } from 'react';
|
2024-02-01 00:58:19 +03:00
|
|
|
import Fabs from './components/fabs';
|
|
|
|
import Badges from './components/badges';
|
2024-02-01 21:39:27 +03:00
|
|
|
import Radios from './components/radios';
|
2024-02-01 00:58:19 +03:00
|
|
|
import Buttons from './components/buttons';
|
|
|
|
import Switches from './components/switches';
|
|
|
|
import Checkboxes from './components/checkboxes';
|
2024-02-01 21:39:27 +03:00
|
|
|
import IconButtons from './components/icon-buttons';
|
2024-02-01 00:58:19 +03:00
|
|
|
import { TextFields } from './components/text-fields';
|
2024-02-02 01:52:36 +03:00
|
|
|
import {
|
|
|
|
ButtonLayout,
|
|
|
|
SegmentedButtons,
|
|
|
|
} from '../src/primitive-components/components';
|
2024-02-01 00:58:19 +03:00
|
|
|
|
2024-01-31 23:46:06 +03:00
|
|
|
export default function Page() {
|
2024-02-01 00:58:19 +03:00
|
|
|
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',
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<Buttons />
|
|
|
|
<IconButtons />
|
|
|
|
<Switches />
|
|
|
|
<Checkboxes />
|
|
|
|
<Radios />
|
|
|
|
<TextFields />
|
|
|
|
<Fabs />
|
|
|
|
<Badges />
|
|
|
|
</div>
|
2024-02-02 01:52:36 +03:00
|
|
|
<SegmentedButtons>
|
|
|
|
<ButtonLayout>
|
|
|
|
<span>Segment 1</span>
|
|
|
|
</ButtonLayout>
|
|
|
|
<ButtonLayout>
|
|
|
|
<span>Segment 1</span>
|
|
|
|
</ButtonLayout>
|
|
|
|
</SegmentedButtons>
|
2024-02-01 00:58:19 +03:00
|
|
|
</div>
|
|
|
|
</Fragment>
|
|
|
|
);
|
2024-01-31 23:46:06 +03:00
|
|
|
}
|