60 lines
2.5 KiB
TypeScript
60 lines
2.5 KiB
TypeScript
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 { 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'}>
|
|
<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>
|
|
);
|
|
}
|