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,
    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',
                    }}
                >
                    <Buttons />
                    <IconButtons />
                    <Switches />
                    <Checkboxes />
                    <Radios />
                    <TextFields />
                    <Fabs />
                    <Badges />
                </div>
                <SegmentedButtons>
                    <ButtonLayout>
                        <span>Segment 1</span>
                    </ButtonLayout>
                    <ButtonLayout>
                        <span>Segment 1</span>
                    </ButtonLayout>
                </SegmentedButtons>
            </div>
        </Fragment>
    );
}