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 {
    Button,
    Checkbox,
    IconButton,
} 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 { 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'}>
                        <CardFooter>
                            <SegmentedButtons toggled={true}>
                                <SegmentButton
                                    fillIcon={1}
                                    icon={'change_history'}
                                >
                                    fin ita la comedia
                                </SegmentButton>
                                <SegmentButton
                                    fillIcon={1}
                                    icon={'change_history'}
                                    iconPlace={'right'}
                                >
                                    Label 2
                                </SegmentButton>
                                <SegmentButton disabled>Label 3</SegmentButton>
                            </SegmentedButtons>
                        </CardFooter>
                    </Card>
                </div>
            </div>
        </main>
    );
}