material-you-react/app/page.tsx

import React from 'react';
import testImage1 from './test-images/test-image-1.jpg';
import { Card } from '../src/primitive-components/card/card';
import { Checkbox } from '../src/primitive-components/components';
import { CardBody } from '../src/primitive-components/card/card-body';
import { CardMedia } from '../src/primitive-components/card/card-media';
import { CardFooter } from '../src/primitive-components/card/card-footer';
import { CardHeader } from '../src/primitive-components/card/card-header';
import { Typography } from '../src/primitive-components/typography/typography';
import { CardActionArea } from '../src/primitive-components/card/card-action-area';
import { Slider } from '../src/primitive-components/input-components/slider/slider';
import { Button } from '../src/primitive-components/button-components/button/button';
import { SegmentButton } from '../src/primitive-components/button-components/segmented-buttons/segment-button';
import { SegmentedButtons } from '../src/primitive-components/button-components/segmented-buttons/segmented-buttons';

export default function Page() {
    return (
        <main>
            <div
                style={{
                    display: 'flex',
                    flexDirection: 'column',
                    alignItems: 'center',
                    gap: '8px',
                    padding: '8px',
                }}
            >
                <div
                    style={{ display: 'flex', gap: '8px', maxWidth: '1024px' }}
                >
                    <Card variant={'outlined'}>
                        <CardHeader>
                            <Typography role={'headline'} size={'large'}>
                                Welcome to Material You for Next.js!
                            </Typography>
                            <Typography role={'body'} size={'large'}>
                                {"It's UI kit for fast frontend development!"}
                            </Typography>
                        </CardHeader>
                        <CardActionArea>
                            <CardMedia src={testImage1.src} type={'img'} />
                            <CardBody>
                                <Typography role={'body'} size={'large'}>
                                    Lorem ipsum dolor sit amet, consecrate
                                    adipiscing elit, sed do eiusmod tempor
                                    incididunt ut labore et dolore magna aliqua.
                                    Ut enim ad minim veniam, quis nostrud
                                    exercitation ullamco laboris nisi ut aliquip
                                    ex ea commodo consequat. Duis aute irure
                                    dolor in reprehenderit in voluptate velit
                                    esse cillum dolore eu fugiat nulla pariatur.
                                    Excepteur sint occaecat cupidatat non
                                    proident, sunt in culpa qui officia deserunt
                                    mollit anim id est laborum.
                                </Typography>
                            </CardBody>
                        </CardActionArea>
                        <CardFooter>
                            <div className={'flex flex-row gap-3'}>
                                <Button icon={'add'}>Label 1</Button>
                                <Button icon={'add'} iconPlace={'right'}>
                                    Label 2
                                </Button>
                                <SegmentedButtons>
                                    <SegmentButton
                                        fillIcon={1}
                                        icon={'change_history'}
                                    >
                                        Label 1
                                    </SegmentButton>
                                    <SegmentButton
                                        fillIcon={1}
                                        icon={'change_history'}
                                        iconPlace={'right'}
                                    >
                                        Label 2
                                    </SegmentButton>
                                    <SegmentButton disabled>
                                        Label 3
                                    </SegmentButton>
                                </SegmentedButtons>
                                <Checkbox />
                                <Slider />
                            </div>
                        </CardFooter>
                    </Card>
                </div>
            </div>
        </main>
    );
}