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 { 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 { CardActionArea } from '../src/primitive-components/card/card-action-area';
import { Button } from '../src/primitive-components/button-components/button/button';
import { Typography } from '../src/primitive-components/typography/typography';
import {
    ButtonLayout,
    SegmentedButtons,
} from '../src/primitive-components/components';

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: '512px' }}>
                    <Card variant={'outlined'}>
                        <CardHeader>
                            <Typography.h3> Header-3 </Typography.h3>
                        </CardHeader>
                        <CardActionArea>
                            <CardMedia src={testImage1.src} type={'img'} />
                            <CardBody>
                                <p>
                                    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.
                                </p>
                            </CardBody>
                        </CardActionArea>
                        <CardFooter>
                            <div className={'flex flex-row gap-3'}>
                                <Button>label</Button>
                                <SegmentedButtons>
                                    <ButtonLayout>Label 1</ButtonLayout>
                                    <ButtonLayout>Label 2</ButtonLayout>
                                    <ButtonLayout>Label 3</ButtonLayout>
                                </SegmentedButtons>
                            </div>
                        </CardFooter>
                    </Card>
                </div>
            </div>
        </main>
    );
}