doryan/material-you-react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ADDED: base styles for segmented buttons

Browse Source
This commit is contained in:
doryan
2024-02-08 12:49:46 +04:00
parent 0d1b643abf
commit e97411466d
13 changed files with 906 additions and 1892 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
app/page.tsx
View File

@@ -8,6 +8,10 @@ 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 (
@@ -21,15 +25,10 @@ export default function Page() {
padding: '8px',
}}
>
<div style={{ display: 'flex', gap: '8px', maxWidth: '90vw' }}>
<div style={{ display: 'flex', gap: '8px', maxWidth: '512px' }}>
<Card variant={'outlined'}>
<CardHeader>
<Typography.h1> Header-1 </Typography.h1>
<Typography.h2> Header-2 </Typography.h2>
<Typography.h3> Header-3 </Typography.h3>
<Typography.h4> Header-4 </Typography.h4>
<Typography.h5> Header-5 </Typography.h5>
<Typography.h6> Header-6 </Typography.h6>
</CardHeader>
<CardActionArea>
<CardMedia src={testImage1.src} type={'img'} />
@@ -50,88 +49,14 @@ export default function Page() {
</CardBody>
</CardActionArea>
<CardFooter>
<Button>label</Button>
</CardFooter>
</Card>
<Card variant={'elevated'}>
<CardMedia src={testImage1.src} type={'img'} />
<CardActionArea>
<CardBody>
<h4>
<strong>Sub-header</strong>
</h4>
<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>
<Button>label</Button>
</CardFooter>
</Card>
<Card variant={'elevated'}>
<CardActionArea>
<CardMedia src={testImage1.src} type={'img'} />
<CardBody>
<h4>
<strong>Sub-header</strong>
</h4>
<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>
<Button>label</Button>
</CardFooter>
</Card>
<Card variant={'elevated'}>
<CardHeader>
<h1>Header</h1>
</CardHeader>
<CardMedia src={testImage1.src} type={'img'} />
<CardActionArea>
<CardBody>
<h4>
<strong>Sub-header</strong>
</h4>
<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>
<Button>label</Button>
<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>