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

ESLINT is holy crap

Browse Source
This commit is contained in:
doryan04
2024-02-01 01:58:19 +04:00
parent 7cdc259fb3
commit 26584d5482
151 changed files with 26811 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

221
app/components/fabs.tsx Normal file
View File

@@ -0,0 +1,221 @@
import React from 'react';
import { FAB } from '../../src/primitive-components/material-you-components';
export default function Fabs() {
return (
<div className={'m3 m3-wrapper'}>
<div style={{ display: 'flex', flexDirection: 'row', gap: '2em' }}>
<div>
<h1> FABs with elevation</h1>
<div
style={{
display: 'flex',
flexDirection: 'column',
width: '100%',
gap: '2em',
}}
>
<div>
<h2> Small </h2>
<div style={{ display: 'flex', gap: '2em' }}>
<FAB
centralRipple
elevated
icon={'edit'}
size={'small'}
/>
<FAB
elevated
icon={'edit'}
size={'small'}
variant={'primary'}
/>
<FAB
elevated
icon={'edit'}
size={'small'}
variant={'secondary'}
/>
<FAB
elevated
icon={'edit'}
size={'small'}
variant={'tertiary'}
/>
</div>
</div>
<div>
<h2> Default </h2>
<div style={{ display: 'flex', gap: '2em' }}>
<FAB elevated icon={'edit'} />
<FAB
elevated
icon={'edit'}
variant={'primary'}
/>
<FAB
elevated
icon={'edit'}
variant={'secondary'}
/>
<FAB
elevated
icon={'edit'}
variant={'tertiary'}
/>
</div>
</div>
<div>
<h2> Large </h2>
<div style={{ display: 'flex', gap: '2em' }}>
<FAB elevated icon={'edit'} size={'large'} />
<FAB
elevated
icon={'edit'}
size={'large'}
variant={'primary'}
/>
<FAB
elevated
icon={'edit'}
size={'large'}
variant={'secondary'}
/>
<FAB
elevated
icon={'edit'}
size={'large'}
variant={'tertiary'}
/>
</div>
</div>
<div>
<h2> Extended </h2>
<div style={{ display: 'flex', gap: '2em' }}>
<FAB elevated icon={'edit'} size={'extended'}>
<span className={'label-large'}>Label</span>
</FAB>
<FAB
elevated
icon={'edit'}
size={'extended'}
variant={'primary'}
>
<span className={'label-large'}>Label</span>
</FAB>
<FAB
elevated
icon={'edit'}
size={'extended'}
variant={'secondary'}
>
<span className={'label-large'}>Label</span>
</FAB>
<FAB
elevated
icon={'edit'}
size={'extended'}
variant={'tertiary'}
>
<span className={'label-large'}>Label</span>
</FAB>
</div>
</div>
</div>
</div>
<div>
<h1> FABs without elevation</h1>
<div
style={{
display: 'flex',
flexDirection: 'column',
width: '100%',
gap: '2em',
}}
>
<div>
<h2> Small </h2>
<div style={{ display: 'flex', gap: '2em' }}>
<FAB icon={'edit'} size={'small'} />
<FAB
icon={'edit'}
size={'small'}
variant={'primary'}
/>
<FAB
icon={'edit'}
size={'small'}
variant={'secondary'}
/>
<FAB
icon={'edit'}
size={'small'}
variant={'tertiary'}
/>
</div>
</div>
<div>
<h2> Default </h2>
<div style={{ display: 'flex', gap: '2em' }}>
<FAB icon={'edit'} />
<FAB icon={'edit'} variant={'primary'} />
<FAB icon={'edit'} variant={'secondary'} />
<FAB icon={'edit'} variant={'tertiary'} />
</div>
</div>
<div>
<h2> Large </h2>
<div style={{ display: 'flex', gap: '2em' }}>
<FAB icon={'edit'} size={'large'} />
<FAB
icon={'edit'}
size={'large'}
variant={'primary'}
/>
<FAB
icon={'edit'}
size={'large'}
variant={'secondary'}
/>
<FAB
icon={'edit'}
size={'large'}
variant={'tertiary'}
/>
</div>
</div>
<div>
<h2> Extended </h2>
<div style={{ display: 'flex', gap: '2em' }}>
<FAB icon={'edit'} size={'extended'}>
<span className={'label-large'}>Label</span>
</FAB>
<FAB
icon={'edit'}
size={'extended'}
variant={'primary'}
>
<span className={'label-large'}>Label</span>
</FAB>
<FAB
icon={'edit'}
size={'extended'}
variant={'secondary'}
>
<span className={'label-large'}>Label</span>
</FAB>
<FAB
icon={'edit'}
size={'extended'}
variant={'tertiary'}
>
<span className={'label-large'}>Label</span>
</FAB>
</div>
</div>
</div>
</div>
</div>
</div>
);
}