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

190
app/components/icon-buttons.tsx Normal file
View File

@@ -0,0 +1,190 @@
'use client';
import React from 'react';
import { IconButton } from '../../src/primitive-components/material-you-components';
function IconButtons() {
return (
<div className={'m3 m3-wrapper'}>
<h1> Icon buttons </h1>
<div style={{ display: 'flex', flexDirection: 'row', gap: '2em' }}>
<div>
<h2> Default buttons </h2>
<div
style={{
display: 'flex',
flexDirection: 'row',
gap: '0.5em',
}}
>
<IconButton centralRipple icon={'settings'} />
<IconButton icon={'settings'} variant={'filled'} />
<IconButton icon={'settings'} variant={'tonal'} />
<IconButton icon={'settings'} variant={'outlined'} />
</div>
<h2> Disabled default buttons </h2>
<div
style={{
display: 'flex',
flexDirection: 'row',
gap: '0.5em',
}}
>
<IconButton disabled icon={'settings'} />
<IconButton
disabled
icon={'settings'}
variant={'filled'}
/>
<IconButton
disabled
icon={'settings'}
variant={'tonal'}
/>
<IconButton
disabled
icon={'settings'}
variant={'outlined'}
/>
</div>
</div>
<div>
<h2> Toggle buttons </h2>
<div
style={{
display: 'flex',
flexDirection: 'row',
gap: '0.5em',
}}
>
<IconButton
icon={'settings'}
toggled={{
selected: 'settings',
unselected: 'settings',
}}
/>
<IconButton
icon={'settings'}
toggled={{
selected: 'settings',
unselected: 'settings',
}}
variant={'filled'}
/>
<IconButton
icon={'settings'}
toggled={{
selected: 'settings',
unselected: 'settings',
}}
variant={'tonal'}
/>
<IconButton
icon={'settings'}
toggled={{
selected: 'settings',
unselected: 'settings',
}}
variant={'outlined'}
/>
</div>
<h2> Disabled toggle buttons </h2>
<div
style={{
display: 'flex',
flexDirection: 'row',
gap: '0.5em',
}}
>
<IconButton
disabled
icon={'settings'}
toggled={{
selected: 'settings',
unselected: 'settings',
}}
/>
<IconButton
disabled
icon={'settings'}
toggled={{
selected: 'settings',
unselected: 'settings',
}}
variant={'filled'}
/>
<IconButton
disabled
icon={'settings'}
toggled={{
selected: 'settings',
unselected: 'settings',
}}
variant={'tonal'}
/>
<IconButton
disabled
icon={'settings'}
toggled={{
selected: 'settings',
unselected: 'settings',
}}
variant={'outlined'}
/>
</div>
<h2> Disabled selected toggle buttons </h2>
<div
style={{
display: 'flex',
flexDirection: 'row',
gap: '0.5em',
}}
>
<IconButton
disabled
icon={'settings'}
selected
toggled={{
selected: 'settings',
unselected: 'settings',
}}
/>
<IconButton
disabled
icon={'settings'}
selected
toggled={{
selected: 'settings',
unselected: 'settings',
}}
variant={'filled'}
/>
<IconButton
disabled
icon={'settings'}
selected
toggled={{
selected: 'settings',
unselected: 'settings',
}}
variant={'tonal'}
/>
<IconButton
disabled
icon={'settings'}
selected
toggled={{
selected: 'settings',
unselected: 'settings',
}}
variant={'outlined'}
/>
</div>
</div>
</div>
</div>
);
}
export default IconButtons;