Merge remote-tracking branch 'origin/main'

This commit is contained in:
doryan04 2024-02-02 18:14:10 +04:00
commit fe273c2759
19 changed files with 791 additions and 1128 deletions

View File

@ -1,113 +1,24 @@
import React, { Fragment } from 'react';
import Fabs from './components/fabs';
import Badges from './components/badges';
import Radios from './components/radios';
import Buttons from './components/buttons';
import Switches from './components/switches';
import Checkboxes from './components/checkboxes';
import IconButtons from './components/icon-buttons';
import { TextFields } from './components/text-fields';
import {
ButtonLayout,
Divider,
SegmentedButtons,
} from '../src/primitive-components/components';
import { Button, Divider } from '../src/primitive-components/components';
export default function Page() {
return (
<Fragment>
<div
style={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
overflowX: 'auto',
gap: '0em',
}}
>
<h1>Google Material You UI kit</h1>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
justifyContent: 'center',
alignItems: 'center',
}}
>
<div className={'m3 m3-wrapper'}>
<div
style={{
display: 'flex',
flexDirection: 'row',
padding: '25px',
}}
>
<SegmentedButtons>
<ButtonLayout>Segment 1</ButtonLayout>
<ButtonLayout>Segment 2</ButtonLayout>
</SegmentedButtons>
<div>
<Button>Label</Button>
</div>
<Divider orientation={'vertical'} variant={'full-width'} />
<div>
<Button>Label</Button>
</div>
<div
className={'m3 m3-wrapper'}
style={{
display: 'flex',
flexDirection: 'row',
gap: '0.5em',
justifyContent: 'space-evenly',
alignItems: 'center',
}}
>
<div
style={{
display: 'flex',
flexDirection: 'row',
padding: '25px',
}}
>
<Buttons />
<Divider orientation={'vertical'} variant={'inset'} />
<div>
<Button>Label</Button>
</div>
<Divider
orientation={'vertical'}
variant={'middle-inset'}
/>
<div
style={{
display: 'flex',
flexDirection: 'row',
padding: '25px',
}}
>
<IconButtons />
</div>
</div>
<div
className={'m3 m3-wrapper'}
style={{
display: 'flex',
flexDirection: 'row',
gap: '0.5em',
justifyContent: 'space-evenly',
alignItems: 'center',
}}
>
<Checkboxes />
<Divider
orientation={'vertical'}
variant={'middle-inset'}
/>
<Radios />
<Divider
orientation={'vertical'}
variant={'middle-inset'}
/>
<Badges />
</div>
<Switches />
<TextFields />
<Fabs />
<Divider orientation={'vertical'} variant={'middle-inset'} />
<div>
<Button disabled>Label</Button>
</div>
</div>
</Fragment>

View File

@ -18,7 +18,7 @@ const Badge = forwardRef<SVGSVGElement, BadgeProps>(
>
{children && (
<text x={'50%'} y={'50%'}>
{children}
{parseInt(children) > 999 ? '999+' : children}
</text>
)}
</svg>

View File

@ -0,0 +1,20 @@
import React, { forwardRef, HTMLAttributes } from 'react';
export interface CardProps extends HTMLAttributes<HTMLDivElement> {
variant?: 'outlined' | 'filled' | 'elevated';
}
const Card = forwardRef<HTMLDivElement, CardProps>(
({ variant = 'filled', ...props }, ref) => {
const classes =
`m3 m3-card m3-card-${variant} ${props.className ?? ''}`.trimEnd();
return (
<div {...props} className={classes} ref={ref}>
{props.children}
</div>
);
},
);
export default Card;

View File

@ -1,26 +1,26 @@
hr.m3.m3-divider
border: none
outline: 0.5px solid var(--md-sys-color-outline-variant)
margin-inline: 4px
position: relative
margin: 0
&.vertical
height: 100%
height: auto
writing-mode: vertical-lr
&.inset
margin-top: 16px
margin-inline-start: 16px
&.middle-inset
margin-bottom: 16px
margin-top: 16px
margin-inline: 16px
&.horizontal
width: 100%
width: auto
writing-mode: horizontal-tb
&.inset
margin-left: 16px
margin-inline-start: 16px
&.middle-inset
margin-left: 16px
margin-right: 16px
margin-inline: 16px

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@ -25,7 +25,6 @@ html
user-select: none
.m3.m3-wrapper
width: 100%
position: relative
display: block
background-color: var(--md-sys-color-surface)